We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

ここへジャンプ:

CSS グリッド は display プロパティの値に grid を指定して定義します。グリッドの列や行は grid-template-rowsgrid-template-columns プロパティで定義します。

これらのプロパティを使って定義したグリッドのことを 明示的グリッド (explicit grid) と呼びます。

 

明示的グリッドの外にコンテンツを配置する場合や、自動配置に任せる場合、グリッドアイテム が収まるように行や列の トラック がグリッドアルゴリズムに従って暗黙的に追加されます。暗黙的グリッド (implicit grid) は、定義済みのトラックの外部にコンテンツを配置するため自動的に作成されるグリッドです。

次の例では 3 列 2 行の明示的グリッドを作成しています。グリッドで 3 つ目の行は、明示的グリッドが定義している 6 つ以上のアイテムが含まれていることで作られた、暗黙的グリッドによる行トラックです。

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
</div>

詳細

プロパティリファレンス

参考文献

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: locol23, dynamis
最終更新者: locol23,