CSS Example: Grid Layout Template 9
<title>CSS Grid Template 9</title>
<style>
body {
display: grid;
grid-template-areas:
"header header"
"nav article"
"ads article"
"ads footer";
grid-template-rows: 80px 1fr 120px 70px;
grid-template-columns: 20% 1fr;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 1.2em;
background: yellowgreen;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"ads"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
</style>
<body>
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>
In this example, the left side provides the code used to render the output in the right side.
Feel free to copy and paste the code into your own project and modify as you wish.
About CSS
CSS stands for Cascading Style Sheets. It's used to add styles to web pages. It's typically added to HTML pages using the <link>
tag, so that we can have the CSS in a separate file to the HTML file. However, we also have the option of embedding the CSS in the actual HTML file by using the <style>
HTML tag, or by using the style
attribute within an individual HTML tag.