CSS Grid Container

Turning an Element into a Grid Container

Setting display: grid on an element makes it a grid container, and every direct child element automatically becomes a grid item -- no extra markup or classes required on the children themselves. This is the single switch that activates the whole grid layout system for that container.

Example: Turning an Element into a Grid Container

<style>
.container {
  display: grid;
  background: #eef;
  padding: 10px;
  gap: 8px;
}
.container div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>Auto grid item</div>
  <div>Auto grid item</div>
</div>

The Container/Item Relationship

Grid properties split cleanly into two groups: container-level properties (grid-template-columns, gap, justify-items) that you set once on the parent, and item-level properties (grid-column, justify-self) that you set individually on children when you need to override the default placement.

Example: The Container/Item Relationship

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  background: #eef;
  padding: 10px;
  gap: 8px;
}
.item {
  justify-self: start;
  background: seagreen;
  color: white;
  padding: 10px;
}
.container > div:not(.item) {
  background: mediumpurple;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="item">Item overrides placement</div>
  <div>Default item</div>
</div>

Defining Columns with grid-template-columns

grid-template-columns lists a size for each column left to right, so three values like "200px 1fr 1fr" creates exactly three columns with those widths. The number of values you provide is the number of columns the grid will have.

Example: Defining Columns with grid-template-columns

<style>
.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 8px;
  background: #eef;
  padding: 10px;
}
.container div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>200px</div>
  <div>1fr</div>
  <div>1fr</div>
</div>

Defining Rows with grid-template-rows

grid-template-rows works the same way but for the vertical axis, letting you fix specific row heights instead of leaving every row to size itself automatically to its tallest content.

Example: Defining Rows with grid-template-rows

<style>
.container {
  display: grid;
  grid-template-rows: 100px 100px;
  gap: 8px;
  background: #eef;
  padding: 10px;
}
.container div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>Row 1</div>
  <div>Row 2</div>
</div>

Implicit vs Explicit Grids

Rows or columns you define with grid-template-* form the explicit grid; if you place more items than that grid has room for, CSS Grid silently creates extra implicit rows to hold the overflow, sized by grid-auto-rows if you set it.

grid-auto-flow controls how those implicit items are packed -- row (the default) fills rows first, column fills columns first, and dense backfills earlier gaps -- while grid-auto-columns lets you size implicit columns the same way grid-auto-rows sizes implicit rows.

Example: Implicit vs Explicit Grids

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-auto-flow: row;
  gap: 8px;
  background: #eef;
  padding: 10px;
}
.container div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>Explicit</div>
  <div>Explicit</div>
  <div>Implicit overflow row</div>
</div>