scottgruber.me

How to fit text in multi-column layouts to match CSS Grid columns?

Nothing better than solving a problem yourself to learn how something works.

I joined a Smashing TV webinar today taught by Andy Clarke and moderated by Bruce Lawson and Scott Whitehead. It’s a great way to put into practice the techniques he wrote about in Art Direction for the Web. Each month Andy plans to teach an online workshop, talk about art directed layouts and show how to code them up for the web. Here’s a description of the series.

In the first edition of “Inspired by,” Andy Clarke will “Say hello to skinny columns,” a technique which adds one extra narrow column to an otherwise conventional column grid. He will explain how to design with, then implement skinny columns using meaningful markup and efficient CSS. He will explain how to design using modular grids to fill your designs with energy.

I think it’s ace. Ace of Spades to be exactamundo.

One of the layouts he showed today had text that went across three columns of a grid using multi-columns. I’m a bit slow on uptake and posted a question late in the workshop and there wasn’t time to cover it. So, I was inspired to figure out how it works and wanted to share my solution.

Here are a couple of screenshots of the page I built using the same kind of layout Andy designed.

Sceenshot of webpage
Page view on desktop

It looks like the text is part of the grid, but there isn’t a way to flow text across columns with CSS grid. The trick is to use the same gap size for both the grid and the multi-columns. In this example, I use 2vw for the grid-column-gap and the same measurement for the multi-column column-gap property. This way the text can span the three columns. Pretty nifty, I do say so myself.

Screenshot of webpage
Here you can see the grid lines using Firefox Dev Tools

Here is a CSS code snippet and the page up on GitHub if you want to see the page online and view source.


body {
    display: grid;
    grid-column-gap: 2vw;
    grid-row-gap: 1vh;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}


section:first-of-type {
    column-count: 3;
    column-gap: 2vw;
    column-width: 300px;
    grid-column: 2 / -1;
    grid-row: 3 / 4;
}

section:last-of-type {
    column-count: 3;
    column-gap: 2vw;
    column-width: 300px;
    grid-column: 2 / -1;
    grid-row: 7 / 8;
}

figure {
  display: grid;
  grid-gap: 2vw;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
  width: 100vw;
}

@media (min-width: 37.5em) {
  figure {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 4 / 6;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}