so, at the moment im tryng to make an array display in two equal lines at every resolution(or most of them), the code structure its just a .map inside a div that returns an extern component `

{games.map((i) => )} `

how it should look, at least untill mobile breakpoint

i though maybe making two separate arrays including half of the original one each an mapping those, however it gave me problems when making it responsive, i also though i migth have to fill my scss with media queries to adjust the cards size and space at every breakpoint so it alwasy looks like that in a 4/4 display instead of 5/3 or 3/3/2 but its hard to believe that thats the solution

CodePudding user response：

You can use css grid to achieve this.

.container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(auto-fill, 120px);
  grid-row-gap: 0.5em;
  grid-column-gap: 1em;
}

 <div className="container">
      {games.map((_, i) => (
        <div key={i}>{i}</div>
      ))}
  </div>

CodePudding user response：

flex css can be help, but i don't know what you want? a row of four, or only two rows.

1. a row of four

.box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex-basis: 25%;
}

2. only two rows(need to adjust order)

.box {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.item {
  flex-basis: 50%;
}

 <div className="box">
      {games.map((_, i) => (
        <div key={i} className="item">{i}</div>
      ))}
  </div>