<div class="wrapper">
<div>
<div class="box">One</div>
</div>
<div>
<div class="box">Two</div>
</div>
<div>
<div class="box">Three</div>
</div>
<div>
<div class="box">Four</div>
</div>
</div>
:root {
--light-gray: hsla(300, 4%, 81%, 1);
--ghost-white: hsla(225, 100%, 99%, 1);
--davys-grey: hsla(12, 5%, 36%, 1);
--blue-sapphire: hsla(196, 67%, 33%, 1);
--charcoal: hsla(207, 38%, 25%, 1);
}
/* from https://coolors.co/d0ccd0-fbfcff-605856-1c6e8c-274156*/
* {
box-sizing: border-box;
}
body {
background-color: var(--charcoal);
font: 1.2em/1.3 Roboto, sans-serif;
}
.wrapper {
box-sizing: border-box;
width: 960px;
height: 540px;
margin: 100px auto;
background-color: var(--ghost-white);
}
.wrapper {
padding: 40px;
display: grid;
grid-template-columns: 100px 200px 300px 1fr;
gap: 20px;
}
.wrapper > div {
container-type: inline-size;
}
.box {
background-color: var(--davys-grey);
color: var(--ghost-white);
padding: 10px;
min-height: 200px;
}
@container (min-width: 220px) {
.box {
background-color: var(--blue-sapphire);
}
}
This Pen doesn't use any external JavaScript resources.