loading...
Cover image for Michael Scott Quoted in the Scranton Times with CSS Grid

Michael Scott Quoted in the Scranton Times with CSS Grid

codypearce profile image Cody Pearce Originally published at codinhood.com ・3 min read

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

This was originally published on codinhood.com

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

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 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, 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

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.

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

Main Grid

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

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

Nested Grid

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.

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

Bottom Grid

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.

Posted on Apr 17 by:

codypearce profile

Cody Pearce

@codypearce

Front end developer working with React, React Native, and CSS.

Discussion

markdown guide
 

Thanks for sharing. This is a great way to practice CSS layouts. I also find that converting video game screens (like a character select) to CSS can be quite a helpful way to learn as well!

 
 
 
 

What a fun way to combine two of your interests!

 

Surely a fun and easy way to learn..

 

Hi there,

I'm the graphic artist who created this poster and after doing some research I found this post because it's been stolen several times already by random people on Redbubble trying to sell it. I don't know how else to contact you to ask that you remove this so it doesn't keep getting stolen and posted online without serving a DMCA Takedown.

 

Hey great graphic, I'd be happy to remove it, but I'm a little confused for a few reasons.

  1. I linked your etsy account in the intro of the article and in the code itself since the beginning. I'd hope that people have clicked the link directly to your store.
  2. I'm not selling or profiting off the graphic in anyway, just recreating it in another medium.

I guess another option is I could change the design to look more distinct and change the text (beside the quotes from the show).

Let me know what you think and I'll make some changes.

 

if you can use a screenshot of the full article or just lower the resolution on the full version that's above in the editable box (sorry i'm not proficient on the coding side of this stuff) i'd be fine with that, just so that people can't just copy and paste it or download it.

Ah ok, I added a blur to the editable box if you refresh. Are the other images ok?

Perfect, thank you! And yes the other images are fine. I appreciate it!

 

Oh, no I know you're not trying to sell it and profit off of it, it's other people. This poster in particular is a favorite target of Redbubble sellers like this one: redbubble.com/i/poster/The-Scranto...

I fight these talentless hacks constantly stealing this and trying to sell it, and a high quality version of it like yours it just what they're looking for. If there is a way to significantly lower the resolution i'm fine with you using it as you have used it, it's just that if it's easy to steal and reproduce, they will steal it and reproduce it, just like the above seller. I've already served a DMCA Takedown for the redubble seller above so click that link to see what they've done while you can