CSS Grid Container       

Grid Container

To transform an HTML element into a grid container, the display property needs to be set to either “grid” or “inline-grid.”

Grid containers encompass grid items, organized within columns and rows.

The grid-template-columns Property

The grid-template-columns property establishes both the number of columns and their individual widths within a grid layout. Its value is a space-separated list where each entry denotes the width of a corresponding column.

For instance, if you aim for a grid layout with four columns, you can specify the width of each column, or assign “auto” to ensure uniform width across all columns.

Example 

Create a grid layout comprising four columns.

.grid-container {   display: grid;   grid-template-columns: auto auto auto auto; }

Note: Should there be more than four items in a grid configured with four columns, the grid will automatically generate a new row to accommodate the excess items.

The grid-template-columns property can also define the width of the columns.

 

Example 

Define a specific size for each of the four columns.

.grid-container {   display: grid;   grid-template-columns: 80px 200px auto 40px; }

The grid-template-rows Property

The grid-template-rows property determines the height of each row.

The value consists of a list of heights separated by spaces, with each height corresponding to a specific row.

Example 

.grid-container {   display: grid;   grid-template-rows: 80px 200px; }

The justify-content Property

The justify-content property aligns the entire grid within its container.

Please note that for the justify-content property to take effect, the total width of the grid must be smaller than the width of its container.

Example 

.grid-container {   display: grid;   justify-content: space-evenly; }

Example 

.grid-container {   display: grid;   justify-content: space-around; }

Example 

grid-container {   display: grid;   justify-content: space-between; }

Example 

.grid-container {   display: grid;   justify-content: center; }

Example 

.grid-container {   display: grid;   justify-content: start; }

Example 

.grid-container {   display: grid;   justify-content: end; }

The align-content Property

The align-content property aligns the entire grid vertically within its container.

Keep in mind that for the align-content property to take effect, the total height of the grid must be smaller than the height of its container.

Example 

.grid-container {   display: grid;   height: 400px;   align-content: center; }

Example 

.grid-container {   display: grid;   height: 400px;   align-content: space-evenly; }

Example 

.grid-container {   display: grid;   height: 400px;   align-content: space-around; }

Example 

.grid-container {   display: grid;   height: 400px;   align-content: space-between; }

Example 

.grid-container {   display: grid;   height: 400px;   align-content: start; }

Example 

.grid-container {   display: grid;   height: 400px;   align-content: end; }