Grid-template-areas css property does not align grid items
I'm new to css networks and I'm trying to create a page with this layout:
The problem is I have a class .main
and a grid inside a container grid.
I think I have the wrong setting for the grid in .main
.
For the top container, .container
I can see the three column layout is working.
In the first line, I want the div div div to be 2 out of three columns, and the blog div in the blog div is one column.
The second line should have three blog divs spanning one column each.
But in the inner grid, .main
all the markup is in the fourth column.
I have a codepen setup . Useful for any suggestions.
This is my markup, the css is in codepen:
body {
padding-top: 20px;
background: #f5f7f8;
}
.container{
display: grid;
width: 100%;
max-width: 750px;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 80px 180px 80px;
grid-gap: 20px;
grid-template-areas: "header header header"
"main main main"
"footer footer footer";
}
.container div{
color: white;
font-size: 20px;
padding: 20px;
}
.header {
background: #b03532;
grid-area: header;
}
.main {
background: #33a8a5;
grid-area: main;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 20px;
grid-template-areas: "bigimg bigimg blogart"
"blogart blogart blogart";
}
.bigimg {
background: #da6f2b;
grid-area: bigimg;
}
.blogart {
background: #3d8bb1;
grid-area: blogart;
}
.footer {
background: #6a478f;
grid-area: footer;
}
<section class="container">
<div class="header">Header</div>
<div class="main">
<div class="bigimg">img</div>
<div class="blogart">blogart</div>
<div class="blogart">blogart</div>
<div class="blogart">blogart</div>
<div class="blogart">blogart</div>
</div>
<div class="footer">footer</div>
</section>
-Thank
source to share
You are trying to name several areas of the grid "blogart" but it is incorrect. You cannot name multiple mesh areas with the same name.
There are several ways to define a grid besides using named template regions. Instead of using it grid-template-areas
in your inner grid, you might want to use an auto grid placement algorithm.
Try something like this:
.main {
background: #33a8a5;
grid-area: main;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 20px;
}
Then each grid item in the grid will be automatically laid out, one per grid cell, for three columns until they are nested.
change
Here's a more complete demo: https://codepen.io/keithjgrant/pen/JNGNKX
I made a few changes:
- I removed
grid-template-rows
from the outer mesh. You have limited the heights of each line; it is better for the content to grow / shrink automatically as needed. - I removed
grid-template-areas
from the inner grid andgrid-area
from my grid items. This allows them to play naturally in the order in which they appear. Each grid item fills one grid cell by default. - I added a
grid-column: span 2
to img since you want it to span 2 columns.
Play with it. Note that you can now add (or remove) as many blogart elements as you want and the layout still works.
source to share
The problem lies in this section of your code:
.main {
grid-template-areas: "bigimg bigimg blogart"
"blogart blogart blogart";
}
Invalid layout.
From the specification:
7.3. Named Areas:
grid-template-areas
PropertyThis property indicates named areas of the grid that are not associated with any particular grid item, but can be referenced by grid placement properties.
The property syntax
grid-template-areas
also provides visualization of the grid structure, making the overall layout of the grid container easier to understand.All rows must have the same number of columns, or the declaration is invalid.
If the named grid area spans multiple grid cells, but those cells do not form a single filled rectangle, the declaration is invalid.
Note. Non-rectangular or disabled areas may be resolved in a future version of this module.
(emphasis mine)
In short, your render is .blogart
L-shaped, not rectangular, so it doesn't work.
This is not a problem with your visualization .container
, which works great:
.container {
grid-template-areas: "header header header"
"main main main"
"footer footer footer";
}
To do the job with the layout, consider the use of elements grid-column
, and grid-row
grid elements. Here's a rough sketch based on your demo:
body {
padding-top: 20px;
background: #f5f7f8;
}
.container{
display: grid;
width: 100%;
max-width: 750px;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 80px 180px 80px;
grid-gap: 20px;
grid-template-areas: "header header header"
"main main main"
"footer footer footer";
}
.container div {
color: white;
font-size: 20px;
padding: 20px;
}
.header {
background: #b03532;
grid-area: header;
}
.main {
background: #33a8a5;
grid-area: main;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 20px;
/* grid-template-areas: "bigimg bigimg blogart"
"blogart blogart blogart"; */
}
.bigimg {
grid-column: 1 / 3;
background: #da6f2b;
/* grid-area: bigimg; */
}
.blogart:nth-child(2) {
grid-column: 3 / 4;
background: #3d8bb1;
/* grid-area: blogart; */
}
.blogart:not(:nth-child(2)) {
grid-column: auto / span 1;
grid-row: 2;
background: orange;
/* grid-area: blogart; */
}
.footer {
background: #6a478f;
grid-area: footer;
}
<section class="container">
<div class="header">Header</div>
<div class="main">
<div class="bigimg">img</div>
<div class="blogart">blogart</div>
<div class="blogart">blogart</div>
<div class="blogart">blogart</div>
<div class="blogart">blogart</div>
</div>
<div class="footer">footer</div>
</section>
source to share