CSS Grid question (first row with 3 columns, second row with 4 columns)

Is there any easy way to set this up without having to declare strange spans? Or making the grid be 12 columns.

3 Replies

this is the way i do it, (which for me isn't strange, maybe just getting used to it)

.grid{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 100px;
  gap: 1rem;
  > .item {
    background-color: blue;
    grid-column-end: span 2;
    &:nth-child(7n+1){
      grid-column-start: 2;
    }
  }
}

.grid{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 100px;
  gap: 1rem;
  > .item {
    background-color: blue;
    grid-column-end: span 2;
    &:nth-child(7n+1){
      grid-column-start: 2;
    }
  }
}

https://codepen.io/MarkBoots/pen/wBwKBWq

Mark Boots

CodePen

Untitled

...

LexiOP•2mo ago

I guess I should say I framed this incorrectly. That is what I currently have and was wondering if there's a better way to do it other than makes 12 sections?

MarkBoots•2mo ago

wel, maybe for you it is earier to use it together with subgrid so you can mark up the rows

.grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 100px;
  gap: 1rem;
  > .row {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: subgrid;
    
    &:nth-child(odd) > * { grid-column-end: span 4 }
    &:nth-child(even) > * { grid-column-end: span 3 }
    
    > .item {
      background-color: blue;
    }
  }
}

.grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 100px;
  gap: 1rem;
  > .row {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: subgrid;
    
    &:nth-child(odd) > * { grid-column-end: span 4 }
    &:nth-child(even) > * { grid-column-end: span 3 }
    
    > .item {
      background-color: blue;
    }
  }
}

Gaming

Programming

CSS Grid question (first row with 3 columns, second row with 4 columns)

Did you find this page helpful?