Box Model & Layout

CSS Grid

Two-dimensional layouts with rows and columns.

1Grid Container

Set display: grid and define columns/rows with grid-template-columns / grid-template-rows.

Example Code

css

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

2fr Unit & Auto

fr is a fractional unit of available space. Use auto for content-sized tracks.

Example Code

css

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

3Grid Areas

Name areas to build complex layouts in a readable way.

Example Code

css

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

4Auto-fit & minmax

Build responsive grids without media queries.

Example Code

css

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

5Understand it in a real interface

Grid coordinates tracks across rows and columns. A fractional track shares available space, while a fixed track reserves a chosen size. Content can still impose a minimum width, so inspect long strings and narrow containers instead of assuming a fractional layout can never overflow.

6Try it yourself

Build a gallery with an automatic number of columns and a preferred card minimum. Add one longer title and one differently shaped image. Resize from wide to narrow and identify whether the track sizing or the card’s own content causes any overflow.

Finished reading?

Mark this topic as complete to track progress.

CSS Flexbox

Next Topic

Media Queries