web-dev-qa-db-ja.com

CSSグリッドで列を折り返す

display: grid;を使用するときに列の最大数を指定するにはどうすればよいですか。コンテンツがスペースに対して広すぎる（または最小サイズよりも小さくなる）と、自動的に分割されます。メディアクエリなしでこれを行う方法はありますか？

たとえば、コンテンツに十分なスペースがない場合、次のようにして単一列モードに分割しません。

#grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
}
<div id="grid">
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
</div>
csscss-grid
14
Panda TG Attwood

HTMLもCSSも、コンテナの子孫がラップするときの概念はありません。

基本的に、ブラウザは最初のカスケード中にドキュメントをレンダリングします。子が折り返されても、ドキュメントはリフローされません。

したがって、列数を変更するには、行のどこかに幅の制限を設定するか、メディアクエリを使用する必要があります。

より詳細な説明は次のとおりです：コンテナが子要素を折り返すときに縮小して合わせる

列幅を定義できる場合、グリッドレイアウトの_auto-fill_関数を使用すると、ラッピングが容易になります。

この例では、列の数は画面の幅に完全に基づいています。

_#grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* see notes below */
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
}_
_<div id="grid">
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
</div>_

jsFiddleデモ

ノート：

_auto-fill_ 関数を使用すると、コンテナがオーバーフローすることなく、グリッドができるだけ多くのグリッドトラック（列または行）を整列できます。これにより、フレックスレイアウトの_flex-wrap: wrap_と同様の動作を作成できます。

minmax() 関数を使用すると、グリッドトラックの最小サイズと最大サイズの範囲を設定できます。上記のコードでは、列トラックの幅は最小100pxであり、利用可能な空き領域の最大です。

fr 単位は、使用可能なスペースの割合を表します。フレックスレイアウトの_flex-grow_に似ています。

31
Michael_B