Grid Classes

The power CSS Grid, ready to use in your editor.

Grid classes:#

1. We also offer the best & flexible grid system to design any type of grids.

2. To convert any div into a grid, you just need to add the class name grid to the container. And this will turn the container into a grid and all the child elements under this grid container will be displayed as grid elements.

Grid template columns:#

1. grid-cols followed by an hyphen and a number is the short form to add grid-template-columns property to the grid container.

2. An example grid template column class is grid-cols-1 this equals to adding the property grid-template-columns: repeat(1, minmax(0, 1fr));

3. grid-cols-3 is equals to adding the property grid-template-columns: repeat(3, minmax(0, 1fr)); to the grid.The same way you can add grid cols until 6.

Grid template rows:#

1. grid-rows followed by an hyphen and a number is the short form to add grid-template-rows property to the grid container.

2. An example grid template column class is grid-rows-1 this equals to adding the property grid-template-rows: repeat(1, minmax(0, 1fr));

3. grid-rows-2 is equals to adding the property grid-template-rows: repeat(2, minmax(0, 1fr)); to the grid.The same way you can add grid cols until 3 rows.

Grid gap:#

1. gap classes are followed by an hyphen and a number. Gap classes are the quickest way to add gap between grid elements.

2. gap-2 is the short form of adding the css property gap: 8px; As you already know, we follow the 4px spacing system, so gap-2 is gap: 8px; and gap-4 is gap: 16px; ,etc.

3. gap adds same gap between rows and columns. row-gap classes can be used to maintain the gap between rows.

4. gap classes must to be added to the grid containers.

Grid column & row start classes:#

Unlike the above mentioned grid classes, following classes applies to the child elements under grid. These classes define how the child elements should span and display inside the grid.

1. col-start-1 is an example of grid column start class. We are adding the property grid-column-start: 1;.

2. col-start-1 is literally asking the element to start at the 1st column. Same way, col-start-3 makes the element to start at the 3rd column regardless of the element’s position in the grid container.

Grid column & row end classes:#

As start classes start the element from the particular column, end classes end the element at a particular column.

1. col-end-2 is an example of grid column end class. We are adding the property grid-column-end: 2;.

2. col-end-2 is literally asking the element to end before the 2nd column. Same way, col-end-3 makes the element to end before the 3rd column regardless of the element’s position in the grid container.

Grid column & row span classes:#

1. Column span classes are best useful when you want to span an element across multiple columns.

2. col-span-2 is an example of column span class which is same as the CSS property, grid-column: span 2 / span 2;. col-span-2 makes the element to span across 2 columns without writing the above column start and end classes.

3. Same way, col-span-3 spans the element to span across 3 columns.