<div class = "wrapper">
<div class = "header">header</div>
<div class = "nav">nav</div>
<div class = "aside">Aside</div>
<div class = "section"> Section
<div class = "row">
<div id = "one" class = "col-lg-3 col-sm-6"><p>Lorem ipsum dolor sit amet, pri ei vero repudiandae, et suas graeco democritum mel. An pro congue scripta percipitur. Quo et odio homero, ad possit dictas sed. In eos iisque signiferumque.</p></div>
<div id = "one" class = "col-lg-3 col-sm-6"><p>Lorem ipsum dolor sit amet, pri ei vero repudiandae, et suas graeco democritum mel. An pro congue scripta percipitur. Quo et odio homero, ad possit dictas sed. In eos iisque signiferumque.</p></div>
<div id = "one" class = "col-lg-3 col-sm-6"><p>Lorem ipsum dolor sit amet, pri ei vero repudiandae, et suas graeco democritum mel. An pro congue scripta percipitur. Quo et odio homero, ad possit dictas sed. In eos iisque signiferumque.</p></div>
<div id = "one" class = "col-lg-3 col-sm-6"><p>Lorem ipsum dolor sit amet, pri ei vero repudiandae, et suas graeco democritum mel. An pro congue scripta percipitur. Quo et odio homero, ad possit dictas sed. In eos iisque signiferumque.</p></div>
</div> <!--end of div row-->
</div><!--end of div section-->
<div class = "footer">footer</div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
grid-template-areas:
"header header header"
"aside nav nav"
"section section section"
"footer footer footer";
}
.nav {
grid-area: nav;
background-color: green;
}
.header {
grid-area: header;
background-color: red;
}
.aside {
grid-area: aside;
background-color: orange;
}
.section {
grid-area: section;
background-color: rgb(240, 233, 238);
}
.footer {
grid-area: footer;
background-color: pink;
}
#one {
background: rgb(2, 48, 48);
border: 2px ridge black;
color: wheat;
}
This Pen doesn't use any external JavaScript resources.