CSS: grid with different number of items per line

Question

I have this grid which is responsive and has 3 or 2 items per row, depending on the screen width.

I wonder how it would be possible to have 3 items on the first line and only 2 on the second line (and so on... 3:2) on screens that are large enough to show 3 items in a row. otherwise it should be 2:1 items

(These images dont show exactly what i mean because on image 2 two items are lost.

https://stackoverflow.com/q/56101028/8620333 – Temani Afif Jan 04 '23 at 21:57 — Temani Afif, Jan 04 '23 at 21:57

score 0 · Accepted Answer · answered Jan 05 '23 at 02:45

By definition, CSS grid doesn't allow differing numbers of columns per row. With a little bit of planning, you could achieve the effect with flexbox. See the simple example below. Here, I used a basic flex-wrap with constant margins, and adjusted a side margin every nth item.

You might want to enter full screen mode and try adjusting browser window.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 330px;
  padding: 5px;
  background-color:#333;
}

.item {
  width: 100px;
  height: 100px;
  margin: 5px;
  border-radius: 100px;
  background-color: #bada55;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item:nth-of-type(5n) {
  margin-right: 10px;
}

.item:first-of-type {
  margin-right: 5px;
}

@media screen and (max-width: 800px) {
  .container {
    width: 220px;
  }
  .item:nth-of-type(5n) {
    margin-right: 5px;
  }
  .item:nth-of-type(3n) {
    margin-right: 10px;
  }
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
</div>

CSS: grid with different number of items per line

1 Answers1