CSS Grid Layout Tutorial

Build complex, responsive layouts with CSS Grid, perfect for modern web designs.

Master CSS Grid Layouts

CSS Grid enables powerful, two-dimensional layouts. This 2025 tutorial covers six examples, from dashboards to photo grids, all browser-based and optimized for small outputs.

Why Learn CSS Grid?

Grid is perfect for complex layouts. Learn to:

  • Use display: grid for precise layouts.
  • Create dashboards and photo grids.
  • Manage responsive designs with media queries.
  • Combine with Flexbox for hybrid layouts.

Best Practices

Use semantic HTML, name grid areas for clarity, and test responsiveness. Avoid overcomplicating with too many grid lines.

Example 1: Basic Grid Layout

Create a simple 2x2 grid layout with equal columns and rows.

Code Editor
Download Code
Live Output

Note: Adjust grid columns, rows, or gap. Clear and visible in small outputs.

Example 2: Photo Grid

Create a responsive photo grid with varying item sizes using grid-column.

Code Editor
Download Code
Live Output

Note: Modify spans or add items. Fits well in small outputs.

Example 3: Dashboard Layout

Create a dashboard with named grid areas for header, sidebar, and main content.

Code Editor
Download Code
Live Output

Note: Adjust grid areas or sizes. Clear and structured in small outputs.

Example 4: Auto-Fit Grid

Use auto-fit and minmax for a responsive grid that adapts to container size.

Code Editor
Download Code
Live Output

Note: Add items or change minmax values. Responsive in small outputs.

Example 5: Nested Grid

Create a grid with a nested grid inside for complex layouts.

Code Editor
Download Code
Live Output

Note: Add nested items or adjust gaps. Clear and structured in small outputs.

Example 6: Grid with Spanning

Use grid-column and grid-row to create spanning items for dynamic layouts.

Code Editor
Download Code
Live Output

Note: Adjust spanning or add items. Visually engaging in small outputs.

Next Steps

Combine Grid with Flexbox for hybrid layouts. Explore Webshs Tutorials for CSS Animations, Flexbox, or JavaScript Interactivity, or see Button Animations for UI ideas.