The goal is to quickly learn enough about the CSS grid so that we can start using it in our projects.
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.
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).
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.
We’ll create a simple page structure with header, content, sidebar and footer.
Let’s enable the Grid layout on the Body element and position page sections with numbered grid columns and rows.
We’ll give different grid areas names and then position elements using these area names.
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.
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.
We’ll improve the image gallery by making the number and size of the columns adjust to the available space.
We’ll define our gallery grid without specifying a fixed number of rows.
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. Make sure to watch the video update as well.
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 :)
