<ul>
  <li class="span3"><h1>Easy</h1></li>
  <li class="span6"><h1>Horizontal</h1></li>
  <li class="span3"><h1>Tiles</h1></li>
  <li class="span5"><h1>CSS Grid</h1></li>
  <li class="span2"><p>“Dead men are heavier than broken hearts.”</p></li>
  <li class="span3 height2"><p>“I needed a drink, I needed a lot of life insurance, I needed a vacation, I needed a home in the country. What I had was a coat, a hat and a gun. I put them on and went out of the room.”</p></li>
  <li class="span4"><p>“There is no bad whiskey. There are only some whiskeys that aren't as good as others.”</p></li>
  <li class="span3"><p>“It seemed like a nice neighborhood to have bad habits in.”</p></li>
  <li class="span3"><p>“It was a blonde. A blonde to make a bishop kick a hole in a stained-glass window.” </p></li>
  <li class="span2"><p>“She gave me a smile I could feel in my hip pocket.” </p></li>
  <li class="span3"><p>“The girl gave him a look which ought to have stuck at least four inches out of his back.” </p></li>
  <li class="span3"><p>“You talk too damn much and too damn much of it is about you.” </p></li>
  <li class="span3"><p>“As honest as you can expect a man to be in a world where its going out of style.” </p></li>
  <li class="span3 height2"><p>The French have a phrase for it. The bastards have a phrase for everything and they are always right. To say goodbye is to die a little.” </p></li>
  <li class="span2 height2"><p>“I'm an occasional drinker, the kind of guy who goes out for a beer and wakes up in Singapore with a full beard.” </p></li>
  <li class="span3"><p>“In writing a novel, when in doubt, have two guys come through the door with guns.” </p></li>
  <li class="span3"><p>“I was neat, clean, shaved and sober and I didn't care who knew it.” </p></li>
  <li class="span3"><p>“There is no trap so deadly as the trap you set for yourself.” </p></li>
  <li class="span3 height2"><p>“From 30 feet away she looked like a lot of class. From 10 feet away she looked like something made up to be seen from 30 feet away.” </p></li>
  <li class="span3"><p>“I was as hollow and empty as the spaces between stars.” </p></li>
  <li class="span3"><p>“It seemed like a nice neighborhood to have bad habits in.”</p></li>
  <li class="span3"><p>“It was a blonde. A blonde to make a bishop kick a hole in a stained-glass window.” </p></li>
  <li class="span2"><p>“She gave me a smile I could feel in my hip pocket.” </p></li>
  <li class="span3"><p>“The girl gave him a look which ought to have stuck at least four inches out of his back.” </p></li>
  <li class="span3"><p>“There is no trap so deadly as the trap you set for yourself.” </p></li>
  <li class="span3 height2"><p>“From 30 feet away she looked like a lot of class. From 10 feet away she looked like something made up to be seen from 30 feet away.” </p></li>
  <li class="span3"><p>“I was as hollow and empty as the spaces between stars.” </p></li>
  <li class="span3"><p>“You talk too damn much and too damn much of it is about you.” </p></li>
  <li class="span3"><p>“As honest as you can expect a man to be in a world where its going out of style.” </p></li>
  <li class="span3 height2"><p>The French have a phrase for it. The bastards have a phrase for everything and they are always right. To say goodbye is to die a little.” </p></li>
  <li class="span2 height2"><p>“I'm an occasional drinker, the kind of guy who goes out for a beer and wakes up in Singapore with a full beard.” </p></li>
  <li class="span3"><p>“In writing a novel, when in doubt, have two guys come through the door with guns.” </p></li>
  <li class="span3"><p>“I was neat, clean, shaved and sober and I didn't care who knew it.” </p></li>
  <li class="span2"><p>“Dead men are heavier than broken hearts.”</p></li>
  <li class="span3 height2"><p>“I needed a drink, I needed a lot of life insurance, I needed a vacation, I needed a home in the country. What I had was a coat, a hat and a gun. I put them on and went out of the room.”</p></li>
  <li class="span4"><p>“There is no bad whiskey. There are only some whiskeys that aren't as good as others.”</p></li>
  <li class="span2"><p>“Dead men are heavier than broken hearts.”</p></li>
  <li class="span3 height2"><p>“I needed a drink, I needed a lot of life insurance, I needed a vacation, I needed a home in the country. What I had was a coat, a hat and a gun. I put them on and went out of the room.”</p></li>
  <li class="span4"><p>“There is no bad whiskey. There are only some whiskeys that aren't as good as others.”</p></li>
  <li class="span3"><p>“It seemed like a nice neighborhood to have bad habits in.”</p></li>
  <li class="span3"><p>“It was a blonde. A blonde to make a bishop kick a hole in a stained-glass window.” </p></li>
  <li class="span2"><p>“She gave me a smile I could feel in my hip pocket.” </p></li>
  <li class="span3"><p>“The girl gave him a look which ought to have stuck at least four inches out of his back.” </p></li>
  <li class="span3"><p>“You talk too damn much and too damn much of it is about you.” </p></li>
  <li class="span3"><p>“As honest as you can expect a man to be in a world where its going out of style.” </p></li>
  <li class="span3 height2"><p>The French have a phrase for it. The bastards have a phrase for everything and they are always right. To say goodbye is to die a little.” </p></li>
  <li class="span2 height2"><p>“I'm an occasional drinker, the kind of guy who goes out for a beer and wakes up in Singapore with a full beard.” </p></li>
  <li class="span3"><p>“In writing a novel, when in doubt, have two guys come through the door with guns.” </p></li>
  <li class="span3"><p>“I was neat, clean, shaved and sober and I didn't care who knew it.” </p></li>
  <li class="span3"><p>“There is no trap so deadly as the trap you set for yourself.” </p></li>
  <li class="span3 height2"><p>“From 30 feet away she looked like a lot of class. From 10 feet away she looked like something made up to be seen from 30 feet away.” </p></li>
  <li class="span3"><p>“I was as hollow and empty as the spaces between stars.” </p></li>
</uL
  

html {
  writing-mode: vertical-lr;
  margin: 10px;
  color: #011627;
  background-color: #011627;
}

ul {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: 14vh;
  grid-auto-flow: dense;
}
li {
  display: block;
  overflow: hidden;
  writing-mode: horizontal-tb;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2vh;
}
h1 {
  font-family: 'Modak', cursive;
  font-size: 16vh;
  margin-top: 3vh;
}
p {
  text-align: center;
  font-family: 'Carter One', cursive; font-size: 3.5vh;
}
li:nth-child(3n+2){
  background-color: #FF9F1C;
}
li:nth-child(3n+1){
  background-color: #E71D36;
}
li:nth-child(3n){
  background-color: #2EC4B6;
}

.span2 { grid-row-end: span 2; }
.span3 { grid-row-end: span 3; }
.span4 { grid-row-end: span 4; }
.span5 { grid-row-end: span 5; }
.span6 { grid-row-end: span 6; }

.height2 { grid-column-end: span 2; }

 @media (max-height:500px) {
   ul {
     grid-gap: 8px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-auto-rows: 18vh;
   }
   h1 {
     font-size: 21vh;
     margin-top: 4vh;
   }
   p {
     font-size: 4.5vh;
   }
}
 @media (max-height:400px) {
   ul {
     grid-gap: 8px;
     grid-template-columns: 1fr 1fr 1fr;
     grid-auto-rows: 22vh;
   }
   h1 {
     font-size: 25vh;
     margin-top: 5vh;
   }
   p {
     font-size: 5.7vh;
   }
}