Mastering CSS Grid

Learn CSS Grid from zero to mastery

4.35 (80 reviews)
Web Development
2 hours
Mar 2022
last update
regular price

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.

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
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


Mastering CSS Grid - Screenshot_01Mastering CSS Grid - Screenshot_02Mastering CSS Grid - Screenshot_03Mastering CSS Grid - Screenshot_04


September 9, 2022
Es wurden alle wichtigen Punkte erklärt. 1 Stern Abzug, weil die Sprache zum Teil so sehr zusammengeschnitten war, dass manche Sätze nicht einfach zu verstehen waren.
January 20, 2022
The course is great organized and very clear, the lessons are structured well into small parts. Instructor teaches very well! I like this course very much!
January 17, 2022
Great project, enough examples of grid and easy to follow. I think section-1 grid example code is missing, (article with date), but you can peek at the code at the beggining of section-2 video clip.
September 2, 2021
An excellent breakdown of the grid and its usage. I have watched a number of videos on YouTube that demonstrate how to build a website using the grid but this was the clearest in its explanation of it.
July 19, 2021
Clearly explained basics with visualization, it helped understanding the need of Grid and how it is different from Flexbox. Improvement: 1. Some people might not be aware of Flex, so comparison could be moved to last/mid. 2. If examples could be created from scratch, it would give more focus on topics in hand and won't have to assume certain css style.



Mastering CSS Grid - Price chart


Mastering CSS Grid - Ratings chart

Enrollment distribution

Mastering CSS Grid - Distribution chart

Related Topics

udemy ID
course created date
course indexed date
course submited by