grid布局简单介绍
- CSS网格布局（又名“网格”）是一个二维的基于网格的布局系统，其目的只在于完全改变我们设计基于网格的用户界面的方式。 CSS一直用来布局网页，但一直都不完美。 一开始我们使用table 做布局，然后转向浮动、定位以及inline-block，但所有这些方法本质上都是 Hack 的方式，并且遗漏了很多重要的功能（例如垂直居中）。 Flexbox的出现在一定程度上解决了这个问题，但是它的目的是为了更简单的一维布局，而不是复杂的二维布局（Flexbox和Grid实际上一起工作得很好）。 只要我们一直在制作网站，我们就一直在为解决布局问题不断探索，
- 而Grid是第一个专门为解决布局问题而生的CSS模块。一开始你需要使用
display：grid把容器元素定义为一个网格，使用grid-template-columns和grid-template-rows设置列和行大小，然后使用grid-column和grid-row把它的子元素放入网格。 与flexbox类似，网格子元素的原始顺序不重要。 你的可以在 CSS 里以任意顺序放置它们，这使得使用媒体查询重新排列网格变得非常容易。 想象一下，我们需要定义整个页面的布局，然后为了适应不同的屏幕宽度完全重新排列，我们只需要几行CSS就能实现这个需求。 网格是有史以来最强大的CSS模块之一。
浏览器支持
浏览器兼容
基本概念
-
Grid Container:设置了display: gird的元素。 这是所有grid item的直接父项。 -
Grid Item:是Grid 容器的孩子（直接子元素）。 -
Grid Line:作为分界线组成网格结构。 它们既可以是垂直的（“column grid lines”），也可以是水平的（“row grid lines”），并位于行或列的任一侧。 -
Grid Track:两个相邻网格线之间的空间。 你可以把它们想象成网格的列或行。 -
Grid Cell:两个相邻的行和两个相邻的列网格线之间的空间。它是网格的一个“单元”。 -
Grid Area:四个网格线包围的总空间。 网格区域可以由任意数量的网格单元组成。
Grid 属性列表
- 父亲Grid Container 的全部属性
- display
作用：将元素定义为 grid contaienr，并为其内容建立新的网格格式化上下文(grid formatting context)。
.container {
display: grid | inline-grid | subgrid;
}
- grid-template-columns
- grid-template-rows
//使用以空格分隔的多个值来定义网格的列和行。这些值表示轨道大小(track size)，它们之间的空格代表表格线(grid line)。
.container {
grid-template-columns: ... | ...;
grid-template-rows: ... | ...;
}
//(如果未显示的给网格线命名)，轨道值之间仅仅有空格时，网格线会被自动分配数字名称：
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
//也可以给网格线指定确切的命名
.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
- grid-template-areas
作用：通过引用 grid-area属性指定的网格区域的名称来定义网格模板。 重复网格区域的名称导致内容扩展到这些单元格。 点号表示一个空单元格。 语法本身提供了网格结构的可视化。
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
//.代表单个空单元格
//声明中的每一行都需要有相同数量的单元格
上述代码创建的网格如下图
grid-template-areas
- grid-template
作用：在单个声明中定义 grid-template-rows、grid-template-columns、grid-template-areas 的简写。
.container {
grid-template:
[row1-start] "header header header" 25px [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}
//上述代码等价于
.container {
grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
grid-template-areas:
"header header header"
"footer footer footer";
}
-
grid-column-gap和grid-row-gap
作用：指定网格线的大小，你可以把它想象为设置列/行之间的间距的宽度。
.container {
grid-column-gap: ;
grid-row-gap: ;
}
//举个例子
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-column-gap: 10px;
grid-row-gap: 15px;
}
上述代码创立的网格如下图
网格线大小
- grid-gap
作用：grid-row-gap 和 grid-column-gap 的缩写
//基本语法
.container {
grid-gap: ;
}
//举个例子
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-gap: 10px 15px;
}
- justify-items
作用：沿着行轴对齐网格内的内容（与之对应的是 align-items, 即沿着列轴对齐），该值适用于容器内的所有的 grid items。
//基本语法
.container {
justify-items: start | end | center | stretch;
}
//举个例子
.container {
justify-items: start;
}
.container{
justify-items: end;
}
.container {
justify-items: center;
}
.container {
justify-items: stretch;
}
上述代码的四个例子
start
end
center
stretch
- align-items
作用：沿着列轴对齐grid item 里的内容（与之对应的是使用 justify-items 设置沿着行轴对齐），该值适用于容器内的所有 grid items。
//基本语法
.container {
align-items: start | end | center | stretch;
}
//举个例子
.container {
align-items: start;
}
.container {
align-items: end;
}
.container {
align-items: center;
}
.container {
align-items: stretch;
}
上述代码的四个例子
start
end
center
stretch
- justify-content
作用：有时，网格的总大小可能小于其网格容器的大小。如果你的所有 grid items 都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。此时，你可以设置网格容器内的网格的对齐方式。 此属性沿着行轴对齐网格（与之对应的是 align-content, 沿着列轴对齐）。
//基本语法
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
//举例子
.container {
justify-content: start;
}
.container {
justify-content: end;
}
.container {
justify-content: center;
}
.container {
justify-content: stretch;
}
.container {
justify-content: space-around;
}
.container {
justify-content: space-between;
}
.container {
justify-content: space-evenly;
}
上述代码的七个例子
start
end
center
stretch
space-around
space-between
space-evenly
- align-content
作用：有时，网格的总大小可能小于其网格容器的大小。如果你的所有 grid items 都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。此时，你可以设置网格容器内的网格的对齐方式。 此属性沿着列轴对齐网格（与之对应的是 justify-content, 即沿着行轴对齐）。
//基本语法
.container {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
//举例子
.container {
align-content: start;
}
.container {
align-content: end;
}
.container {
align-content: center;
}
.container {
align-content: stretch;
}
.container {
align-content: space-around;
}
.container {
align-content: space-between;
}
.container {
align-content: space-evenly;
}
上述代码的七个例子
start
end
center
stretch
space-around
space-between
space-evenly
-
grid-auto-columns和grid-auto-rows
作用：指定自动生成的网格轨道（又名隐式网格轨道）的大小。 隐式网格轨道在你显式的定位超出指定网格范围的行或列（使用 grid-template-rows/grid-template-columns）时被创建。
//基础语法
.container {
grid-auto-columns: ...;
grid-auto-rows: ...;
}
//举例说明
//代码1
.container {
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px
}
//代码2
.item-a {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
//代码3
.container {
grid-auto-columns: 60px;
}
代码1创建的网格
代码2创建的网格
代码3创建的网格
- grid-auto-flow
作用：如果你存在没有显示指明放置在网格上的 grid item，则自动放置算法会自动放置这些项目。 而该属性则用于控制自动布局算法的工作方式。 - grid
作用：在单个属性中设置所有以下属性的简写：grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-rows，grid-auto-columns和grid-auto-flow。 它同时也将sets grid-column-gap和grid-row-gap设置为它们的初始值，即使它们不能被此属性显示设置。
它也可用使用一个更复杂但相当方便的语法来一次设置所有内容。 你可以指定grid-template-areas、grid-template-rows以及grid-template-columns，并将所有其他子属性设置为其初始值。 你现在所做的是在其网格区域内，指定网格线名称和内联轨道大小。
儿子Grid Items 的全部属性
-
grid-column-startgrid-column-endgrid-row-startgrid-row-end
作用：使用特定的网格线确定 grid item 在网格内的位置。grid-column-start/grid-row-start 属性表示grid item的网格线的起始位置，grid-column-end/grid-row-end属性表示网格项的网格线的终止位置。
//基本语法
.item {
grid-column-start: | | span | span | auto
grid-column-end: | | span | span | auto
grid-row-start: | | span | span | auto
grid-row-end: | | span | span | auto
}
//例子1
.item-a {
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start
grid-row-end: 3
}
//例子2
.item-b {
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2
grid-row-end: span 2
}
例子1所建立的网格
例子2所建立的网格
-
grid-column和grid-row
作用：grid-column-start + grid-column-end, 和 grid-row-start + grid-row-end 的简写形式。
//基础语法
.item {
grid-column: / | / span ;
grid-row: / | / span ;
}
//举个例子
.item-c {
grid-column: 3 / span 2;
grid-row: third-line / 4;
}
简写模式下建立的网格
- grid-area
作用：给 grid item 进行命名以便于使用 grid-template-areas 属性创建模板时来进行引用。另外也可以做为 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写形式。
//基础语法
.item {
grid-area: | / / / ;
}
//举个例子
.item-d {
grid-area: header
}
.item-d {
grid-area: 1 / col4-start / last-line / 6
}
简写模式下创建的网格
- justify-self
作用：沿着行轴对齐grid item 里的内容（与之对应的是 align-self, 即沿列轴对齐）。 此属性对单个网格项内的内容生效。
.item-a {
justify-self: start;
}
.item-a {
justify-self: end;
}
.item-a {
justify-self: center;
}
.item-a {
justify-self: stretch;
}
start
end
center
stretch
- align-self
作用：沿着列轴对齐grid item 里的内容（与之对应的是 justify-self, 即沿行轴对齐）。 此属性对单个网格项内的内容生效。
//基本语法
.item {
align-self: start | end | center | stretch;
}
//几个例子
.item-a {
align-self: start;
}
.item-a {
align-self: end;
}
.item-a {
align-self: center;
}
.item-a {
align-self: stretch;
}
start
end
center
stretch