Learn More About Grid

Still not sure how to use grids? Before we dive in, let's introduce the core concepts of Grid layout in a bit more detail.

grid-template-columns

The grid-template-columns property in CSS Grid layout specifies the number and width of columns in a grid container.

For example

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

The class above sets the element with the .container class as a grid container and specifies the number and size of columns using the grid-template-columns property.

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

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

The English word repeat means "to repeat", and here it means creating "3 identical columns".

1fr means evenly dividing the available space in the grid container, setting the width of the columns uniformly.

Here, fr stands for a fraction of the available space in the grid container.

grid-auto-columns

Here, "auto" replaces "template" from grid-template-columns.

grid-auto-columns allows you to specify the width of additional columns when grid items are created within the grid container.

For example, the following CSS code sets the width of additional columns within the grid container.

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

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

It then uses the "grid-auto-columns" property to set the width of any additional columns that are created to 150px.

grid-template-rows

The grid-template-rows property in CSS Grid layout specifies the size and height of rows in a grid container.

All the features of grid-template-columns apply to "rows" instead of columns.

For example,

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

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

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

3. grid-auto-rows: Just like "grid-auto-columns", grid-auto-rows specifies the height of additional rows when grid items are created within the grid container.

For example,

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

The code above uses the "grid-template-rows" property to set the height of 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 rows created to 150px.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.

Learn moreSign In