摘要：一概述网格布局是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。接下来，我们从网格容器到网格项的各个基本属性来介绍网格布局。例网格项目按行排列，网格项目宽度由自身宽度决定。这时，浏览器会自动生成多余的网格，以便放置项目。
一、概述
CSS网格布局（Grid）是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。
首先来介绍几个概念:
想象一个三行三列的布局，网格线就是构成网格所有的线条，三行三列的布局每行就会有4条网格线。
网格轨道就是相邻两条平行的网格线之间的部分。
和flex布局一样，他会有父容器和子项目，在这儿我们称为网格容器和网格项。
接下来，我们从网格容器到网格项的各个基本属性来介绍网格布局。
二、 网格容器
将属性 display 值设为 grid 或 inline-grid 就创建了一个网格容器，所有容器直接子结点自动成为网格项目。
例1：
网格项目按行排列，网格项目占用整个容器的宽度。
例2：
网格项目按行排列，网格项目宽度由自身宽度决定。
三、显示网格
属性grid-template-rows和grid-template-columns
容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
例3：
属性grid-template-rows用于定义行的尺寸，即轨道尺寸。轨道尺寸可以是任何非负的长度值（px，%，em，等）
网格项目1的行高是50px，网格项目2的行高是100px。
因为只定义了两个行高，网格项目3和4的行高取决于其本身的高度。
例4：
类似于行的定义，属性grid-template-columns用于定义列的尺寸。
因为定义中只有三列，所以项目4，5，6排在新的一行; 并因为它们位于第1，2，3列的轨道上，所以其宽度等于定义中第1，2，3列轨道的宽度。
网格项目的第1列，第2列，第3列的宽度分别是 90px, 50px 和 120px 。
四、网格项目跨越行列
网格项目默认都占用一行和一列，但可以使用前一节中定位项目的属性来指定项目跨越多行或多列。
例5：
通过grid-column-start和grid-column-end属性值的设置，使该网格项目跨越多列。
五、justify-content 属性，align-content 属性
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。
这两个属性的写法完全相同，都可以取下面这些值。（下面的图都以justify-content属性为例，align-content属性的图完全一样，只是将水平方向改成垂直方向。）
start - 对齐容器的起始边框。
end - 对齐容器的结束边框。
center - 容器内部居中。
stretch - 项目大小没有指定时，拉伸占据整个网格容器。
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
六、grid-auto-columns 属性，grid-auto-rows 属性
有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。
grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。
希望我的文章能够对您有所帮助
欢迎大家滴滴我：rgz987
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114718.html
摘要：一概述网格布局是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。接下来，我们从网格容器到网格项的各个基本属性来介绍网格布局。例网格项目按行排列，网格项目宽度由自身宽度决定。这时，浏览器会自动生成多余的网格，以便放置项目。 一、概述 CSS网格布局（Grid）是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。 首先来介绍几个概念: 想象一个三行三列的布局，网格...
摘要：简言网格布局是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。例用属性和定义网格，同时定义网格线名称。例一组区域名称要放在单引号或双引号内，每一个名称之间以空格分隔。例本例中，是通过隐式网 简言 CSS网格布局（Grid）是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局 一直不够理想。包括table布局、浮动、定位及内联块等方式，从本质...
摘要：重复网格区域的名称导致内容跨越这些单元格。中间一排将由两个区域，一个是空单元格，一个区域组成。你可以使用任意数量的相邻的点来声明单个空单元格。只要这些点之间没有空隙隔开，他们就代表一个单独的单元格。 CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用...
摘要：的个值表示三列，相应的数值表示列宽即都为。尝试其它布局把移到右边实现后的效果使用点来创建空白的网格单元格实现效果真正的响应式布局假设你想在移动设备上查看的是标题旁边是菜单。 常用Grid布局属性介绍 下面从一个简单Grid布局例子说起。 CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items...
摘要：最精彩的地方在于所有的响应特性被添加到了一行代码中。基础响应单位栅格布局带来了一个全新的值单位，单位通常简写为，它允许你根据需要将容器拆分为多个块。 原文地址: https://medium.com/free-code-...原文作者: Per Harald Borgen 翻译作者: hanxiansen showImg(https://segmentfault.com/img/re...
阅读 659·2021-10-09 09:41
阅读 638·2019-08-30 15:53
阅读 1071·2019-08-30 15:53
阅读 1205·2019-08-30 11:01
阅读 1560·2019-08-29 17:31
阅读 982·2019-08-29 14:05
阅读 1708·2019-08-29 12:49
阅读 407·2019-08-28 18:17
