CODEWITHSUNDEEP
htmlcssflexbox
Neil Hodges
Neil Hodges

Reputation: 127

CSS Flexbox Layout - 3 columns and 2 columns interchanging

Can anyone help me with this layout using Flexbox. I need a layout that repeats from 3 columns to 2 columns and then back to 3 columns. Ive added an image below as to what I mean.

enter image description here

Upvotes: 0

Views: 64

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can use double flex size on each nth-child(10n + 4) and nth-child(10n + 10) items.

.grid {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: calc(33.33% - 10px);
  height: 70px;
  margin: 5px;
  background: #BD1522;
}
.item:nth-child(10n + 4),
.item:nth-child(10n + 10) {
  flex: calc(66.66% - 10px);
}
<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Upvotes: 3

Related Questions