Grid 4
Grid Template Areas
Another way to define a grid is by the area each element covers. This is done using the property grid-template-areas. There is a bit more code is a little more verbose but it makes working with grid very easy once you get going.
The first step is to create some HTML elements…
<header>My website name</header>
<main>The content.. </main>
<aside>The sidebar</aside>
<footer>The footer</footer>
There are three steps in the CSS:
1. Define your columns and rows
Firstly define your columns and rows as above using grid-template-columns and grid-template-rows.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: repeat(3, 70px);
}
This gives you a 3x3 grid with four items:
2. Define the areas
The second step is to define the areas using the grid-template-areas property and some names you want to give them. Give each grid area a name. If two adjacent cells have the same name then they are joined into one, which is then the area. The code is written:
.container {
grid-template-areas:
"header header header"
"main main aside"
"footer footer footer";
}
3. Map grid cells to the area name
Finally you need to map each cell to the names used above using grid-area: header
The html header tag is spread across the area we called ‘header’ above:
header {
grid-area: header;
}
NB. In this example the grid-area name for the header tag is header for convenience. But the names used can be anything at all, as long as they relate to the names used in the grid-template-areas property.
This is done for each element until you get:
Using named grid lines
Another way to use grid areas is by naming the grid lines and using a special naming pattern.
Grid lines, the lines between the columns or rows, can be named using using square brackets:
.wrapper {
display: grid;
grid-template-columns: 1fr [content-start] 1fr [content-end] 1fr;
}
.content {
grid-area: content;
}
View the CSS for this page
.resources > ul > li:nth-child(4), aside > ul > li:nth-child(4) {
padding-bottom: .7em;
border-bottom: solid 1px;
}
.grid {
font-size: .5em;
display: grid;
grid-gap: 2px;
width: 45%;
margin: 0 0 7em 0;
background: var(--headercolor);
border: solid 2px var(--headercolor);
resize: both;
overflow: auto;
cursor: nw-resize;
}
/* .grid::after {
content: attr(id);
} */
.nine {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.griditem {
background: #58b6ed;
color: var(--container-bg);
padding: .5em;
text-align: center;
}
#g1 #item5, #g2 #item5, #g3 #item5 {
background: steelBlue;
}
#g2 #item5 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
#g3 #item5 {
grid-column: -2 / -1 ;
grid-row: -1 / -2;
}
#g4 {
grid-template-columns: repeat(2, 1fr 2fr);
}
#g5 {
grid-template-columns: 50px repeat(2, 200px) auto;
}
#g5 #item1, #g5 #item2, #g5 #item3, #g5 #item4 {
font-weight: bold;
font-size: 1.3em;
font-family: 'Segoe ui';
color: black;
}
#g6 {
grid-template-columns: repeat(5, 1fr 3fr);
}
#g7, #g8, #g9, #g10 {
grid-template-columns: repeat(5, 1fr);
}
#g8 #item9 {
background: steelBlue;
grid-column: span 2;
}
#g9 #item9 {
background: steelBlue;
grid-column: span 3;
}
#g10 #item4 {
grid-column: 2 / -1;
}
#g10 #item7 {
grid-column: 3 / 5;
}
#g10 #item10 {
grid-row: 3 / span 2;
}
#g10 #item4 {
grid-column: 2 / -1;
}
#g11, #g12, #g13, #g14 {
grid-template-columns: repeat(auto-fill, 130px);
}
#g11 #item4, #g12 #item4 {
grid-column: -2 / -1;
}
#g12 {
grid-template-columns: repeat(auto-fit, 130px);
}
#g13 {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* #g15 {
grid-template-columns: 3fr 1fr;
grid-auto-rows: auto;
} */
#g15 {
grid-template-columns: fit-content(200px) 200px 200px;
}
/* not understaning auto-rows right now. Scratch it all out
h2:nth-of-type(3) + p {
text-decoration: line-through;
}
*/
#g16 {
margin-top: 1em;
grid-template-columns:1fr 2fr 1fr;
grid-template-rows: repeat(3, 70px);
grid-gap: 5px;
font-weight: bold;
grid-template-areas:
"header header header"
"main main aside"
"footer footer footer";
}
#g17 {
margin-top: 1em;
grid-template-columns:1fr 2fr 1fr;
grid-template-rows: repeat(3, 70px);
grid-gap: 5px;
font-weight: bold;
grid-template-areas:
"header header header"
"main main aside"
"footer footer footer";
}
#g17 #item1 {grid-area: header}
#g17 #item2 {grid-area: main}
#g17 #item3 {grid-area: aside}
#g17 #item4 {grid-area: footer}