css栅格布局GRID教程

Grid，真的布局神器。Css在引入Flex布局和Grid布局两个模块后，才真正有了布局的概念。最初的table布局不知道是神马鬼，再到 float 满天飞，可能还要使用abosulte来实现页面的布局。总之，实现起来特别别扭，要时刻注意：我这么写会不会塌陷，会不会给后面的元素造成影响，尼玛为啥还串位了。笔者斗胆的称这些实现为布局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 布局一样，它也分容器属性和项目属性。

网格线

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

单元格

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

网格轨道

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

网格区域

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

以上内容就是css栅格布局GRID教程，希望能帮助到大家。

相关推荐：

CSS Grid布局指南

CSS Grid布局模块简介_html/css_WEB-ITnose

五分钟教会你 CSS Grid 布局

以上是css栅格布局GRID教程的详细内容。更多信息请关注PHP中文网其他相关文章！