Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Introduction To CSS Grid
Rating: 5.0 out of 5(4 ratings)
3,003 students

Introduction To CSS Grid

Go beyond the basics — learn every Grid property with visual demos, unique insights and a final responsive layout.
Created byJoshan Grewal
Last updated 8/2025
English
English [Auto],

What you'll learn

  • Understand how the CSS Grid layout model works
  • Use properties for parent containers like grid-template-columns, grid-gap and place-content
  • Apply child item properties like grid-column, grid-row and align-self
  • Control layout using explicit, implicit and shorthand Grid declarations
  • Discover how Grid tracks and item sizes are calculated with underlying math
  • Use Grid areas to structure layouts visually and semantically
  • Align, order and position items across rows and columns
  • Apply your skills in a hands-on project to build a responsive page layout using Grid

Course content

25 sections • 49 lectures • 4h 30m total length

  • Introduction To Grid2:41

    Explore an overview of CSS grid and learn to design a responsive page using parent container properties and grid container properties for a header and three-column project section.

  • Overview Of Grid3:12

    Explore the two-dimensional CSS grid layout, compare it with flexbox, and learn how grid lines, tracks, rows, and columns enable precise, responsive web layouts.

Requirements

  • Basic understanding of HTML and CSS.
  • A web browser is required. We will use Google Chrome and will frequently make use of the Chrome Dev Tools.
  • A coding editor is required. We will use VS Code with the Live Server plugin.

Description

CSS Grid is one of the most powerful layout systems in modern web development and in this course, you’ll get a complete introduction to how it works.

You’ll learn how to use the full range of CSS Grid properties to build structured, responsive layouts using rows, columns and named areas. Each property is explained with clear demonstrations, helping you understand exactly how and when to use it in your own projects

You’ll explore:

Grid container properties:

  • grid-template-columns and grid-template-rows – set explicit track sizes

  • grid-auto-rows and grid-auto-columns – control implicit tracks

  • grid-auto-flow – manage how items are placed

  • Gaps – including row-gap, column-gap and gap shorthand

  • Grid template areas – define layout zones visually

  • Shorthand properties like grid-template, grid, and place-content

  • Alignment tools like justify-items, align-items, and place-items

  • Content positioning with justify-content, align-content, and place-content


Grid item properties:

  • Placement using grid-column, grid-row, grid-area and order

  • Individual alignment with justify-self, align-self and place-self

  • Item sizing and positioning within the grid

Along the way, you’ll also gain a deeper understanding of how Grid distributes space, giving you clarity on how layout sizing behaves in different situations.

To wrap up, you’ll build a final real-world responsive layout using CSS Grid applying everything you’ve learned in a practical project.

Whether you’re new to Grid or refreshing your skills, this course gives you a solid, accessible foundation in modern layout design.

Who this course is for:

  • Complete Beginners To CSS Grid
  • Developers who wish to expand their CSS knowledge by learning CSS Grid
  • Anyone wanting to design HTML webpages using the CSS Grid layout model

Report abuse