<h2>Anonymous Grid Items</h2>
<div class="container">
<span class="nonan">1</span>
Anonymous Item
<div class="nonan floating">2</div>
<div class="nonan">3</div>
<div class="nonan floating">4</div>
<div class="nonan">5</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 10px auto;
width: 600px;
font-family: 'Lato';
text-align: center;
}
h2 {
margin: 25px;
margin-bottom: 50px;
font-size: 2em;
}
.container {
display: grid;
grid-template-columns: 180px 180px 180px;
grid-gap: 10px;
font-family: 'Lato';
text-align: center;
font-size: 1.4em;
}
.nonan {
background: orange;
padding: 40px 10px;
height: 120px;
font-size: 1.5em;
}
.floating {
float: left;
background: violet;
}
This Pen doesn't use any external JavaScript resources.