What is the best way to write this CSS Grid?

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

I would do number three where you put the article into the grid. One thing that might help you here is what is called grid-template where you can essentially label the various grid “cells” a name and then put your article into that grid area.

If you were to create a page template grid were lets say has the four columns, you could do for the first row as aside header header header and place the header element into that area, then do the second row as aside article article article and place your article div into the article grid area.

Example of how this would work…

Notice how simple this is going to be. Article can now be its own grid as well. This is basically creating a grid and then telling each element where in the grid it lives. :slight_smile:

1 Like

Your example is not what I was looking for but thanks for the grid-template-areas I did not know about that, and that you would pick option for.

The header and the article do not share anything with each other kind of thing. My demo was confusing, my bad.

Maybe if you had a drawing or rough sketch of what you are trying to do we could give a more pertinent answer. Your codepen does seem a little complex for such a small demo and you should remember that not everything has to be a grid.

CSS grid is great for aligning things horizontally and vertically but not every structure needs a grid.

Also be careful with your sizes as your inner elements are bigger than the wrapper (just add overflow:hidden you to your wrap and you will see your content get cut off at the side).