摘要：网格线网格线有横线和纵线，纵横交错的线就将网格容器切割成了最小的单元单元格。单元格图中绿色背景的块就是单元格，网格布局的最小计量单位，该容器一共有个单元格。
下一篇 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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112819.html
摘要：有开始肯定就有结束，，是用来控制区域结束位置。还有的值都可以取负数的，负数意味着从后往前数。等价于表示横跨几个单元格。也一样的是和的简写。 概念篇学完了概念好像没啥用。今天我们来使用Grid完成两个简单布局。 声明容器 display: grid;或display: inline-grid;或display: subgrid;。grid 和 inline-grid 很好理解就是块级网格...
摘要：如果你定义的内容包含重复部分，你可以使用标记去组织它。另外，也有一个比较复杂但是方便的语法指定三个属性，示例如下与以下代码是等价的因为无法隐式重置属性，与。 简介 CSS 栅格布局 (亦称 Grid)，是一个基于栅格的二维布局系统，旨在彻底改变基于网格用户界面的设计。CSS 一直以来并没有把布局做的足够好。刚开始，我们使用 tables，后来是 floats，positioning 和...
摘要：下面，本文将介绍几个比较有代表性的栅格样式库，讲述它们的简要原理和用法正确的打开方式。虽然栅格样式库很棒，但它们并不是响应式设计的全部。但在这个过程中，理解各类栅格样式库的工作原理，正确使用它们，才能做出稳定可靠的页面结构。 说到栅格系统（grid system），你也许见过这样的概念： showImg(https://segmentfault.com/img/bVmQnO); 像这样...
摘要：页面自适应自适应是指页面内容自动适应屏幕大小，实现自适应的方法有多种简易场景实现自适应浮动页面居中元素宽度不写固定而设置百分比自动匹配大小。后面详细介绍栅格系统的实现方式。当页面宽度发生改变时，每个栅格的大小会自动调整以适应页面尺寸。 页面自适应 自适应是指页面内容自动适应屏幕大小，实现自适应的方法有多种： 1.简易场景实现自适应：浮动、页面居中、元素宽度不写固定而设置百分比自动匹配大...
阅读 544·2023-04-25 15:42
阅读 3422·2021-11-02 14:38
阅读 2681·2021-09-30 09:48
阅读 1192·2021-09-23 11:22
阅读 3236·2021-09-06 15:02
阅读 3084·2021-09-04 16:41
阅读 455·2021-09-02 15:41
阅读 1867·2021-08-26 14:13
