参考链接
display: gird
的元素。 这是所有 grid item 的直接父项。 在下面的例子中,.container
就是是 grid container<div class="container">
<div class="item item-1">div>
<div class="item item-2">div>
<div class="item item-3">div>
div>
.item
元素就是 grid item,但 .sub-item
不是<div class="container">
<div class="item">div>
<div class="item">
<p class="sub-item">p>
div>
<div class="item">div>
div>
grid
:生成一个块级(block-level)网格inline-grid
:生成一个行级(inline-level)网格.container{
display: grid | inline-grid;
}
.container {
grid-template-columns: ... | ...;
grid-template-rows: ... | ...;
}
.container{
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
.cotainer{
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];
}
.container{
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}
repeat()
来简化写法:.container{
grid-template-columns: [col-start] 20px [col-start] 20px [col-start] 20px 5%;
}
/*可简写以上代码为如下代码*/
.container{
grid-template-columns: repeat(3 [col-start] 20px) 5%;
}
fr
单元允许等分网格容器剩余可用空间来设置网络轨道的大小。例如,下面的代码会将每个网格项设置为网格容器宽度的三分之一:.container{
grid-complate-columns: 1fr 1fr 1fr;
}
fr
单元的值3等分:.container{
grid-complate-columns: 1fr 50px 1fr 1fr;
}
:由网格项grid-area
指定的网格区域名称.
点号:代表一个空的网格单元none
:不定义网格区域.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";
}
.
来声明单个空单元格。需要注意的是,不是在用这个语法命名单元格,而是在命名区域,使用这个语法时,实际上区域两端的网格线是自动命名的。 比如,如果网格区域的名称是foo,那么区域的起始的行网格线和列网格线名称是 foo-start,并且区域终点的行网格线和列网格线名称是 foo-end。 这意味着某些网格线可能有多个名称,比如上面的例子中最左边的一条网格线有三个名字:header-start,main-start 和 footer-start。grid-template-columns
、grid-template-rows
和grid-template-areas
的简写,例:.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";
}
/*以上代码可简写为以下代码*/
.container{
grid-template:
[row1-start] "header header header" 25px [row1-end];
[row2-start] "footer footer footer" 25px [row2-end];
/ auto 50px auto;
}
grid-template
不会重置隐式网格属性(grid-auto-columns
,grid-auto-rows
和grid-auto-flow
),而这可能在大多数情况是必要的,因此建议使用grid
属性来代替grid-template
,一个长度值,例:.container{
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-column-gap: 10px;
grid-rows-gap: 15px;
}
grid-row-gap
和 grid-column-gap
的简写.container{
grid-gap: ;
}
align-items
和 justify-items
的简写.container{
place-items: ;
}
align-content
和 justify-content
的简写.container{
place-content: ;
}
可以是一个长度值、一个百分比值或一个自由空间的一部分(fr
).container {
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px
}
grid-column
和 grid-row
来定位你的网格项目.item-a{
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b{
grid-column: 5 / 6;
grid-row: 2 / 3;
}
.item-b
开始于列网格线 5 并结束于在列网格线 6,但并未定义列网格线 5 或 6。因为引用了不存在的网格线,宽度为0的隐式轨道就会被创建用于填补间隙。可以使用 grid-auto-columns
和 grid-auto-rows
属性来指定这些隐式轨道的宽度:.container{
grid-auto-columns: 60px;
}
row
(默认值):告诉自动布局算法依次填充每行,根据需要添加新行column
:告诉自动布局算法依次填充每列,根据需要添加新列dense
:告诉自动布局算法,如果后面出现较小的 grid item,则尝试填充在网格中较早的空缺dense
只会更改网格项的可视顺序,并可能导致它们出现乱序,这对可访问性不利<section class="container">
<div class="item-a">item-adiv>
<div class="item-b">item-bdiv>
<div class="item-c">item-cdiv>
<div class="item-d">item-ddiv>
<div class="item-e">item-ediv>
section>
定义一个有5列2行的网格,并将grid-auto-flow
设置为row
:
.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: row;
}
把 grid item 放在网格上时,只设置其中两个固定的位置:
.item-a {
grid-column: 1;
grid-row: 1 / 3;
}
.item-e {
grid-column: 5;
grid-row: 1 / 3;
}
.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: column;
}
grid-template-rows
,grid-template-columns
,grid-template-areas
,grid-auto-rows
,grid-auto-columns
和grid-auto-flow
(注意:只能在单个网格声明中指定显式或隐式网格属性)。属性值:
none
:将所有子属性设置为其初始值
:与grid-template
简写的工作方式相同 [ [ / ] ]
:接受所有与grid-auto-flow
,grid-auto-rows
和grid-auto-columns
相同的值。 如果省略grid-auto-columns
,则将其设置为为grid-auto-rows
指定的值。 如果两者都被省略,则它们被设置为它们的初始值.container {
grid: 200px auto / 1fr auto 1fr;
}
.container {
grid-template-rows: 200px auto;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: none;
}
.container {
grid: column 1fr / auto;
}
.container {
grid-auto-flow: column;
grid-auto-rows: 1fr;
grid-auto-columns: auto;
}
grid-template-areas
、grid-template-rows
以及 grid-template-columns
,并将所有其他子属性设置为其初始值。.container {
grid:
[row1-start] "header header header" 1fr [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}
以上代码等价于:
.container {
grid-template-areas:
"header header header"
"footer footer footer";
grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
}
grid-column-start
/grid-row-start
属性表示grid item的网格线的起始位置,grid-column-end
/grid-row-end
属性表示网格项的网格线的终止位置,属性值有:
:可以是一个数字来指代相应编号的网格线,也可以使用名称指代相应命名的网格线span
:网格项将跨越指定数量的网格轨道span
:网格项将跨越一些轨道,直到碰到指定命名的网格线auto
:自动布局,或者自动跨越,或者跨越一个默认的轨道.item-a{
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start;
grid-row-end: 3;
}
.item-b{
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2;
grid-row-end: span 2;
}
grid-column-end
/ grid-row-end
,默认情况下,该网格项将跨越1个轨道z-index
来控制它们的堆叠顺序grid-column-start
+ grid-column-end
,和grid-row-start
+ grid-row-end
的简写形式,属性值为 /
,每个值的用法都和属性分开写时的用法一样,例:.item-c{
grid-column: 3 / span 2;
grid-row: third-line / 4;
}
grid-template-areas
属性创建模板时来进行引用。另外也可以做为 grid-row-start
+ grid-column-start
+ grid-row-end
+ grid-column-end
的简写形式。属性值有:
:对区域的命名
/
/
/
:可以是数字,也可以是网格线的名字/*给一个网格项命名*/
item-d{
grid-area: header;
}
/*简写*/
.item-d{
grid-area: 1 / col4-start / last-line / 6;
}
justify-items
/align-items
属性在网格容器上设置此行为align-self
和justify-self
的简写形式.container{
place-content: | auto;
}