<div class="container">
<div class="wrapper">
<div class="example">
<div>Item One</div>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
:root {
--color1: #80b2c9;
--color2: #1981a1;
--color3: #354a53;
--color4: #1f0945;
--color-text: #171717;
}
body {
margin: 0;
padding: 40px;
font: 1.2em "Raleway", sans-serif;
background-color: #fff;
color: var(--color-text);
}
.container {
background-color: #ddddda;
height: 720px;
width: 1280px;
padding: 20px 40px;
position: relative;
}
.wrapper {
background-color: white;
width: 800px;
margin: 40px auto;
padding: 20px;
}
.example {
display: grid;
gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
margin-bottom: 2em;
background-color: var(--color1);
padding: 10px;
block-size: 400px;
}
.example::before {
content: "";
background-color: var(--color2);
}
.example::after {
content: "";
background-color: var(--color4);
}
.example > * {
border-radius: 10px;
background-color: var(--color3);
color: white;
padding: 20px;
}
This Pen doesn't use any external JavaScript resources.