CODEWITHSUNDEEP
cssresponsive-designflexbox
Estus Flask
Estus Flask

Reputation: 222369

Responsive flexbox grid for 3-5 items

Here is simple CSS that I've managed to make workable for simple responsive grid (a plunker):

.flex {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.flex > * {
  flex-grow: 1;
  /* drives IE11 crazy for some reason */
  /*flex-basis: 0;*/
  padding: 20px;
}

@media screen and (min-width: 600px) {
  .flex {
    flex-direction: row;
  }

  .flex > * {
    flex-basis: calc(50% - 40px);
  }
}

@media screen and (min-width: 992px) {
  .flex {
    flex-direction: row;
  }

  .flex > * {
    flex-basis: calc(25% - 40px);
  }
}

For specified breakpoints it does the job for 4 items:

1 + 1 + 1 + 1

2 + 2

4

And for 3 items:

1 + 1 + 1

2 + 1

3

For 5 items it gives me:

1 + 1 + 1 + 1 + 1

2 + 2 + 1

4 + 1

It conforms to flex-basis, but I would like to get

3 + 2

for the last breakpoint.

How can I make this CSS work for 5 items as 3 + 2 on last breakpoint (3 items in the first row, 2 items in the second row)?

Upvotes: 2

Views: 443

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371143

Give the first three flex items a width of 33%.

Give the last two flex items a width of 50%.

In a row wrap container, the first three will consume all space in the row, forcing the remaining items to the next row.

@media screen and (min-width: 992px) {

  .flex {
    flex-direction: row;
  }

  .flex > *:nth-child(-n + 3) {
    flex-basis: calc(33.33% - 40px);
  }

  .flex > *:nth-last-child(-n + 2) {  /* see note below */
    flex-basis: calc(50% - 40px);
  }
}

The second flex-basis rule may be optional (depending on your layout goals). You can also set it to flex: 1 or even leave it out entirely. In all cases, the two divs take 50% of the row.

revised plunker

Upvotes: 1

Related Questions