<section class="container">
<header>Header</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<footer>Footer</footer>
</section>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0.625rem;
}
.container > * {
grid-column: 1 / span 3;
font-size: 1.875rem;
font-weight: 800;
text-align: center;
background: #dfeffd;
border: 3px solid #457fdc;
color: #457fdc;
}
header,
footer {
padding: 1.875rem;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inherit;
grid-template-columns: inherit;
grid-gap: inherit;
}
li {
border: tomato 0.1875rem solid;
padding: 1.875rem;
font-size: 1.875rem;
font-weight: 800;
text-align: center;
color: tomato;
background: mistyrose;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.