Несколько строк с фиксированным количеством записей в реакции

Question

У меня есть 9 записей об изображении продукта в местном хранилище, и теперь я хочу отобразить эти изображения, например, в виде галлереи. Я использую таблицу и массив карт для отображения изображения и применяю array.slice(0,length), чтобы все записи извлекались, но все изображения отображались только в одной строке. Я хочу отобразить фиксированный номер изображения в каждой строке, то есть в каждой строке есть 5 записей, подобных этой.

      {this.state.productdata.slice(0,this.state.productdata.length).map((item, index) => (
          <td>                                                                                                                            
             <div className="row" >                                                                                                             
            <div className="card">
              <div class="cardbody">
            <img src={item.productimage} onClick={this.MoreViewHandle.bind(this,item.productid)} height="250px" width="150px"></img>
            </div></div></div>
            </td>

        ))}
       </tr>   

      </table>

Мне нужно одинаковое количество записей в каждой строке. Как в первой строке отображаются первые 5 записей, во второй строке отображаются 6-10 записей и т. Д.

Answer 1

.row{
display:flex;
justify-content:flex-start;
flex-wrap:wrap;
}

.card{
width:250px;
height:150px
}


.row img{
object-fit:cover;
width:100%;
}

Answer 2

Добавьте этот класс 'img-gallery' в свой <table> как этот <table class="img-gallery">, затем добавьте ниже CSS.

table.img-gallery tr{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
table.img-gallery tr td{
  display: block;
  width: 20%;
}

Answer 3

Использовать сетку CSS:

.row {
  display: grid;
  // creates a row of items that are dynamically sized (1fr, fr === free space)
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  // adds gutters to rows and columns, grid gaps can be added to each individually, also
  grid-gap: 16px;
}

Пример: https://codepen.io/sodapop/pen/GRRpqgR

Подробнее здесь: https://css -tricks.com / snippets / css / complete-guide-сетка /