<div class="grid-container">
<div class="grid-item gi-1">1</div>
<div class="grid-item gi-2">2</div>
<div class="grid-item gi-3">3</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 2%;
}
.grid-container {
width: 310px;
height: 310px;
border: 5px solid #212226;
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.gi-1 {
color: #1E4040;
background-color: #71D99E;
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 3;
}
.gi-2 {
color: #71D99E;
background-color: #3A8C7D;
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 2;
}
.gi-3 {
color: #71D99E;
background-color: #255954;
grid-row-start: 1;
grid-row-end: 4;
grid-column-start: 3;
grid-column-end: 4;
}
.grid-item {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.