Recently I had to craft a newspaper-like design that featured multiple row,- and column spans with divider-lines in between. If you’ve been around for a while, then perhaps you know that this could be a potential nightmare to code with regular CSS.

EDIT: This article has been published on CSS-Tricks.com! You can read the redacted version @ https://css-tricks.com/techniques-for-a-newspaper-layout-with-css-grid-and-border-lines-between-elements/

Image for post
Image for post
Newspaper design with divider-lines

Business requirements:

  • Show the outlines of the grid;
  • Columns can be wider, or longer than others;
  • Divider lines must be shown between the various blocks;

CSS-grid; old meets new

The reason newpaper-layouts could cause headaches is that everyday CSS is one-dimensional, meaning that content-cells are distributed on either a horizontal,- or on a vertical plane. …

About

Marco Troost

I’m an experienced UX Designer / Front-end developer in the South West of Holland with over 20 years experience building websites.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store