Learn CSS Grid with Pinegrow
- Be familiar with basic HTML and CSS concepts.
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.
We’ll be using Pinegrow Web Editor to build and play with our examples. So instead of typing the HTML and CSS code by hand, we’ll use visual tools to build the code. If you don’t have Pinegrow yet, you can use a free trial version of Pinegrow. It has all the features you need.
All videos in the course are downloadable do that you can watch them in original high resolution.
- Web developers and designers who want to quickly get up to speed with CSS Grid.
- What will we learn in this course?
- Lines define the grid
- Building the page
- Positioning with rows and columns
- Positioning with named areas
- Dynamic column sizing with minmax
- The mystery of the Fraction unit
- Dynamic columns with repeat and auto-fit
- Dynamic rows with grid-auto-rows
- Positioning with named lines and improving the design
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 :)