html - Repeat two rows pattern in CSS Grid

Question

I want to mimic this pattern (over and over):

So I wrote grid-template-columns: 65% 35% for the first row. Yet, I want to do grid-template-columns: 65% 35% for a second row (and the fourth, and the sixth and so on), but I'm not sure how can I do that while maintaining 65% and 35%.

#parent {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-gap: 24px;
}

.child {
  height: 150px;
  background-color: #DDD;
}

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div

标签： htmlcsscss-grid

Answer 1

You can achieve this by creating a three-column grid with grid-template-columns: repeat(3, 33.333%); and adding an additional class for the children that will stretch the element into two columns grid-column: span 2;

Result:

https://codepen.io/hisbvdis/pen/vYBaZQb

#parent {
  display: grid;
  grid-template-columns: repeat(3, 33.333%);
  grid-gap: 24px;
}

.child {
  height: 150px;
  background-color: #DDD;
}

.wide {
  grid-column: span 2;
}

<div id="parent">
  <div class="child wide"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child wide"></div>
  <div class="child wide"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child wide"></div>
  </div