Basics of using CSS display: grid for column layout

Focus on

  • display: grid
  • grid-template-columns
  • grid-column-gap
  • grid-row-gap
  • non-semantic grouping tag (div)

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 News

This page is pretty much the same content as the "feature image" float page that we did in CSS Exercise 3. However, in this page, rather than the text wrapping around the images, the content is divided up into columns and doing the flip/flop left/right with image and text in each column.

You'll notice from the screenshot that some of the content is NOT in the two-column layout. 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. Look at the annotated screenshot to see how this is working.

Pizza Page 1

This page uses content from our HTML semantic structural tag exercises (Wy'East Pizza) and reformats it in different columns. This layout more closely mimics the kinds of designs that are in contemporary sites, particularly those with scrolling pages and no sidebars.

You'll notice a combination of 2 and 3 column layouts. Look at the annotated screenshot to see how this is working.

Pizza Page 2

This page uses content from our HTML semantic structural tag exercises (Wy'East Pizza) and reformats it in different columns. This layout is different from the first pizza page in two ways:

  1. The Check Out These Pies section has more complex markup to include the heading tags and descriptions.
  2. The page has multiple wrappers so that background colors extend to the edges of the viewport.

It can be tricky keeping track of all the divs, so pay close attention to the markup and what classes tell you about the tags they are applied to. Look at the annotated screenshot to see how this is working.

About images

One useful style when you're working with with CSS grid is using the feature-image class to set the width of images to 100%. That way, they are always the width of their container, even if that width changes.

Be sure that you read the grid lecture notes, and view the video tutorials.

There are screenshots of each page to help you with this.