<main>
<div class="container">
<h1>CSS GRID CONTAINER</h1>
<div class="box">
<p>RESPONSIVE GOODNESS</p>
</div>
</div>
</main>
main {
text-align: center;
background: #252d3d;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
h1 {
color: #f8d58c;
}
.box {
height: 5em;
width: 100%;
background: #d0c1fa;
color: darken(#d0c1fa, 40%);
p {
opacity: .6;
}
font-weight: bold;
border-radius: 1em;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
}
.container {
display: grid;
grid-template-columns:
minmax(1em, 1fr)
[main-start] minmax(0, 60em) [main-end]
minmax(1em, 1fr);
width: 100%;
> * {
grid-column: main;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.