CSS Grid Container

CSS Grid Container

To make an HTML element behave as a grid container, you have to set the display property to grid or inline-grid.

Grid containers consist of grid items, placed inside columns and rows.

The grid-template-columns Property

The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column.

The value is a space-separated-list, where each value defines the width of the respective column.

If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or “auto” if all columns should have the same width.

Example

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

The grid-template-rows Property

Example

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