Hands on CSS Grid with Nietzsche

February 10, 2018
2 minutes read

I have this Nietzsche book (Ecce Homo) in a display at my house. I always liked the cover pattern in this version. Consequently, I had to recreate it with CSS Grid.

Nietzsche

I'll that assume the color pallete is the following:

Markup

<div class='grid grid-with-columns'>
  <div class='area logo'>
    <div>ΦΡΙΝΤΡΙΧ</div>
    <div>ΝΙΤΣΕ</div>
  </div>
  <div class='area collection-info'>ΑΠΑΝΤΑ ΝΙΤΣΕ / 13</div>
  <div class='area upper-green-filler'></div>
  <div class='area left-green-filler'></div>
  <div class='area title'>
    <div>ECCE HOMO</div>
    <div>(ΙΔΕ Ο ΑΝΘΡΩΠΟΣ)</div>
  </div>
  <div class='area translation-info'>Μετάφραση </br> Ζήσης Σαρίκας</div>
  <div class='area publisher'>ΠΑΝΟΠΤΙΚόΝ</div>
  <div class='area portrait'>
    <img src='https://i.imgur.com/JpTRUj4.jpg' alt='author portrait'>
  </div>
</div>

Basic Layout

.grid {
  font-family: 'Times New Roman', Times, serif;

  display: grid;

  max-width: 600px;
  height: 800px;
  margin: 1rem auto;

  background: #f6f4ee;
  box-shadow: 0 0 10px 1px #ccc;
}
.grid-with-columns {
  grid-template-columns: 1fr 2fr;
  grid-template-rows: repeat(8, 1fr);
}
.grid-with-columns .area {
  display: grid;

  padding: 2rem;
}

Everything falls into place

.grid-with-columns .logo {
  line-height: 1;

  color: #efefef;
  background: #1c1e22;

  grid-row: span 2;
  align-content: end;
  justify-content: center;
}
.grid-with-columns .logo > div:last-of-type {
  font-size: 5rem;
}
.grid-with-columns .collection-info {
  font-size: 1.5rem;

  color: #586e55;

  align-content: end;
  justify-content: end;
}
.grid-with-columns .upper-green-filler {
  background: #586e55;
}
.grid-with-columns .left-green-filler {
  background: #586e55;

  grid-column: span 1;
}
.grid-with-columns .title {
  font-size: 3.5rem;

  color: #efefef;
  border-left: 1px solid #1c1e22;
  border-top: 1px solid #1c1e22;
  background: #586e55;

  align-content: center;
  justify-content: center;
}
.grid-with-columns .translation-info {
  display: grid;

  text-align: right;

  color: #586e55;

  grid-row-start: 5;
  justify-content: center;
  align-items: center;
}
.grid-with-columns .publisher {
  font-size: 0.875em;
  font-weight: 600;
  font-style: italic;

  display: grid;

  grid-row-start: 8;
  justify-content: center;
  align-items: center;
}
.grid-with-columns .bottom-filler {
  grid-row: span 5;
}
.grid-with-columns .portrait {
  border-left: 1px solid #1c1e22;
  padding: 0;

  grid-row: span 5;
}

Result

ΑΠΑΝΤΑ ΝΙΤΣΕ / 13
ECCE HOMO
(ΙΔΕ Ο ΑΝΘΡΩΠΟΣ)
Μετάφραση
Ζήσης Σαρίκας
ΠΑΝΟΠΤΙΚόΝ
author portrait

Fin

Check out this tutorial. A nice, free , introduction to CSS Grid by Wes Bos.

Thanks for reading!  ❤️
Due to privacy concerns, I've decided to remove Disqus.
Until I settle for another commenting solution, you can share your thoughts with me via e-mail
Back to Posts