iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Grid Container

By · Reviewed & last updated · Part of CSS Tutorial

All the layout properties for a CSS grid live on the container — the element you put display: grid on. These shape the tracks, gaps, and alignment.

Container properties at a glance

PropertyPurposeExample
grid-template-columnsDefine column tracks.repeat(3, 1fr)
grid-template-rowsDefine row tracks.auto 1fr auto
grid-template-areasName-based layout map."header header" "side main"
gapSpace between tracks.12px 24px
justify-itemsInline-axis alignment of every item.start, center, stretch
align-itemsBlock-axis alignment of every item.start, end, center
place-itemsShorthand for both.center
grid-auto-rowsSize of implicitly-created rows.minmax(80px, auto)
grid-auto-flowHow auto-placed items fill the grid.row dense

A typical card-grid container

CSS
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  align-items: stretch;          /* cards in a row match heights */
}
Tip: repeat(auto-fill, minmax(MIN, 1fr)) is the single most useful grid pattern — it gives you responsive columns without writing media queries.

Example

Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>

<h1>Grid Container</h1>
<div class="box">Edit the CSS on the left, then click Run &raquo;</div>

</body>
</html>
Try it Yourself »

Exercise

Make three equal columns with one declaration.

.grid { display: grid; grid-template-columns: repeat(3, ); }

Test yourself

Q1. Which property creates a grid?
Q2. Which produces responsive columns without media queries?
Q3. Which property gives space between tracks?

Discussion

Loading…