Вертикальные столбцы CSS Grid с бесконечными строками

У меня есть список элементов неизвестной длины (из CMS). Я хочу отображать их в 2 вертикальных столбцах, читая вниз. например

1 4
2 5
3 6

etc...

Я пытаюсь добиться этого с помощью сетки CSS, однако это не представляется возможным, если вы не установите количество строк впереди. Я пробовал grid-auto-flow: column согласно https://gridbyexample.com/examples/example18/, но это просто добавляет дополнительные столбцы, когда он дойдет до конца.

Я чувствую, что это должно быть возможным с сеткой, но я не могу найти способ. У кого-нибудь есть идеи?

P.S. Пожалуйста, не предлагайте текстовые столбцы CSS.


css css-grid
person matthewbeta    schedule 04.07.2017    source источник
comment
возможный дубликат: stackoverflow.com/q/44869250/3597276   -  person Michael Benjamin    schedule 04.07.2017
comment
Да, дурак этого вопроса. Поскольку на этот вопрос не был дан ответ, я предполагаю, что это невозможно.   -  person matthewbeta    schedule 04.07.2017

Ответы (3)


arrow_upward
13
arrow_downward

Не зная точного количества элементов, это невозможно только с сеткой CSS.

Единственный способ обойти это ограничение — добавить класс ко второй половине предметов.

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row dense;
  
  /* extra styles */
  grid-gap: 0.5rem;
}

span {
  grid-column-start: 1;
  
  /* extra styles */
  background-color: #def;
  padding: 0.5rem;
}

.second-half {
  grid-column-start: 2;
  
  /* extra styles */
  background-color: #abc;
}
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span class="second-half">5</span>
<span class="second-half">6</span>
<span class="second-half">7</span>

person chrona    schedule 04.07.2017
comment
Привет. спасибо за ответ, но в вопросе я объяснил, что у меня есть список неизвестной длины, сделать это будет невозможно. - person matthewbeta; 04.07.2017
comment
В этом случае ваша проблема не может быть решена (только с сеткой CSS). Я изменил свой ответ, чтобы продемонстрировать, что вы можете применять стили к классу вместо того, чтобы знать количество элементов. - person chrona; 04.07.2017
comment
Вы также можете сделать список фиксированной высоты, но тогда, если у вас слишком мало элементов, он будет слишком высоким, а если у вас слишком много элементов, третий столбец, вероятно, будет создан автоматически. - person thinsoldier; 06.07.2017

arrow_upward
1
arrow_downward

Вы можете использовать flex, в котором есть контейнер и flex-элемент. Вы можете ограничить высоту контейнера, а затем обернуть содержимое flex, чтобы продолжить в следующем столбце:

<body>
<div class="container">
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
</div>
</body>

CSS:

.container {
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Подробнее о flexbox

person benedemon    schedule 04.07.2017

arrow_upward
0
arrow_downward

Одно решение, если ваш HTML сгенерирован, вы можете вычислить свойство grid-template-rows в элементе контейнера с помощью Math.ceil( NUM_ITEMS / NUM_COLUMNS )

В реакции:

function VerticalColumns(props) {
    // props.numColumns matches `grid-template-columns` on `.container` element
    const numRows = Math.ceil(props.items.length / props.numColumns);

    const style = {
        gridTemplateRows: `repeat(${numRows}, 1fr)`,
    };

    return (
        <ul className='container' style={ style }>
            { props.items.map((item, index) => (
                <li key={index}>{ item }</li>
            )) }
        </ul>
    )
}

Базовый CSS:

.container {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, 1fr);
}
person user2166772    schedule 28.09.2018