Learn CSS Grid from zero to mastery

What you will learn

Learning CSS Grid from zero to mastery

Learning CSS Grid Terminology

Learning all CSS Grid properties, units and functions

Difference between CSS Grid & CSS Flexbox

How to apply CSS Grid easily for your basic and complex designs

Apply all CSS Grid properties and concepts on practical project


CSS grid is a new way for creating a 2 dimensional layout that gives you the ability to create any advanced web pages layout with an easy way and literally short lines of code.

This course targets all front-end developers or if you are a designer who is coding some HTML & CSS for creating pages/ components layout.

In this course we start from beginning to know :

  • The CSS grid terminology (which are the basis that will help you learn CSS grid easily).

Then Will cover all the css grid properties that gives us the ability of creating advanced and creative layouts. Such as:

  • Grid display properties

  • Grid-template- columns&rows

  • Grid units

  • Grid-gap

  • Grid-auto-flow

  • The explicit & implicit lines

  • naming the grid lines

  • the Repeat and Minmax functions

  • Ways of positioning the grid items

  • Grid items overlapping

  • The grid alignments

And each property you will learn by practice. As there is an exercise file for each explained property in this course, so you can apply it by yourself after each video.

Not only that!

We will apply all these css grid concepts and properties in a real project, which is designed specifically for this course. so you can apply all what you will learn by this course on real practical project.

The course is 100% free for limited time. So what you are waiting for? enroll now and see you there 🙂





Welcome to the CSS Grid course

Course materials

Intro to CSS Grid

Is CSS Grid alternative for flexbox?

CSS Grid terminology

Get Instant Notification of New Courses on our Telegram channel.

Grid display property

CSS Grid container properties

Setting columns and rows

CSS Grid gap

Implicit and Explicit tracks

How to use minmax function

auto-fill vs auto-fit

grid-auto-flow property

CSS Grid items properties

Positoning items with line numbers

positoning items with span

Filling empty cells automatically

Grid template area (part 1)

Grid template area (part 2)

Implicit grid lines

Explicit grid lines (part 1)

Explicit grid lines (part 2)

CSS Grid alignments

Alignment properties

Alignment properties – practical

place property


Project overview and how to start

section 1 (header)

section 2

section 3

section 4

section 5