css grid динамическое количество элементов в двух строках, чтобы в последней строке не было только одного элемента - PullRequest
Новая
       26

css grid динамическое количество элементов в двух строках, чтобы в последней строке не было только одного элемента

1 голос
/ 19 июня 2019

Я хочу конвертировать старый гибкий код в CSS Grid;Как использовать сетку для обработки динамического числа элементов сетки (от 1 до 10), охватывающих две строки, в частности, чтобы вторая строка никогда не имела одного элемента сетки (для целей проектирования)?

Ранее использовался JSчтобы посмотреть количество элементов, сгенерированных при загрузке страницы, и применить класс fourItemsPerRow или fiveItemsPerRow, который добавил flex, чтобы определить, насколько гибкой была каждая строка.Я хочу использовать сетку CSS, чтобы сделать ее более динамичной / простой в управлении, если в какой-то момент в контейнере сетки находится даже более 10 элементов.

JSX 

<div className={STYLES.tilesWrapper}>
 <div className={STYLES.tiles}>
  {tiles.map((tile, i) => (
   <div
    key={i}
    className={classNames(numPerRowClass, STYLES.tileContainer)}>
     {tile}
    </div>
     ))}
 </div>
</div>

const numPerRowClass = numTiles >= 5 && numTiles % 2 !== 0
        ? STYLES.fivePerRow
        : STYLES.fourPerRow;

CSS 

.tiles
  padding: 40px 0 0 0
  display: flex
  align-items: flex-start
  flex-direction: row
  justify-content: center
  flex-wrap: wrap
  width: 100%
  max-width: 1200px

.fivePerRow
  width: 20%
  flex: 0 0 calc(20% - 16px)

.fourPerRow
  width: 25%
  flex: 0 0 calc(25% - 50px)

Для сетки CSS я не уверен, как бы я перевел это.До сих пор я пытался использовать свойство repeat для grid-template-columns и grid-template-row.Отдельный элемент, когда сетка содержит определенное количество элементов. Здесь в коде 5 элементов сетки https://codepen.io/vee1234/pen/agmEWE

...