I have a header grid
.header {
display: grid;
grid-template-columns: repeat(4, 240px);
grid-template-rows: 1fr 1fr 1fr 1fr;
....
.img {
grid-column: 2 /-1;
grid-row: 1 /-1;
}
p {
grid-column: 1 / 3;
grid-row: 2 /3;
}
.filler {
grid-column: 2 /-1;
grid-row: 4 /-1;
}
}
The HTML code being
<div class="wrap">
<div class="header">
<p></p>
<div class="img"></div>
<div class="filler"></div>
</div>
<article><!--this is the impoirtant bit--></article>
</div>
I want the article to have it’s own grid, but I want it to be aligned from where the green bit ends.
My question is, what’s the best way to do it
I’ve created a codepen with three different variations.
Do I replicate the same grid: I don’t like this, because the article should be stand alone. The article .content
will have it’s own grid as well and make it confusing.
article.test1{
display: grid;
grid-template-columns: 240px 240px 240px 240px;
row-gap: 1rem;
column-gap: 1rem;
.content{
background:white;
grid-column: 2 /-1;
}
}
Do I set the article with a width and push it to the right: This was the one I liked, though I’m no longer sure.
article.test2{
width: 752px;
background: lightgray;
margin-left: 256px;
}
Or do I put the article
within a grid: this I like but is there a better way?
.cont{
display: grid;
grid-template-columns: 240px 240px 240px 240px;
row-gap: 1rem;
column-gap: 1rem;
article.test3{
grid-column: 2 /-1;
}
}
This is the first time I’m using grids. For the header
I loved it, I I’m just not sure what’s the best way to do the above.
Again the codepen