web-dev-qa-db-ja.com

無限行のCSSグリッド垂直列

長さが不明なアイテムのリストがあります（CMSから）。縦に2列に並べて表示したい。例えば.

 1 4 
 2 5 
 3 6 
 
 etc ...

私はCSSグリッドでこれを達成しようとしていますが、行数を前もって設定しない限り、それは可能ではないようです。私が試してみました grid-auto-flow: columnごとに https://gridbyexample.com/examples/example18/ ですが、これは最後に到達したときに列を追加するだけです。

私はこのように感じていますグリッドで可能ですべきですが、方法が見つかりません。誰かアイデアはありますか？

追伸CSSテキスト列を提案しないでください

csscss-grid
8
matthewbeta

アイテムの正確な量を知らなければ、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>
9
chrona

コンテナとフレックスアイテムがあるフレックスを使用できます。コンテナの高さを制限し、フレックスのコンテンツをラップして次の列に続けることができます：-

<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;
}

フレックスボックスの詳細を読む

1
benedemon

HTMLが生成された場合の1つの解決策は、Math.ceil( NUM_ITEMS / NUM_COLUMNS )を使用してコンテナー要素のgrid-template-rowsプロパティを計算することです。

反応中：

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);
}
0
user2166772

例：

// This is just to simulate infinite scrolling

var counter = 9;
document.addEventListener('scroll', function(e) {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    var span = document.createElement('span');
    span.innerHTML = ++counter;
    document.body.appendChild(span);
  }
})
body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 200px;
  /* how much height must each element occupy! change that! */
  grid-gap: 0.5rem;
}

span {
  background: #3A3A3A;
  text-align: center;
  color: #FFFFFF;
  line-height: 200px;
  font-size: xx-large;
}
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
0
George Metsis