This is a utility class that allows you to define the size and number of columns in a grid container.
Grid Template Columns class works by specifying one or more values that will be applied to the columns of the grid.
With Grid Template Columns, you can create a grid layout that is flexible and responsive to different screen sizes and device types.
Grid Template Columns Classes
Grid template columns are defined using a series of pre-defined classes that control the width and placement of columns.
These classes allows you to apply size and position of columns quickly and easily, without having to write custom CSS.
The classes are based on a 12-column grid system mentioned in below table:
This class sets the grid container to have only one column.
Using this class, two columns will be displayed in the grid container.
Using this class, the grid container will have three columns.
There are four columns in the grid container when this class is applied.
A grid container with five columns is created by this class.
Grid containers are set to have six columns by this class.
This class sets grid containers to have seven columns.
This class specifies eight columns for grid containers.
A grid container with this class has nine columns.
As a result of this class, grid containers have ten columns.
This class sets a grid container to have eleven columns.
Using this class, grid containers will have twelve columns.
It is used to remove the grid-template-columns property from an element, effectively making it a single column grid. Useful when we want to create a grid that is not based on columns, but rather on rows or some other dimension.
Note: This property can only be used on grid containers; therefore, it can only be used alongside the grid class. This utility will not work without the grid class.