![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/newspaper-layout.png?ssl=1\")
The project came with a few requirements:<\/p>\n
- \n
- Show the outlines of the grid<\/li>\n
- Columns can be wider, or longer than others<\/li>\n
- Divider lines must be shown between the various blocks<\/li>\n<\/ul>\n
CSS Grid: Teaching an old layout new tricks<\/h3>\n
Newspaper layouts can cause headaches because everyday CSS is one-dimensional, meaning that elements flow on either a horizontal or vertical axis. Even modern flexbox layout is still uni-directional.<\/a> <\/p>\n
For a layout like this, we would almost want the properties that good ol\u2019 HTML tables once provided: things like row and column spans to stretch cells in all directions. We would also want the benefits of modern day CSS, with all the responsiveness and flexible boxes that can grow to fill available space.<\/p>\n
CSS grid combines the best of tables with the best of flexible boxes. In fact, grid\u2019s even better because it provides the
grid-gap<\/code> property for creating gutters between cells while taking available space into account. Powerful as this may be, how can we create divider-lines exactly in the middle of those gutters?<\/p>\nLet\u2019s look at three techniques to make that happen.<\/p>\n
What we\u2019ll create<\/h3>\n
First, we will build a simplified version of the newspaper design that\u2019ll help illustrate the crux of the three different techniques that we\u2019re going to cover. A deceptively easy design, one would say.<\/p>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/newspaper-css-grid.png?ssl=1\")
Column and row spans in a CSS grid layout<\/figcaption><\/figure>\n Technique 1: The faux column<\/h3>\n
This solution creates \u201cfaux” columns that allow us to draw vertical lines, and then place a grid on top. Horizontal dividers are painted if needed. The \u201cfaux” columns are created by using pseudo selectors in the grid container.<\/p>\n
<div class=\"frontpage\">\r\n <div class=\"fp-cell fp-cell--1\">\r\n <div class=\"fp-item\">1<\/div>\r\n <\/div>\r\n <div class=\"fp-cell fp-cell--2\">\r\n <div class=\"fp-item\">2<\/div>\r\n <\/div>\r\n <div class=\"fp-cell fp-cell--3 fp-cell--border-top\">\r\n <div class=\"fp-item\">3<\/div>\r\n <\/div>\r\n <div class=\"fp-cell fp-cell--4 fp-cell--border-top\">\r\n <div class=\"fp-item\">4<\/div>\r\n <\/div>\r\n<\/div><\/code><\/pre>\n\n See the Pen
\n Newspaper-design, ‘faux-column’ technique<\/a> by Marco Troost (@marco-troost<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nSetting up the lines between the columns<\/h4>\n
Let\u2019s create a three-column container using
display: grid<\/code> and pseudo-selectors (:before<\/code> and:after<\/code>) to create two columns that fill 100% of the container\u2019s height.<\/p>\n.frontpage {\r\n position: relative;\r\n display: grid;\r\n \/* Three columns *\/\r\n grid-template-columns: 1fr 1fr 1fr;\r\n grid-column-gap: 32px;\r\n border: 1px solid transparent;\r\n border-top: 1px solid #DADCE0;\r\n border-bottom: 1px solid #DADCE0;\r\n overflow: hidden;\r\n}\r\n\r\n\/* Two faux columns *\/\r\n.frontpage:before,\r\n.frontpage:after {\r\n position: absolute;\r\n top: 0;\r\n height: 100%;\r\n content: '';\r\n width: calc(33.3% - 4px);\r\n}\r\n\r\n.frontpage:before {\r\n left: 0;\r\n border-right: 1px solid #DADCE0;\r\n}\r\n\r\n.frontpage:after {\r\n right: 0;\r\n border-left: 1px solid #DADCE0;\r\n}<\/code><\/pre>\nNote:<\/strong> 33% of the container doesn\u2019t take the gutter width into account, so you\u2019ll have to compensate accordingly.<\/p>\n
This is calculated as: <\/p>\n
33% minus (gutter-width divided by (amount of gutters times amount of gutters)) divided by amount of gutters)<\/code><\/pre>\nOr, with actual numbers:<\/p>\n
33% - (32 \/ (2* 2)) \/ 2 = 4<\/code><\/pre>\nWe could use one pseudo-selector instead:<\/p>\n
.frontpage {\r\n position: relative;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr 1fr;\r\n grid-column-gap: 32px;\r\n border: 1px solid transparent;\r\n border-top: 1px solid #DADCE0;\r\n border-bottom: 1px solid #DADCE0;\r\n overflow: hidden;\r\n}\r\n\r\n.frontpage:before {\r\n box-sizing: border-box;\r\n position: absolute;\r\n top: 0;\r\n height: 100%;\r\n content: '';\r\n left: calc(33.3% - 5.3px);\r\n width: calc(33.3% + 10.7px);\r\n border-left: 1px solid #DADCE0;\r\n border-right: 1px solid #DADCE0;\r\n}<\/code><\/pre>\n\n See the Pen
\n Newsgrid-layout ‘faux-columns’ (using only :before)<\/a> by Marco Troost (@marco-troost<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nNote:<\/strong> A different calculation is needed when using only one pseudo-selector: One for positioning, and one for width.<\/p>\n
The width is calculated as:<\/p>\n
33% plus (amount of gutters times gutter-width) \/ (amount of gutters times amount of columns)<\/code><\/pre>\nAgain, with actual numbers:<\/p>\n
33% + (2 * 32) \/ (2 * 3) = 10.7<\/code><\/pre>\nThe position is calculated as:<\/p>\n
33% minus (amount of gutters times gutter-width) \/ (amount of gutters times amount of columns) divided by 2)<\/code><\/pre>\nMaking the grid<\/h4>\n
The design consists of four blocks of content. We\u2019re going to place them in the container and give them a modifier class for future reference while making sure their
z-index<\/code> is higher than the pseudo-selectors of the grid.<\/p>\n<div class=\"frontpage\">\r\n <div class=\"fp-cell fp-cell--1\"><\/div>\r\n <div class=\"fp-cell fp-cell--2\"><\/div>\r\n <div class=\"fp-cell fp-cell--3\"><\/div>\r\n <div class=\"fp-cell fp-cell--4\"><\/div>\r\n<\/div><\/code><\/pre>\nNow let\u2019s set the background color for the cells (
.fp-cell<\/code>) to white. This way, the vertical lines won\u2019t show through. We can also set the vertical padding for the cell to 16px in order to match half of the gutter.<\/p>\nThe first and second content blocks should get their own unique spans as shown in the design. The first block spans all the way down and the second block spans the second and third columns.<\/p>\n
.fp-cell {\r\n position: relative;\r\n z-index: 2;\r\n padding: 16px 0;\r\n background-color: #fff;\r\n}\r\n\r\n\/* Span all the way down! *\/\r\n.fp-cell--1 {\r\n grid-row: 1 \/ span 2;\r\n}\r\n\r\n\/* Span the second and third columns *\/\r\n.fp-cell--2 {\r\n grid-column: 2 \/ span 2;\r\n}<\/code><\/pre>\nVertical line dividers<\/h4>\n
If you look at the design, only the last two cells need a horizontal border. We can give \u2019em a sweet modifier class.<\/p>\n
<div class=\"frontpage\">\r\n <div class=\"fp-cell fp-cell--1\"><\/div>\r\n <div class=\"fp-cell fp-cell--2\"><\/div>\r\n <div class=\"fp-cell fp-cell--3 fp-cell--border-top\"><\/div>\r\n <div class=\"fp-cell fp-cell--4 fp-cell--border-top\"><\/div>\r\n<\/div><\/code><\/pre>\n.fp-cell--border-top:before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -16px;\r\n right: -16px;\r\n border-top: 1px solid #DADCE0;\r\n}<\/code><\/pre>\nThe negative margins are half of the gutter width.<\/p>\n
Technique #2: Using background-color<\/h3>\n
Another way to create the dividers is to utilize the
grid-gap<\/code> property. This solution doesn\u2019t necessarily create a \u201creal” distance between cells, but rather leaves some blank space where thebackground-color<\/code> of the grid can shine through. The gutter width is delegated to padding within the grid cells.<\/p>\n<div class=\"container\">\r\n <div class=\"frontpage\">\r\n <div class=\"fp-cell fp-cell--1\">\r\n <div class=\"fp-item\">1<\/div>\r\n <\/div>\r\n <div class=\"fp-cell fp-cell--2\">\r\n <div class=\"fp-item\">2<\/div>\r\n <\/div>\r\n <div class=\"fp-cell fp-cell--3\">\r\n <div class=\"fp-item\">3<\/div>\r\n <\/div>\r\n <div class=\"fp-cell fp-cell--4\">\r\n <div class=\"fp-item\">4<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div><\/code><\/pre>\n.container {\r\n overflow-x: hidden;\r\n border-top: 1px solid #DADCE0;\r\n border-bottom: 1px solid #DADCE0;\r\n}\r\n\r\n.frontpage {\r\n position: relative;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr 1fr;\r\n grid-gap: 1px;\r\n margin: 0 -16px;\r\n background-color: #DADCE0;\r\n}\r\n\r\n.fp-cell {\r\n background-color: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.fp-cell--1 {\r\n grid-row: 1 \/ span 2;\r\n}\r\n\r\n.fp-cell--2 {\r\n grid-column: 2 \/ span 2;\r\n}\r\n\r\n.fp-cell--3 {\r\n grid-column: 2;\r\n}\r\n\r\n.fp-item {\r\n background-color: #efefef;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 200px;\r\n height: 100%;\r\n}<\/code><\/pre>\n\n See the Pen
\n Newspaper-design, background-color technique<\/a> by Marco Troost (@marco-troost<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nSince all cells have an extra 16px of horizontal padding, the grid needs to be offset by just as much. A wrapper container will take care of the overflow.<\/p>\n
<div class=\"container\">\r\n <div class=\"frontpage\">\r\n <!-- ... -->\r\n <\/div>\r\n<\/div><\/code><\/pre>\n.container {\r\n border-top: 1px solid #DADCE0;\r\n border-bottom: 1px solid #DADCE0;\r\n overflow-x: hidden;\r\n}\r\n\r\n.frontpage {\r\n position: relative;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr 1fr;\r\n grid-gap: 1px;\r\n background-color: #DADCE0;\r\n margin: 0 -16px;\r\n}<\/code><\/pre>\nTechnique #3: Creating a cell border<\/h3>\n
This solution appends a right and bottom border to each cell. Like the last example, the
grid-gap<\/code> is mimicked by adding padding to the cell content. That means it also needs to be wrapped in an extra container.<\/p>\n<div class=\"container\">\r\n <div class=\"frontpage\">\r\n <div class=\"fp-cell fp-cell--1\">\r\n <div class=\"fp-item\">1<\/div>\r\n <\/div>\r\n <div class=\"fp-cell fp-cell--2\">\r\n <div class=\"fp-item\">2<\/div>\r\n <\/div>\r\n <div class=\"fp-cell fp-cell--3\">\r\n <div class=\"fp-item\">3<\/div>\r\n <\/div>\r\n <div class=\"fp-cell fp-cell--4\">\r\n <div class=\"fp-item\">4<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div><\/code><\/pre>\n.container {\r\n border-top: 1px solid #DADCE0;\r\n overflow-x: hidden;\r\n}\r\n\r\n.frontpage {\r\n margin: 0 -17px 0 -16px;\r\n position: relative;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr 1fr;\r\n}\r\n\r\n.fp-cell {\r\n padding: 16px;\r\n background-color: #fff;\r\n border-right: 1px solid #DADCE0;\r\n border-bottom: 1px solid #DADCE0;\r\n}\r\n\r\n.fp-cell--1 {\r\n grid-row: 1 \/ span 2;\r\n}\r\n\r\n.fp-cell--2 {\r\n grid-column: 2 \/ span 2;\r\n}\r\n\r\n.fp-cell--3 {\r\n grid-column: 2;\r\n}\r\n\r\n.fp-item {\r\n background-color: #efefef;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 200px;\r\n height: 100%;\r\n}<\/code><\/pre>\n\n See the Pen
\n Newspaper-design, ‘cell-border’-technique<\/a> by Marco Troost (@marco-troost<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nAs mentioned, each cell is given a border on the right and on the bottom. The main trick here is the use of the (asymmetrical) negative margin on the grid. This is needed to compensate for the cell\u2019s right border.<\/p>\n
.frontpage {\r\n margin: 0 -17px 0 -16px;\r\n position: relative;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr 1fr;\r\n}<\/code><\/pre>\nConclusion<\/h3>\n