Editorial Design and CSS Grid: Inspiration and examples

We, web designers, are in luck. We had never lived a time like today, where we can choose between three different CSS syntax groups to design the layout of a web project. I am referring to floats, Flexbox and CSS Grid (or Grid Layout). With the three we can achieve almost the same final result, so the choice will depend on our skills with one or the other and the suitability of the generated code (for optimization issues, future scalability, browser compatibility, etc …)

However, I believe that CSS Grid incorporates a different working logic than the rest (Floats and Flexbox.) While with the previous ones we worked stacking blocks like those construction games that we used when we were children (either in rows or columns,) with CSS Grid the method changes, because the blocks no longer have weight and do not stack. It is more similar to the cork that we had hanging on the wall of our teenage room (to continue with the same reference) and where we placed with thumbtacks notes, drawings and other achievements.

All this makes it appear in CSS Grid the possibility of defining empty spaces with the same intensity that we define full spaces, and not automatically or by default as in the case of floats or in Flexbox. This fortunately brings us closer to other forms of composition, especially to editorial design, where full and empty spaces coexist with the same level of importance. We talked about this a while ago in our web design trends, with some examples.

Web layout of an editorial design with CSS Grid

To illustrate (and celebrate) this approach between editorial design and web design, we have set out to design with CSS Grid some pages of number 3 of the 99U Quarterly Magazine, a very interesting publication for the creative community.

home-editorial-design-magazine

The first example is the front page of the magazine (not to be confused with the cover; you can see the differences here.)

We keep the design to two sheets, but in responsive we no longer need the sheet on the left as it disappears, and the sizes of the title decrease:

As an interesting point, between the resolutions of 800px and 1200px we have a flexible font size for the title, referenced to the dimensions of the viewport with the vw (viewport width) unit and modified with calc():

@media (min-width: 800px) and (max-width: 1200px) {
  .right-page .title {
      font-size: calc(0.15 * (50vw - 120px));
  }
}

The minmax() function also offers many possibilities, which allows us to define a minimum and maximum value in a CSS Grid declaration. In our case we have used it to define the dimension of the row in the template of our grid, taking as a minimum value 100vh (the height of the viewport) and at most 1fr, to scroll vertically when more space is needed (screens with very little high):

.container {
  background-color: #00D0C0;
  display: grid;
  grid-template: minmax(100vh, 1fr) / 50% 50%;
}

I encourage you to measure the example to see the different behaviors.

In the second example we have worked a page with a brief biography of an artist:

editorial-design-css-grid

Perhaps the most complex has been the title of the left page, by the direction of the text and also by how to adapt its line spacing to the different resolutions:

For the theme of the title and text rotated vertically, we have used the writing-mode property that has a correct compatibility between browsers; however the value that would serve us for this property, sideways-lr, has a very low compatibility , and its use It’s just experimental. Therefore, we chose to rotate the text using a transform: rotate(180deg). Along with this, margins, font sizes and line spacing are defined with units relative to the viewport to explore how far we can get with CSS:

.left-page .title {
  grid-area: 1 / 1 / 4 / 3;
  text-align: left;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #565052;
  text-transform: uppercase;
  align-self: end;
  font-size: calc(0.19 * (100vh - 140px));
  margin: 0;
  letter-spacing: calc(0.06 * (100vh - 140px));
  line-height: 17vw;
  margin-top: calc(-0.07 * (100vh - 140px));
  margin-left: -3vw;
}

The third section that we have outlined has been the summary page:

sumary-editorial-design-css-grid

At first glance it is easy to identify the guidelines that served the designer to distribute the elements in the layout. It will be those same lines that we will use to define our grid.

It is interesting how we can sort each of the summaries by simply making a selection using the pseudo-class: :nth-of-type(n) and positioning them in the grid through the grid-area property. In responsive, we go to two columns, therefore the pseudo-class changes :nth-of-type(odd) and :nth-of-type(even).

.hentry:nth-of-type(1) {
  grid-area: 3 / 2 / 4 / 3;
}
.hentry:nth-of-type(2) {
  grid-area: 3 / 3 / 4 / 4;
}
.hentry:nth-of-type(3) {
  grid-area: 1 / 5 / 2 / 6;
}
.hentry:nth-of-type(4) {
  grid-area: 1 / 6 / 2 / 7;
}
.hentry:nth-of-type(5) {
  grid-area: 2 / 4 / 3 / 5;
}
.hentry:nth-of-type(6) {
  grid-area: 2 / 5 / 3 / 6;
}
.hentry:nth-of-type(7) {
  grid-area: 3 / 5 / 4 / 6;
}
.hentry:nth-of-type(8) {
  grid-area: 3 / 6 / 4 / 7;
}
@media (max-width: 450px) {
  .hentry:nth-of-type(odd),
  .hentry:nth-of-type(even) {
    grid-area: auto / 1 / auto / 5;
  }
}

Defined the initial grid with six columns, it is very easy to locate in entries.

CSS-Grid-with-six-columns
CSS Grid with six columns

Some comments on CSS Grid, editorial design and layouts

As you can see, passing an editorial design to web design is not easy although with CSS Grid we can achieve a quite acceptable result. There are two main problems that separate web design from editorial design and to this day they are insurmountable.

In the first place, while in editorial design we know the output format (physical dimensions of the magazine or brochure,) in web layout we do not know in advance the user’s screen resolution, so the use of relative units becomes indispensable not only for minor resolutions as we were doing in responsive web design, but for devices whose dimensions exceed what is equivalent to the physical size of the magazine.

Secondly, the proportion of the screen in web design is not the same as in editorial design, so in many cases a vertical scroll is necessary. Also, although we have the same ratio of height to width, we need the font to be legible at all times, because it is not valid to reduce the size of the entire design, including fonts below the admissible levels of readability. Perhaps the titles allow us certain flexibility, but the paragraphs texts must always be kept at the same size.

Despite the necessary work, it is great news that CSS Grid brings editorial design to web design; it will surely serve all designers as a source of inspiration for future projects. 😉

Comments (11)

  1. Ricardo – nice article. I’m a CSS grid newbie, so I have a question.
    Where is the grid defined? For example, in the codepen for the first page of the magazine, in the .right-page css class, you have grid-column: 1 /2. Is this an implicit grid? I noticed in several of the pens that grid-area columns and rows were used, but I didn’t see anywhere that explicitly defined those columns and grids.
    I hope the question is clear.

    Thanks.

    1. Hi Rob, thanks for writing!

      Yes, the first grid is located in the parent defined by .container class (grid-template: minmax(100vh, 1fr) / 50% 50%;). Then we set the number of columns of the element with .right-page CSS class.

      However, this .right-page also defines a child grid to order the elements inside of it (titles and texts).

      Hope this helps!

Leave a Reply

Your email address will not be published. Required fields are marked *