Techniques for a Newspaper Layout with CSS Grid and Border Lines Between Elements

Recently, I tackled a newspaper-style design requiring multi-row and column spans with inter-element dividers. The mockup (above) highlights the complexity this presents. Traditional layout methods would have made this a significant challenge.

The project's key requirements were:

• Clear grid outlines.
• Variable column widths and heights.
• Dividers between blocks.

CSS Grid: A Modern Solution for Classic Layouts

Newspaper layouts are notoriously difficult due to the one-dimensional nature of standard CSS; elements flow horizontally or vertically. Even flexbox, while powerful, remains unidirectional.

This layout demanded the row and column spanning capabilities of HTML tables, combined with the responsiveness and flexibility of modern CSS. CSS Grid elegantly bridges this gap, offering the best of both worlds. Its grid-gap property is particularly useful for creating gutters, but precisely centering dividers within these gutters requires careful consideration.

Let's explore three techniques to achieve this.

Our Goal

We'll build a simplified newspaper design to illustrate three divider techniques. The simplicity belies the underlying challenges.

Technique 1: The "Faux" Column Approach

This method creates "faux" columns using pseudo-selectors within the grid container to draw vertical lines. Horizontal dividers are added as needed.

<div>
  <div><div>1</div></div>
  <div><div>2</div></div>
  <div><div>3</div></div>
  <div><div>4</div></div>
</div>

Creating the Column Dividers

A three-column grid is established using display: grid. Pseudo-selectors (::before and ::after) generate two full-height columns.

.frontpage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 32px;
  border: 1px solid transparent;
  border-top: 1px solid #DADCE0;
  border-bottom: 1px solid #DADCE0;
  overflow: hidden;
}

.frontpage::before,
.frontpage::after {
  position: absolute;
  top: 0;
  height: 100%;
  content: '';
  width: calc(33.3% - 4px); /* Calculation to account for gutter */
}

.frontpage::before {
  left: 0;
  border-right: 1px solid #DADCE0;
}

.frontpage::after {
  right: 0;
  border-left: 1px solid #DADCE0;
}

Note: The 33.3% calculation accounts for the gutter width. The formula is: 33% - (gutter-width / (number of gutters * number of columns)).

A single pseudo-element could also be used with adjusted width and positioning calculations.

Building the Grid

Four content blocks are added, each with a modifier class and a z-index higher than the pseudo-elements.

<div>
  <div class="fp-cell fp-cell--1"></div>
  <div class="fp-cell fp-cell--2"></div>
  <div class="fp-cell fp-cell--3 fp-cell--border-top"></div>
  <div class="fp-cell fp-cell--4 fp-cell--border-top"></div>
</div>

CSS styles the cells and handles the row/column spans.

.fp-cell {
  position: relative;
  z-index: 2;
  padding: 16px 0;
  background-color: #fff;
}

/* Spanning styles */
.fp-cell--1 { grid-row: 1 / span 2; }
.fp-cell--2 { grid-column: 2 / span 2; }

/* Horizontal divider */
.fp-cell--border-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: -16px;
  right: -16px;
  border-top: 1px solid #DADCE0;
}

Technique 2: Background Color

This approach leverages grid-gap and background color. The "gap" is visually created by the grid's background color showing through. Padding within the grid cells simulates the gutter width.

<div class="container">
  <div class="frontpage">
    <div class="fp-cell fp-cell--1"><div class="fp-item">1</div></div>
    <div class="fp-cell fp-cell--2"><div class="fp-item">2</div></div>
    <div class="fp-cell fp-cell--3"><div class="fp-item">3</div></div>
    <div class="fp-cell fp-cell--4"><div class="fp-item">4</div></div>
  </div>
</div>

.container { overflow-x: hidden; border-top: 1px solid #DADCE0; border-bottom: 1px solid #DADCE0; }
.frontpage { ... } /* Grid styles as before, but with background-color */
.fp-cell { padding: 16px; background-color: #fff; }

The container handles overflow, and padding offsets the cells.

Technique 3: Cell Borders

This technique adds right and bottom borders to each cell. Padding simulates the grid-gap. A wrapper container is again necessary.

<div class="container">
  <div class="frontpage">
    <div class="fp-cell fp-cell--1"><div class="fp-item">1</div></div>
    ...
  </div>
</div>

.container { border-top: 1px solid #DADCE0; overflow-x: hidden; }
.frontpage { margin: 0 -17px 0 -16px; ... } /* Grid styles, negative margins for border compensation */
.fp-cell { padding: 16px; background-color: #fff; border-right: 1px solid #DADCE0; border-bottom: 1px solid #DADCE0; }

The negative margins compensate for the cell borders.

Conclusion

While all three techniques are viable, the second (background color) offers the simplest and potentially most maintainable solution. However, the other approaches might be preferable depending on specific constraints or DOM access limitations. The best choice depends on the project's context.

The above is the detailed content of Techniques for a Newspaper Layout with CSS Grid and Border Lines Between Elements. For more information, please follow other related articles on the PHP Chinese website!