CSS Grid Layout — Free HTML Tutorial

Learn CSS Grid Layout in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

✓ 100% Free ✓ No Login Needed ✓ NCERT / CBSE Aligned ✓ Download as PDF

TL;DR: Learn CSS Grid Layout in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

Written & reviewed by the Syllab.in Academic Team (CBSE/NCERT subject experts) · Updated Sep 17, 2026

🤖 Stuck on any question? Ask Syllab's free AI Tutor for a step-by-step explanation — instant, unlimited, no login.

CSS Grid Layout in HTML

CSS Grid: display: grid creates rows and columns. grid-template-columns defines column widths. grid-template-rows defines row heights.

Auto-fit and auto-fill for responsive grids. fr unit for fractions: 1fr 2fr = 1:2 ratio.

Grid handles complex layouts better than flexbox. grid-gap (now gap) for spacing.

CSS Grid Layout — Syntax

<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }
</style>

Learn CSS Grid Layout step by step with Syllab's free interactive HTML tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full HTML course →