Academy / Advanced Level: HTML and CSS

CSS Grid Advanced Features

Explicit vs. Implicit Grids

Explicit grids are defined using grid-template-rows and grid-template-columns. These properties let you specify exactly how many rows and columns the grid should have.

Implicit grids are created automatically by the browser when you don’t explicitly define rows or columns for all grid items. The browser generates additional rows or columns as needed, based on the content.

Example of Explicit Grid:

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

Example of Implicit Grid:

If you don’t define enough rows or columns, the browser will implicitly create them.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

If you add more items than there are columns, the browser will automatically create new rows.