<div class="flexbox">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
padding: 2vw;
}
.flexbox {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
border: 1px solid #eee;
box-shadow: 1px 1px 1px rgba(#eee,.5);
border-radius: 5px;
margin: 10px;
width: 40vw;
counter-reset: number;
.item {
flex: 1 1 11vw;
margin: 5px;
min-height: 15vh;
background: #f36;
border-radius: 3px;
position: relative;
&::before {
counter-increment: number;
content: counter(number);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
color: #fff;
}
}
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
padding: 5px;
border: 1px solid #eee;
box-shadow: 1px 1px 1px rgba(#eee,.5);
border-radius: 5px;
width: 40vw;
counter-reset: number;
margin: 10px;
.item {
min-height: 15vh;
background: #3a6;
border-radius: 3px;
position: relative;
&:last-child:nth-child(3n-2) {
grid-column: span 3;
}
&::before {
counter-increment: number;
content: counter(number);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
color: #fff;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.