The grid system is built with grid system and allows up to 12 columns across the page.
If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:
Layout 6 x 2 (grid-cols-2)
<Page Heading>
Use this class for 6 column grid :- grid, grid-cols-6
classes for column spacing :- ( gap-1 = 4px , gap-2 = 8px , gap-3 = 12px , gap-4 = 16px )
Example :-
grid-cols-2
grid-cols-2
grid-cols-2
grid-cols-2
grid-cols-2
grid-cols-2
<div className='grid grid-cols-6 gap-5 sm:grid-cols-1 md:grid-cols-2'> <div className='border border-atom_rojored p-3 rounded'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>1</p> </div> <div className='border border-atom_rojored p-3 rounded'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>2</p> </div> <div className='border border-atom_rojored p-3 rounded'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>3</p> </div> <div className='border border-atom_rojored p-3 rounded'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>4</p> </div> <div className='border border-atom_rojored p-3 rounded'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>5</p> </div> <div className='border border-atom_rojored p-3 rounded'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>6</p> </div> </div>
Layout 4 x 3 (grid-cols-3)
<Page Heading>
Use this class for 4 column grid :- grid, grid-cols-4
classes for column spacing :- ( gap-1 = 4px , gap-2 = 8px , gap-3 = 12px , gap-4 = 16px )
Example :-
grid-cols-3
grid-cols-3
grid-cols-3
grid-cols-3
<div className='grid grid-cols-4 gap-5 sm:grid-cols-1 md:grid-cols-2'> <div className='border border-atom_rojored p-3 rounded'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>1</p> </div> <div className='border border-atom_rojored p-3 rounded'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>2</p> </div> <div className='border border-atom_rojored p-3 rounded'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>3</p> </div> <div className='border border-atom_rojored p-3 rounded'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>4</p> </div> </div>
Layout 3 x 4 (grid-cols-4)
<Page Heading>
Use this class for 3 column grid :- grid, grid-cols-3
classes for column spacing :- ( gap-1 = 4px , gap-2 = 8px , gap-3 = 12px , gap-4 = 16px )
Example :-
grid-cols-4
grid-cols-4
grid-cols-4
<div className='grid grid-cols-3 gap-5 sm:grid-cols-1 md:grid-cols-3'> <div className='border border-atom_rojored p-3 rounded'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>1</p> </div> <div className='border border-atom_rojored p-3 rounded'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>2</p> </div> <div className='border border-atom_rojored p-3 rounded'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>3</p> </div> </div>
Layout 2 x 6 (grid-cols-6)
<Page Heading>
Use this class for 2 column grid :- grid, grid-cols-2
classes for column spacing :- ( gap-1 = 4px , gap-2 = 8px , gap-3 = 12px , gap-4 = 16px )
Example :-
grid-cols-6
grid-cols-6
<div className='grid grid-cols-2 gap-5 sm:grid-cols-1 md:grid-cols-2'> <div className='border border-atom_rojored p-3 rounded'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>1</p> </div> <div className='border border-atom_rojored p-3 rounded'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>2</p> </div> </div>
Layout 2 x 3 space between (w-1/4 = 25%)
<Page Heading>
25%
25%
<<div className='flex items-center justify-between'> <div className='border border-atom_rojored p-3 rounded w-1/4'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>1</p> </div> <div className='border border-atom_rojored p-3 rounded w-1/4'> <p className='text-sm text-atom_primarydarkblack text-left font-medium'>2</p> </div> </div>