CSS Grid Container

A CSS Grid Container is a parent element with display: grid or inline-grid that organizes its direct children (grid items) into rows and columns. It allows you to create flexible, responsive layouts and control spacing, alignment, and placement of items easily.

What is a CSS Grid Container?

A Grid Container is the element where you apply display: grid or display: inline-grid.

This container controls how grid items (its direct children) are placed, sized, and aligned.

Example:

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: auto auto;
  gap: 10px;
}

Grid Container Properties

display

Defines the container as a grid.

grid: Creates a block-level grid.
inline-grid: Creates an inline-level grid.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: grid;   /* or inline-grid */
  grid-template-columns: 100px 100px 100px;
  gap: 10px;
}
.item {
  background: lightblue;
  padding: 20px;
  text-align: center;
}

grid-template-rows & grid-template-columns

These define the number and size of rows and columns in the grid.

Values :

px, %, fr, auto, minmax(min, max), repeat(count, value)

Example :

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

.container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;  /* 3 columns */
  grid-template-rows: 100px auto;        /* 2 rows */
  gap: 10px;
}
.item {
  background: peachpuff;
  padding: 20px;
}

grid-template-areas

Lets you create named areas for better readability.

Values :

Custom area names inside quotes ("header main")
. → empty cell

Example:

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px auto 60px;
  gap: 10px;
}
.header  { grid-area: header; background: lightgreen; }
.sidebar { grid-area: sidebar; background: lightcoral; }
.main    { grid-area: main; background: lightyellow; }
.footer  { grid-area: footer; background: lightblue; }

grid-template

Shorthand for defining rows, columns, and areas together.

Values :

Combines grid-template-rows, grid-template-columns, and grid-template-areas.

Example:

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
  <div class="footer">Footer</div>
</div>

.container {
  display: grid;
  grid-template:
    "header header" 80px
    "sidebar main" auto
    "footer footer" 60px
    / 200px 1fr;
}

grid-auto-rows & grid-auto-columns

When you don’t explicitly define enough rows/columns, CSS creates them automatically.

These properties set the default size of such implicit tracks.

Values :

px, %, fr, auto, minmax()

Example:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.container {
  display: grid;
  grid-template-columns: 200px;
  grid-auto-rows: 150px;   /* every new row will be 150px */
  gap: 10px;
}
.item {
  background: lavender;
  text-align: center;
}

grid-auto-flow

Controls how items are placed automatically when there’s no specific positioning.

Values :

row, column, row dense, column dense

Example :

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-auto-flow: column dense;
  gap: 10px;
}
.item {
  background: lightpink;
  padding: 20px;
}

gap, row-gap, column-gap

Defines spacing between grid items.

Values :

Any CSS length → 10px, 2em, %

Example:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  row-gap: 20px;
  column-gap: 40px;
}
.item {
  background: lightsteelblue;
  padding: 15px;
}

justify-items

Aligns items horizontally within their grid cells.

Values :

start, end, center, stretch

Example:

<div class="container">
  <div class="item">Box 1</div>
  <div class="item">Box 2</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  justify-items: center;
}
.item {
  background: lightseagreen;
  padding: 20px;
}

align-items

Aligns items vertically within their grid cells.

Values :

start, end, center, stretch

Example:

<div class="container">
  <div class="item">Top</div>
  <div class="item">Bottom</div>
</div>

.container {
  display: grid;
  grid-template-rows: 150px 150px;
  align-items: end;
}
.item {
  background: lightgoldenrodyellow;
  padding: 10px;
}

place-items

Shorthand for align-items + justify-items.

Values :

One value → applies to both (e.g., center)
Two values → first = vertical, second = horizontal (start end)

Example:

<div class="container">
  <div class="item">Centered</div>
</div>

.container {
  display: grid;
  grid-template-columns: 200px;
  grid-template-rows: 200px;
  place-items: center; /* both horizontally & vertically */
}
.item {
  background: lightsalmon;
  padding: 20px;
}

justify-content

Aligns the whole grid horizontally inside the container.

Values :

start, end, center, stretch,
space-between, space-around, space-evenly

Example:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  justify-content: space-between;
  width: 400px; /* to show effect */
}
.item {
  background: lightcyan;
  padding: 20px;
}

align-content

Aligns the whole grid vertically inside the container.

Values :

start, end, center, stretch,
space-between, space-around, space-evenly

Example:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

.container {
  display: grid;
  grid-template-rows: 100px 100px;
  height: 400px; /* extra height */
  align-content: center;
}
.item {
  background: lightgreen;
  padding: 20px;
}

place-content

Shorthand for align-content + justify-content.

Values :

One value → applies to both (center)
Two values → first = vertical, second = horizontal (center space-between)

Example:

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
</div>

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  height: 400px;
  width: 400px;
  place-content: center space-between;
}
.item {
  background: plum;
  padding: 20px;
}