CSS グリッド レイアウト GRID チュートリアル

グリッドは実際のレイアウトの成果物です。 Css に実際にレイアウトの概念が存在するようになったのは、Flex レイアウト モジュールとグリッド レイアウト モジュールが導入されてからです。最初のテーブル レイアウトは奇妙で、ページの layout を実装するには Abosulte を使用する必要があるかもしれません。つまり、実装するのは非常にぎこちないので、このように書くと破綻するのではないか、後続の要素に影響を与えるのではないか、なぜそれでも間違っているのか、という点に常に注意を払う必要があります。著者はこれらの実装を構造的なトリックであると大胆に呼んでいます。局。 Flex は 1 次元のレイアウトを担当し、Grid は 2 次元のレイアウトを担当します。どちらのレイアウトも非常に強力ですが、一方は他方よりも難しく、血を吐きたくなるような属性がたくさんあります。 属性 ではなく module が素晴らしいです。今日は、下の図を中心にグリッド レイアウトに関連する概念のみを紹介します布局。总之，实现起来特别别扭，要时刻注意：我这么写会不会塌陷，会不会给后面的元素造成影响，尼玛为啥还串位了。笔者斗胆的称这些实现为布局trick，Flex和Grid才是真的布。局。Flex负责一维布局，Grid负责二维布局，两个布局都非常强大，但是一个比一个难，属性多到想吐血，谁让人家牛逼是模块而不是属性呢。今天我们只围绕下图来介绍Grid布局相关概念

网格容器

Grid布局开始的地方，grid模块的承载体。外部看来就是个块也可能是inline-block块，容器内部一个格一个格的。和 Flex 布局一样，它也分容器属性和项目属性。

网格线

网格线有横线和纵线，纵横交错的线就将网格容器切割成了最小的单元单元格。网格线是有编号的，从数字1开始编号。上图中有6条横线和6条纵线。如果你喜欢也可以给线起名字，一根线还能有多个名字。

单元格

Grid Cell 图中绿色背景的块就是单元格，网格布局的最小计量单位，该容器一共有25个单元格。

网格轨道

两条相邻的网格线中间部分就是轨道，为啥要有轨道的概念呢?因为需要设定轨道的宽度，如果将宽高单独的设置到单元格上那很可能变成了瀑布流复杂程度嗖嗖地上升。再看看上图的浅蓝色和浅粉色轨道感受一下。

网格区域

网格线、单元格、和轨道存在的意义就是将容器划分出你所需要的区域Grid Area。区域是可包含多个单元格的一个整块，那么如何划分呢？两条横的网格线和两条纵的网格线交叉的部分就是区域了。将容器合理的划分出多个区域，那么布局目的也达到了。区域是可以重叠的，所以它是有 z-index。

今天的概念部分就介绍到这里。后续会详细的介绍 grid布局编程相关的知识。
ps: 图片摘抄于CSS Grid布局：什么是网格布局

姊妹篇 深入理解布局神器 flexbox

Grid，真的布局神器。Css在引入Flex布局和Grid布局两个模块后，才真正有了布局的概念。最初的table布局不知道是神马鬼，再到 float 满天飞，可能还要使用abosulte来实现页面的布局。总之，实现起来特别别扭，要时刻注意：我这么写会不会塌陷，会不会给后面的元素造成影响，尼玛为啥还串位了。笔者斗胆的称这些实现为布局trick，Flex和Grid才是真的布局。Flex负责一维布局，Grid负责二维布局，两个布局都非常强大，但是一个比一个难，属性多到想吐血，谁让人家牛逼是模块而不是属性呢。今天我们只围绕下图来介绍Grid布局相关概念。

网格容器

Grid布局开始的地方，grid模块的承载体。外部看来就是个块也可能是inline-block块，容器内部一个格一个格的。和 Flex 布局一样，它也分容器属性和项目属性。

网格线

网格线有横线和纵线，纵横交错的线就将网格容器切割成了最小的单元单元格

グリッド コンテナ

グリッド レイアウトが開始される場所、グリッド モジュールのキャリア。外側から見ると、これは block のように見えますが、inline-block のように見えます。コンテナの内部はグリッドが 1 つずつ続いています。 Flex レイアウトと同様に、これもコンテナーのプロパティとアイテムのプロパティに分かれています。 🎜

グリッド線

🎜 グリッド線には水平線と垂直線があり、交差する線によってグリッド コンテナが最小単位の cell に分割されます。グリッド線には、1 から始まる番号が付けられます。上の図には横線が6本、縦線が6本あります。必要に応じてスレッドに名前を付けることもでき、スレッドには複数の名前を付けることができます。 🎜🎜🎜🎜🎜

セル

🎜グリッドセル 写真の緑色の背景のブロックはセルで、グリッドレイアウトの最小単位です。コンテナには合計 25 個のセルがあります。 🎜🎜🎜🎜

グリッド トラック

🎜 2 つ目 真ん中隣接するグリッド線の一部がトラックになっているのですが、なぜトラックの概念があるのでしょうか? セルに幅と高さを個別に設定する必要があるためです。複雑さが急上昇しています。上の写真の水色と薄ピンクのトラックをもう一度見て、その感触を掴んでください。 🎜🎜🎜🎜

グリッドエリア

🎜グリッドの意味ライン、セル、トラックの存在を確認するには、コンテナを必要なグリッド領域に分割します。領域は複数のセルを含むことができるブロック全体です。では、それをどのように分割するのでしょうか? 2 本の水平グリッド線と 2 本の垂直グリッド線が交差する領域が面積です。コンテナが合理的に複数の領域に分割されていれば、レイアウトの目的は達成されます。領域は重複する可能性があるため、Z インデックスが付いています。 🎜🎜🎜🎜🎜今日のコンセプト部分は以上です。グリッドレイアウトプログラミングに関する知識については、後ほど詳しく紹介します。 🎜ps: 画像は CSS グリッド レイアウトからの抜粋です: グリッド レイアウトとは🎜

🎜コンパニオン記事では、レイアウト アーティファクト フレックスボックスについて詳しく説明しています🎜

🎜 🎜🎜グリッド、実際のレイアウトのアーティファクト。 Css に実際にレイアウトの概念が存在するようになったのは、Flex レイアウト モジュールとグリッド レイアウト モジュールが導入されてからです。最初のテーブル レイアウトは奇妙で、ページの layout を実装するには Abosulte を使用する必要があるかもしれません。つまり、実装するのは非常にぎこちないので、このように書くと破綻するのではないか、後続の要素に影響を与えるのではないか、なぜそれでも間違っているのか、という点に常に注意を払う必要があります。著者はこれらの実装をレイアウト トリックと大胆に呼んでいます。これが実際のレイアウトです。 Flex は 1 次元のレイアウトを担当し、Grid は 2 次元のレイアウトを担当します。どちらのレイアウトも非常に強力ですが、一方は他方よりも難しく、血を吐きたくなるような属性がたくさんあります。 属性 ではなく module が素晴らしいです。今日は、下の図に基づいて、グリッド レイアウトに関連する概念のみを紹介します。 🎜🎜🎜🎜

グリッドコンテナ

🎜グリッドレイアウト開始点はグリッド モジュールのキャリアです。外側から見ると、これは block のように見えますが、inline-block のように見えます。コンテナの内部はグリッドが 1 つずつ続いています。 Flex レイアウトと同様に、これもコンテナーのプロパティとアイテムのプロパティに分かれています。 🎜

グリッド線

🎜 グリッド線には水平線と垂直線があり、交差する線によってグリッド コンテナが最小単位の cell に分割されます。グリッド線には、1 から始まる番号が付けられます。上の図には横線が6本、縦線が6本あります。必要に応じてスレッドに名前を付けることもでき、スレッドには複数の名前を付けることができます。 🎜🎜🎜🎜🎜

セル

グリッドセル 写真の緑色の背景のブロックはセルで、グリッドレイアウトの最小単位です。このコンテナには合計 25 個のセルがあります。

グリッドトラック

隣接する 2 つのグリッド線の中央部分がトラックです。なぜなら、トラックの幅と高さを個別に設定する必要があるからです。ユニット グリッド上で滝になる可能性があるのは、複雑さが音を立てて上昇することです。上の写真の水色と薄ピンクのトラックをもう一度見て、その感触を掴んでください。

グリッドエリア

グリッド線、セル、トラックの存在の意味は、コンテナを必要なエリアに分割することです。領域は複数のセルを含むことができるブロック全体です。では、それをどのように分割するのでしょうか? 2 本の水平グリッド線と 2 本の垂直グリッド線が交差する領域が面積です。コンテナが合理的に複数の領域に分割されていれば、レイアウトの目的は達成されます。領域は重複する可能性があるため、Z インデックスが付いています。

上記の内容はCSSグリッドレイアウトGRIDチュートリアルです、お役に立てれば幸いです。

関連する推奨事項:

CSS グリッド レイアウト ガイド

CSS グリッド レイアウト モジュールの概要_html/css_WEB-ITnose

CSS グリッド レイアウトを 5 分で教えます

以上がCSS グリッド レイアウト GRID チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。