Pure flexbox grid with repeating irregular pattern

Ask a question
3

I am trying to create a responsive grid using only Flexbox. The grid is irregular with most fields taking up 25% of the screen and every 3rd and 9th item taking up 50%. A complete grid, therefore, contains 14 items, before the pattern restarts.
My code so far looks like this:

SASS

 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

li {
  flex-grow: 1;
  height: 14.0625vw;
  min-width: 25%;
  box-sizing: border-box;
  background: teal;
  color: white;
  text-align: center;
  padding: 0.5rem;
  border: 0.5rem solid white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  &:nth-of-type(3), &:nth-of-type(9) {
    min-width: 50%;
  }
  @media screen and (max-width: 1024px) {
    height: 28.125vw;
    min-width: 50%;
    &:nth-of-type(3n) {
      min-width: 100%;
    }
  }
  @media screen and (max-width: 768px) {
    height: 56.25vw;
    min-width: 100%;
  }
}

See it in action: https://codepen.io/jakeherp/pen/OGvjJe

How can I make this pattern repeat itself?

Coin iconoffer bounty
add comment

0 Answer

Your Answer