CSS Grid Introduction

Learn how to create modern, responsive web layouts with CSS Grid

What is CSS Grid?

CSS Grid Layout is a powerful two-dimensional layout system designed for web development. It allows you to create complex layouts by dividing a page into rows and columns, and then placing elements into these defined areas. Unlike Flexbox which is one-dimensional, Grid allows you to control both rows and columns simultaneously.

Key Grid Concepts:

Grid Container - The element that contains the grid
Grid Items - The direct children of the grid container
Grid Lines - The lines that make up the grid structure
Grid Tracks - The rows and columns of the grid
Grid Cells - The individual units of the grid
Grid Areas - Rectangular areas made up of one or more grid cells

CSS Grid 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, %
grid-column	Specifies a grid item's column position	line numbers, span
grid-row	Specifies a grid item's row position	line numbers, span
justify-items	Aligns items along the row axis	start, end, center, stretch
align-items	Aligns items along the column axis	start, end, center, stretch
grid-auto-flow	Controls how auto-placed items are inserted	row, column, dense

Grid Layout Techniques

Basic Grid

Create a simple grid with defined columns and rows.

Fractional Units

Use fr units to distribute space proportionally.

1fr

2fr

1fr

Grid Areas

Create named areas for semantic layout structure.

Header

Sidebar

Content

Footer

Responsive Grid

Create flexible layouts that adapt to screen size.

Best Practices for Grid Layout

Effective Usage

Use Grid for two-dimensional layouts (both rows and columns)
Start with mobile-first responsive design
Use meaningful names for grid areas
Combine with Flexbox for component-level layouts
Use fractional units for flexible layouts
Take advantage of the minmax() function for responsive grids

Common Mistakes to Avoid

Using Grid for simple one-dimensional layouts (use Flexbox instead)
Overcomplicating layouts with too many grid lines
Not testing on various screen sizes
Forgetting to consider browser support
Not using semantic HTML with Grid
Ignoring accessibility concerns

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 overall layout and Flexbox for components

CSS Grid in Action

Example Code

/* CSS Grid Introduction */

/* Creating a grid container */
.grid-container {
  display: grid; /* Establishes a grid formatting context */
  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
  grid-template-rows: 100px 200px; /* Two explicit rows */
  gap: 20px; /* Space between grid items */
  padding: 20px;
  background-color: #f5f5f5;
}

/* Grid items */
.grid-item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

/* Using fractional units */
.grid-fr {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Middle column is twice as wide */
  gap: 10px;
}

/* Using repeat() function */
.grid-repeat {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Four equal columns */
  gap: 15px;
}

/* Grid with fixed and flexible sizes */
.grid-mixed {
  display: grid;
  grid-template-columns: 200px 1fr 300px; /* Fixed, flexible, fixed */
  gap: 10px;
}

/* Grid with auto rows */
.grid-auto-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px; /* Implicit rows will be 100px tall */
  gap: 15px;
}

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

/* Grid areas */
.grid-areas {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 80px 1fr 80px;
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
  gap: 10px;
  height: 400px;
}

.header {
  grid-area: header;
  background-color: #e74c3c;
}

.sidebar {
  grid-area: sidebar;
  background-color: #2ecc71;
}

.content {
  grid-area: content;
  background-color: #3498db;
}

.footer {
  grid-area: footer;
  background-color: #f39c12;
}

/* Grid alignment */
.grid-alignment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  justify-items: center; /* Align items horizontally */
  align-items: center; /* Align items vertically */
  height: 300px;
  background-color: #f5f5f5;
}

/* Grid item placement */
.item-placement {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

.placed-item {
  grid-column: 2 / 4; /* Item spans from column line 2 to 4 */
  grid-row: 1 / 3; /* Item spans from row line 1 to 3 */
  background-color: #9b59b6;
}

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

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

.grid-with-vars {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 100px);
  gap: var(--grid-gap);
}

/* Nested grid */
.nested-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  background-color: #34495e;
}

.nested-grid > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.nested-grid > div > div {
  background-color: #3498db;
  padding: 10px;
}

Ready to Try It Yourself?

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

< Previous Next >