Michael Scott Quoted in the Scranton Times with CSS Grid
Tags: css, codepen, webdev, showdev
Published: 2020-04-17 18:06:47


Newspapers are a great way to practice creating layouts with CSS Grid because their layouts are separated so distinctly into columns and rows. Below is a recreation of The Scranton Times newspaper from the Office created by Etsy user [datemike1](https://www.etsy.com/listing/739942336/the-office-scranton-times-newspaper). The title and quotes are from season 3 episode 20, "Product Recall", where Michael holds a press conference with a reporter, Chad Light, from The Scranton Times. Earlier in the episode, Michael pitches the crazy long article headline.

{% codepen https://codepen.io/codypearce/pen/VwLEyPg %}

*This was originally published on [codinhood.com](https://codinhood.com/post/the-scranton-times-newspaper-css-grid)*

## Convention banner

The banner is one of the more complicated objects to create due to its unique shapes. Essentially, there are 3 main parts: the center rectangle, left and right rectangles, and the connecting pieces between those two.

![CSS banner](https://codinhood.com/static/0545fdbce304d50cf1a46f57e527d376/60c76/banner2.png)

The connecting pieces, highlighted as 3, are right triangles with a darker shade of red to give the illusion of a shadow.

## Scranton Times title

The newspaper's title is using the [UnifrakturCook](https://fonts.google.com/specimen/UnifrakturCook) font, which does not match the font in the original very well. As far as I could tell, the original is using a paid font that I could not find a free alternative to that looked as good so I went with the best font on Google Fonts.

## Main article title

The title's font is [Impact](<https://en.wikipedia.org/wiki/Impact_(typeface)>), which makes the long title stand out so much more. Getting each line to line up was a challenge because each line has a different `font-size`. I ended up using CSS Grid to keep the required number of words per line, then played around with the `font-size` until each lined up how it should.

![Main Article Title](https://codinhood.com/static/f2983cbae7ca30de49d44fa9920deb4e/a0588/main-title.png)

## Main grid

The layout is broken into 5 columns of equal width with a `column-gap` of `20px`. The image and quote span the middle three columns. There's several ways that this can be accomplished with CSS Grid, but I went with a nested grid where the main grid is three columns. The left and right columns are the same widths, while the middle column spans three columns including the gaps.

```css
.newspaper__grid {
  display: grid;
  grid-template-columns: 208px 1fr 208px;
  grid-gap: 20px;
}
```

![Main Grid](https://codinhood.com/static/7d3da139c141aef8fded10c43a8f998a/32fac/main-grid2.png)

The middle column, within the main grid, is also a grid with three columns. Each of these sub columns has the same width.

```css
.newspaper__threecolumn {
  display: grid;
  grid-template-columns: repeat(3, 208px);
  grid-gap: 20px;
}
```

![Nested Grid](https://codinhood.com/static/6f541b8eac31ab7d32242efda8c3df4e/32fac/nested-grid2.png)

## Bottom Grid

The bottom grid is made up of 8 columns with different widths. The `1px` columns are the divider lines. This certainly isn't the only way to achieve this effect, but it shows how flexible a grid layout can be.

```css
.newspaper__bottom {
  display: grid;
  grid-template-columns: 270px 100px 1px 240px 1px 240px 1px 208px;
  grid-gap: 10px;
}
```

![Bottom Grid](https://codinhood.com/static/e980772a7d5c69512f7259e82bb38fd0/32fac/bottom-grid2.png)

## Conclusion

CSS Grid allows us to create complex layouts with just a few lines of CSS, which, in many cases, is dramatically simpler than previous CSS methods.