Learn CSS Grid with Pinegrow

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