In-Depth Exploration of Grid

Still not quite sure how grids are used? Before we dive in, let's take a closer look at some key concepts of Grid layout.

In CSS Grid layout, this property specifies the number and width of the columns (vertical lines) in a grid container.

For example:

Copy
.container {
  display: grid;
  grid-template-columns: 100px 200px;
}

The class above sets an element with the .container class as a grid container and uses the grid-template-columns property to specify the number and size of columns.

grid-template-columns: 100px 200px; creates two grid columns, setting the width of the first column to 100px and the second to 200px.

If you want to create three identical columns and set their widths equally, you can use grid-template-columns: repeat(3, 1fr);.

The English word repeat means "to do again" and the number 3 signifies "creating three identical width columns."

1fr means the available space is divided equally, setting the column widths uniformly.

Here, fr denotes a fractional unit of the available space in the grid container.

Instead of "template," we now have "auto" in grid-auto-columns.

grid-auto-columns allows you to specify the width of additional columns (vertical lines) when grid items are generated within the grid container.

For instance, using the following CSS:

Copy
.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-auto-columns: 150px;
}

The above code sets the width of the first column to 100px and the second column to 200px using the "grid-template-columns" property.

Then it uses the "grid-auto-columns" property to set the width of any additional generated grid item columns to 150px.

This property in CSS Grid layout specifies the size and height of the rows (horizontal lines) in a grid container.

You can think of all the characteristics of grid-template-columns applying to "rows" instead of "columns."

For example:

Copy
.container {
  display: grid;
  grid-template-rows: 100px 200px 150px;
}

The code above uses grid-template-rows: 100px 200px 150px; to create three grid rows, setting the first row to a height of 100px, the second to 200px, and the third to 150px.

Similar to grid-template-columns, using grid-template-rows: repeat(3, 1fr); means creating "three identical height rows."

Just like "grid-auto-columns," the "grid-auto-rows" property specifies the height of additional rows when grid items are generated within a grid container.

For example:

Copy
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  grid-auto-rows: 150px;
}

The above code uses the "grid-template-rows" property to set the first row to 100px and the second row to 200px.

It then uses the "grid-auto-rows" property to set the height of any additional generated grid item rows to 150px.