Basics of using CSS display: grid for column layout

Focus on

  • display: grid
  • grid-template-columns
  • column-gap (formerly grid-column-gap)
  • row-gap (formerly grid-row-gap)
  • non-semantic grouping tag (div)
  • styling images for responsive widths (responsive within a fixed layout)

CSS grid display might look like CSS columns, but it isn't. Content doesn't "flow" automatically from left to right. The columns in grids are created instead according to the document tree and the number of columns you set up. It's quite a bit more complicated than columns, and you really need to understand the structure of your markup, containment hierarchy/document tree and how/when to use the div tag.

Workflow

UWM page

This is pretty similar to our in-class demo. We have two unequal columns that flip the image in the narrow column from the right to the left and back again. You'll need two styles to create the narrow right and narrow left columns, and you'll use the narrow right one twice because there are three flip-flop columns.

You'll notice from the screenshot that some of the content is NOT in the two-column layout. Some of the full-width content is above the columns and some of it is below. When you're designing your pages, it is up to you to decide what content will be in columns and what content will not. What is important is understanding that the display: grid; declaration is going to be looking to put child tags into the grid you specify.

Other than styling the images (see below), you don't need to do anything else except add some padding to your grid styles on top and bottom so that things space out nicely.

Pizza Page

This page is somewhat similar to the pizza page we did in a demo.

You'll notice a combination of 2 and 3 column layouts. The two column portion uses the sections as the children for the grid container. The three column portions are more complicated. The menu part needs col-groups to create units for the three column layout. The pizza gallery does not, because it's just images laid out in three columns. However, you'll need a row-gap there to space out the rows.

There are background colors in each of the column grid styles so you can see where they are. The page isn't really styled more than the grid. The goal is to help you see the grid. Put whatever background colors you'd like in the two column and three column grids.

Other Styles

For both pages, you have images that need to be styled. The .feature-image class has been added to the images, but you need to write the style. Do you remember how to get images to display the width of their parent container? It's in our demo!