CSS - grid-auto-flow

• トップ
• CSSリファレンス
• grid-auto-flow

概要

説明

グリッドアイテムを並べる方向を row または column で指定します。dense を指定すると、空きスペースをなるべく埋めるように配置します。詳細は「とほほのGird入門」を参照してください。

使用例

.grid-container-row {
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: 2rem 2rem;
  grid-template-columns: 4rem 4rem;
}
.grid-container-column {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 2rem 2rem;
  grid-template-columns: 4rem 4rem;
}

関連項目

• grid
• grid-template
• grid-template-areas
• grid-template-rows
• grid-template-columns
• grid-auto-rows
• grid-auto-columns
• grid-area
• grid-row
• grid-column
• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/grid-auto-flows
• https://drafts.csswg.org/css-grid/#grid-auto-flow-property