Academy / Advanced Level: HTML and CSS

CSS Grid Advanced Features

Responsive Grids with repeat(), auto-fill, and auto-fit

Creating responsive grids is one of the most powerful features of CSS Grid. You can use the repeat() function along with auto-fill and auto-fit to create grids that automatically adjust to different screen sizes.

auto-fill vs. auto-fit:

• auto-fill: Fills the grid with as many columns as possible, even if there are empty spaces.
• auto-fit: Similar to auto-fill, but collapses any empty columns, making the grid more compact.

Example: Responsive Grid Using auto-fit and minmax()

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

In this example:

• The grid will create as many 200px-wide columns as fit in the container.
• The columns expand to fill the available space (1fr), creating a fully responsive layout.