CSS Grid Introduction

Take Quiz (1)

CSS Grid

CSS Grid is a two-dimensional layout system — it handles both rows and columns simultaneously. Use Grid for page-level layouts, Flexbox for component-level layouts.

Enabling Grid

Set display: grid on the container. Then define columns and rows.

Grid vs Flexbox

Grid	Flexbox
2D (rows + cols)	1D (one direction)
Layout-first	Content-first
Page/section layouts	Component alignment

Example

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */
  gap: 16px;
}

/* Items fill cells automatically */
.item { background: #6366f1; padding: 24px; }

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned