grid tutorial css

Visual breakdown of a CSS Grid layout with labeled rows, columns, and areas

CSS Grid is a two-dimensional layout system for designing web pages with rows and columns. It enables precise control over placement and sizing of elements within a container, making it ideal for complex, responsive designs.

Grid works by defining a grid container and then placing child elements into specific grid cells. You set up the structure using display: grid on a parent element, then define rows and columns with grid-template-rows and grid-template-columns. Elements are positioned using grid-row and grid-column properties.

For example, to create a three-column layout with equal-width columns and 20px spacing between them:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

Each child inside .container automatically becomes a grid item and occupies one cell unless explicitly assigned.

How It Works

CSS Grid operates on a coordinate system. The container defines the grid lines, and each item is placed relative to those lines. You can assign items to specific row and column positions using grid-row-start, grid-column-end, or shorthand like grid-area.

Grid tracks-rows and columns-are defined by the grid-template-rows and grid-template-columns properties. Values include absolute units (like px), relative units (like %), and flexible units (fr). The fr unit divides available space proportionally among tracks.

When a grid container has multiple children, they flow into cells in document order unless overridden. You can change this behavior using grid-auto-flow to control how auto-placed items are laid out-options include row, column, or dense to fill gaps.

Core Concepts and Types

Grid uses distinct concepts: containers, tracks, items, lines, and areas. A container is the element with display: grid. Tracks are the rows and columns. Items are the direct children of the container. Lines are the boundaries between tracks. Areas are rectangular regions formed by combining rows and columns.

There are two main ways to define a grid: explicit and implicit. An explicit grid is defined with grid-template-rows and grid-template-columns. If an item is placed outside this area, the browser creates implicit tracks to accommodate it. These can be controlled with grid-auto-rows and grid-auto-columns.

Property	Function	Example
`grid-template-columns`	Defines column widths	`1fr 2fr 1fr`
`grid-template-rows`	Defines row heights	`100px auto 50px`
`gap`	Space between grid cells	`1rem`
`grid-area`	Assigns item to named area	`header`

Named areas simplify complex layouts. For example:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

This creates a layout with a header spanning both columns, a sidebar and main content in the middle row, and a footer below. Child elements use grid-area: header; to occupy their designated region.

Common Uses and Misconceptions

Grid is often used for entire page layouts, dashboard interfaces, card grids, and navigation systems. It's especially effective when components need to align across multiple dimensions-such as a product listing with varying image sizes and consistent text alignment.

A common mistake is treating Grid like Flexbox. While both are layout tools, Flexbox is designed for one-dimensional flows (either horizontal or vertical), while Grid handles two-dimensional arrangements. Using Flexbox for multi-row layouts leads to awkward workarounds. For example, trying to center a group of cards vertically and horizontally with Flexbox requires nested containers and extra markup.

Another misconception is that Grid is only for desktops. Modern browsers support Grid down to IE11 (with polyfills), and it scales well on mobile devices. A 2023 survey by Can I Use showed 97.6% global support for grid-template-areas and gap, with 94.2% support for grid-auto-flow.

Real-World Example: Responsive Dashboard

Consider a dashboard with four widgets: a chart, a list, a status panel, and a calendar. On desktop, these sit side-by-side in a 2x2 grid. On mobile, they stack vertically.

Define the layout:

.dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
  padding: 1rem;
}

@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
}

Assign items:

.chart { grid-area: 1 / 1 / span 1 / span 2; }
.list { grid-area: 2 / 1; }
.status { grid-area: 2 / 2; }
.calendar { grid-area: 1 / 2; }

The chart spans two columns and one row. The calendar sits in the top-right corner. On smaller screens, the media query changes the layout to a single column, preserving readability.

One non-obvious detail: gap does not affect the size of grid tracks. It adds space between items, but the tracks still size based on grid-template-rows and grid-template-columns. This allows consistent alignment even when spacing varies.

What It's Not

Grid is not a replacement for Flexbox. Use Flexbox for component-level alignment-like centering buttons in a nav bar, or arranging form fields in a single row. Use Grid for page-level or section-level structures.

Also, Grid doesn't require JavaScript. Unlike older layout methods involving floats or inline-blocks, Grid relies entirely on CSS. This reduces bundle size and improves rendering performance.

I built a personal portfolio site using Grid in 2022. The homepage features a hero section, a project grid, and a contact block-all arranged with grid-template-areas. The layout remained stable across devices without media queries until the design needed responsiveness. At that point, I added breakpoints, and the layout adapted smoothly.

Mastering grid tutorial css means understanding how to define structure, assign items, and adapt to screen size. With practice, you'll build layouts faster and with fewer bugs than traditional methods.