<div class="grid__container">
<div class="grid__item">A</div>
<div class="grid__item">B</div>
<div class="grid__item">C</div>
<div class="grid__item">D</div>
<div class="grid__item">E</div>
<div class="grid__item">F</div>
<div class="grid__item">F</div>
<div class="grid__item">H</div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: #557;
padding: 4rem;
}
.warning {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
background-color: #fed7d7;
border-top: 1px solid #f56565;
padding: 10px;
color: #f56565;
}
@supports (grid-template-rows: subgrid) {
.warning {
display: none;
}
}
.grid__container {
height: calc(100vh - 8rem);
max-width: 1024px;
margin: 0 auto;
outline: 3px solid #111;
background: #333;
padding: 1rem;
}
.grid__item {
outline: 4px solid #111;
background: #557;
position: relative;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 1.5rem;
text-shadow: 1px 1px 0 rgb(0 0 0 / 0.8);
}
.grid__container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, minmax(100px, auto));
gap: 1rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.