Learn Css Grid


The goal is to quickly learn enough about the CSS grid so that we can start using it in our projects.

  • Without CSS, every web page would be drab plain text and images that flowed straight down the page. With CSS, you can add color and background images and change the layout of your page — your web pages can feel like works of art! Take-Away Skills: You will learn.
  • Learn CSS Grid - A Guide to Learning CSS Grid Jonathan Suh L e a rn C S S G r i d CSS Grid is a powerful tool that allows for two-dimensional layouts to be created on the web. This guide was created as a resource to help you better understand and learn Grid, and was organized in a way I thought made the most sense when learning it.

The CSS Grid Layout Module was developed by the CSS Working Group to provide a better way to create website layouts in CSS. It became a Candidate Recommendation in February 2017, and major browsers started to support grid layout in March 2017. CSS Grid Layout will soon be an essential part of any frontend developer's toolbox.

What will we learn in this course?

In this course we’ll learn how CSS Grid is defined by lines, various ways of placing elements in the grid layout, about smart column sizing, controlling automatic rows and how to use CSS Grid as a creative tool.

What you’ll need?

A basic understanding of HTML and CSS. A copy of Pinegrow Web Editor if you want to play along (a free trial version will do).


Lines define the grid


CSS Grid lets us position HTML elements into a 2-dimensional layout. We’ll create a simple grid and explore lines that define the grid, as well as play with distances between the lines.

Building the page

We’ll create a simple page structure with header, content, sidebar and footer.

Learn Css Grid Design

Positioning with rows and columns

Let’s enable the Grid layout on the Body element and position page sections with numbered grid columns and rows.

Positioning with named areas

We’ll give different grid areas names and then position elements using these area names.

Dynamic column sizing with minmax

Learn Css Grid

We’ll create additional spacing with new columns and rows. Then we’ll make the size of the main content column dynamic within the minimum and maximum range.

The mystery of the Fraction unit

We’ll add a image gallery to the page, using a nested CSS grid. In the process we’ll discover (and handle) the unexpected behaviour of images and Fraction units.

Dynamic columns with repeat and auto-fit

We’ll improve the image gallery by making the number and size of the columns adjust to the available space.

Dynamic rows with grid-auto-rows

We’ll define our gallery grid without specifying a fixed number of rows.

Positioning with named lines and improving the design

We’ll add a poster image to page header and position it with named lines. Then, we’ll do some CSS styling to make the page more attractive.

About the course instructor

Learn Css Grid

Css Inline Grid

Hi, I’m Matjaz, the founder and lead developer of Pinegrow.

The web has been a part of my professional life for the past 20+ years, including developing internet banking solutions, creating websites for clients and lately, building tools for web developers & designers.

I’m not a fan of complicated modern web development toolchain. Instead I prefer a practical approach that focuses on creating usable results quickly. The web should be simple.

Some people complain about my Slovenian accent in videos. Sorry about that! But I promise, give it a couple of minutes, and you will be able to understand me :)