Layout

Link Copy to Clipboard

View code

Layout OutputHTML

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

<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>

Click here to Copy Code

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

<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>

Click here to Copy Code

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

<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>

Click here to Copy Code

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

<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>

Click here to Copy Code

Layout 2 x 3 space between (w-1/4 = 25%)

<Page Heading>

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>

Click here to Copy Code