Finally, I have found a decent CSS grid layout technology. Twenty years ago, I used to use HTML tables to structure a page. Then we were told not to use tables and switch over to CSS instead but the CSS techniques at the time were inadequate and so I and many other programmers carried on with HTML tables. Now, I am happy to blog about CSS Grid's grid-template-areas which are wonderfully intuitive way to layout a page.
A really good YouTube video is Easily Structure your Layout with CSS Grid's 'grid-template-areas' and I have given the source code for this video below. I have also embedded the sample page into this blog entry, converting as required. You should find that this is a responsive page that will reduce to a column/stack if the browser's width is made narrow. The CSS has a 'mobile first' design in that the default declaration is for the reduced screen mobile stack whilst the media queries further down are where to find the full window declarations.
You really should watch the video in full but for those in a hurry the real essence is in the following extracts, first we have this grid-template-areas CSS property...
grid-template-areas:
"sidebar header header header"
"sidebar sect1 sect2 sect3"
"sidebar main main main"
"sidebar footer footer footer";
Then we have the HTML...
<body>
<aside></aside>
<header></header>
<section></section>
<section></section>
<section></section>
<main></main>
<footer></footer>
</body>Then these are tied together by specifying the grid-area property in each HTML element's CSS ...
aside { grid-area: sidebar; }
header { grid-area: header; }
section:nth-of-type(1) { grid-area: sect1; }
section:nth-of-type(2) { grid-area: sect2; }
section:nth-of-type(3) { grid-area: sect3; }
main { grid-area: main; }
footer { grid-area: footer; }And that's it, full listing below. Speaking personally this will be my go to page when drawing up a web page from scratch. Enjoy!
Sample Page
Code Listings
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<aside></aside>
<header></header>
<section></section>
<section></section>
<section></section>
<main></main>
<footer></footer>
</body>
</html></html>main.css
body,
html {
height: 100vh;
}
body {
margin: 0;
display: grid;
grid-template-columns: 100%;
grid-template-rows: repeat(5, auto);
grid-template-areas:
"sect1"
"sect2"
"sect3"
"main"
"footer";
}
aside {
grid-area: sidebar;
background-color: #007fff;
}
header {
grid-area: header;
background-color: #71b8eb;
}
section:nth-of-type(1) {
grid-area: sect1;
background-color: #B3D8FD;
}
section:nth-of-type(2) {
grid-area: sect2;
background-color: #5E86AF;
}
section:nth-of-type(3) {
grid-area: sect3;
background-color: #6D9FD2;
}
main {
grid-area: main;
background-color: #7DA9D5;
}
footer {
grid-area: footer;
background-color: #588EC3;
}
@media only screen and (min-width: 768px) {
body {
margin: 0;
display: grid;
grid-template-columns: auto 27% 27% 27%;
grid-template-rows: 8% 30% auto 10%;
grid-template-areas:
"sidebar header header header"
"sidebar sect1 sect2 sect3"
"sidebar main main main"
"sidebar footer footer footer";
}
}
No comments:
Post a Comment