Learn CSS Grid with Pinegrow | Pinegrow Web Editor
Home/ Learn about Web Development with Pinegrow/ Learn CSS Grid with Pinegrow
Learn about the Web with Pinegrow Web Editor

Learn CSS Grid with Pinegrow

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

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 if you want to play along (a free trial version will do).

Lessons

Lesson 1

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.

Lesson 2

Building the page

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

Lesson 3

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.

Lesson 4

Positioning with named areas

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

Lesson 5

Dynamic column sizing with minmax

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.

Lesson 6

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.

Lesson 7

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.

Lesson 8

Dynamic rows with grid-auto-rows

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

Lesson 9

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.

Lesson 10

Making the grid responsive with media queries

We’ll use media queries to create alternative grid layouts for small devices.

Lesson 11

Creating fallback layout for older browsers

We’ll explore different approaches to making the page usable in browsers that don’t support CSS Grid.

About the course instructor

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