CSS Grid Container

Learn how to create powerful layouts with CSS Grid Container properties

What is a CSS Grid Container?

A CSS Grid Container is an element that has display: grid or display: inline-grid applied to it. It becomes the parent container for grid items and defines the structure of the grid layout through various properties that control columns, rows, gaps, alignment, and more.

Key Grid Container Properties:

grid-template-columns - Defines the columns of the grid
grid-template-rows - Defines the rows of the grid
grid-template-areas - Defines named grid areas
gap - Sets the gaps between grid items
justify-items - Aligns items along the inline axis
align-items - Aligns items along the block axis
justify-content - Aligns the grid along the inline axis
align-content - Aligns the grid along the block axis
grid-auto-flow - Controls how auto-placed items are inserted

CSS Grid Container Properties Reference

Property	Description	Values
display	Defines an element as a grid container	grid, inline-grid
grid-template-columns	Defines the columns of the grid	px, %, fr, repeat(), auto, minmax()
grid-template-rows	Defines the rows of the grid	px, %, fr, repeat(), auto, minmax()
grid-template-areas	Defines named grid areas	area names, . for empty cells
gap	Sets the gaps between grid items	px, em, rem, %
row-gap	Sets the gap between rows	px, em, rem, %
column-gap	Sets the gap between columns	px, em, rem, %
justify-items	Aligns items along the inline axis	start, end, center, stretch
align-items	Aligns items along the block axis	start, end, center, stretch
place-items	Shorthand for align-items and justify-items	align justify
justify-content	Aligns the grid along the inline axis	start, end, center, stretch, space-around, space-between, space-evenly
align-content	Aligns the grid along the block axis	start, end, center, stretch, space-around, space-between, space-evenly
place-content	Shorthand for align-content and justify-content	align justify
grid-auto-flow	Controls how auto-placed items are inserted	row, column, dense
grid-auto-columns	Defines size of implicitly created columns	px, %, fr, auto, minmax()
grid-auto-rows	Defines size of implicitly created rows	px, %, fr, auto, minmax()

CSS Grid Container in Action

Example Code

/* CSS Grid Container Properties */

/* Creating a grid container */
.grid-container {
  display: grid; /* Establishes a grid formatting context */
}

/* Defining columns */
.grid-cols-3 {
  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
}

.grid-cols-mixed {
  grid-template-columns: 200px 1fr 300px; /* Fixed, flexible, fixed */
}

.grid-cols-repeat {
  grid-template-columns: repeat(4, 1fr); /* Four equal columns */
}

.grid-cols-minmax {
  grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Columns between 100px and 1fr */
}

.grid-cols-auto {
  grid-template-columns: 100px auto 200px; /* Auto-sized middle column */
}

/* Defining rows */
.grid-rows-2 {
  grid-template-rows: 100px 200px; /* Two explicit rows */
}

.grid-rows-repeat {
  grid-template-rows: repeat(3, 80px); /* Three rows of 80px */
}

.grid-rows-minmax {
  grid-template-rows: minmax(100px, auto) minmax(200px, auto); /* Flexible rows */
}

/* Grid template areas */
.grid-areas {
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

/* Gap properties */
.grid-gap-20 {
  gap: 20px; /* Uniform gap between rows and columns */
}

.grid-gap-separate {
  row-gap: 15px;     /* Gap between rows */
  column-gap: 30px;  /* Gap between columns */
}

/* Grid auto flow */
.grid-flow-row {
  grid-auto-flow: row; /* Items fill rows first (default) */
}

.grid-flow-col {
  grid-auto-flow: column; /* Items fill columns first */
}

.grid-flow-dense {
  grid-auto-flow: dense; /* Attempt to fill holes in the grid */
}

/* Automatic row and column sizing */
.grid-auto-cols {
  grid-auto-columns: minmax(100px, auto); /* Size for implicit columns */
}

.grid-auto-rows {
  grid-auto-rows: 80px; /* Size for implicit rows */
}

/* Alignment properties */
.justify-items-start {
  justify-items: start; /* Align items to start of grid area (horizontal) */
}

.justify-items-center {
  justify-items: center; /* Center items horizontally */
}

.justify-items-end {
  justify-items: end; /* Align items to end of grid area (horizontal) */
}

.align-items-start {
  align-items: start; /* Align items to start of grid area (vertical) */
}

.align-items-center {
  align-items: center; /* Center items vertically */
}

.align-items-end {
  align-items: end; /* Align items to end of grid area (vertical) */
}

.align-items-stretch {
  align-items: stretch; /* Stretch items to fill grid area (default) */
}

/* Place items shorthand */
.place-items-center {
  place-items: center; /* Sets both align-items and justify-items */
}

/* Justify content */
.justify-content-start {
  justify-content: start; /* Align grid to start of container (horizontal) */
}

.justify-content-center {
  justify-content: center; /* Center grid horizontally */
}

.justify-content-end {
  justify-content: end; /* Align grid to end of container (horizontal) */
}

.justify-content-space-between {
  justify-content: space-between; /* Distribute space between grid tracks */
}

.justify-content-space-around {
  justify-content: space-around; /* Distribute space around grid tracks */
}

.justify-content-space-evenly {
  justify-content: space-evenly; /* Distribute space evenly around grid tracks */
}

/* Align content */
.align-content-start {
  align-content: start; /* Align grid to start of container (vertical) */
}

.align-content-center {
  align-content: center; /* Center grid vertically */
}

.align-content-end {
  align-content: end; /* Align grid to end of container (vertical) */
}

.align-content-space-between {
  align-content: space-between; /* Distribute space between grid tracks */
}

.align-content-space-around {
  align-content: space-around; /* Distribute space around grid tracks */
}

.align-content-space-evenly {
  align-content: space-evenly; /* Distribute space evenly around grid tracks */
}

/* Place content shorthand */
.place-content-center {
  place-content: center; /* Sets both align-content and justify-content */
}

/* Using CSS variables with grid */
:root {
  --grid-columns: 3;
  --grid-rows: 2;
  --grid-gap: 20px;
  --grid-item-min: 100px;
}

.grid-with-vars {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-template-rows: repeat(var(--grid-rows), minmax(var(--grid-item-min), auto));
  gap: var(--grid-gap);
}

/* Responsive grid container */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* Grid with masonry layout (experimental) */
.grid-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  gap: 15px;
}

/* Grid container with max dimensions */
.grid-limited {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  max-width: 800px;
  margin: 0 auto;
}

/* Nested grid container */
.nested-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 15px;
  background-color: #f0f0f0;
  border-radius: 5px;
}

/* Grid with explicit and implicit tracks */
.grid-explicit-implicit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 100px 150px;
  grid-auto-rows: 80px;
  gap: 10px;
}

Grid Container Techniques

Template Columns

Define the column structure of your grid.

1fr

2fr

1fr

Grid Areas

Create semantic layouts with named areas.

Header

Sidebar

Content

Gap Properties

Control spacing between grid items.

Alignment

Align items within the grid container.

Best Practices for Grid Containers

Effective Usage

Use semantic HTML structure with grid layout
Start with mobile-first responsive design
Use meaningful names for grid areas
Combine fr units with minmax() for flexible layouts
Use the repeat() function for repetitive patterns
Take advantage of CSS variables for consistent grids

Common Mistakes to Avoid

Overcomplicating grid templates unnecessarily
Forgetting to consider browser support for newer features
Not testing on various screen sizes
Using too many fixed values instead of flexible units
Ignoring accessibility concerns with content reordering
Not using named areas for complex layouts

Browser Support & Accessibility

CSS Grid is supported in all modern browsers
Use feature queries (@supports) for progressive enhancement
Ensure proper reading order for screen readers
Maintain logical source order despite visual placement
Test keyboard navigation through grid items
Consider using Grid for layout and Flexbox for components

Ready to Try It Yourself?

Experiment with CSS Grid Container properties in our interactive editor. See your changes in real-time and build your understanding through practice.

< Previous Next >