<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.