父元素容器设置栅格:
内部子元素会按顺序从左往右依次排列在栅格内
声明栅格容器
display: grid; 父元素得有高宽
display:inline-grid; 行内栅格
绘制每格
方式一(手动设置):
grid-template-rows:npx npx npx ...; 设置行方向每格高度:
grid-template-columns:npx npx npx ...; 设置列方向每格宽度:
方式二(重复设置):
grid-template-rows:repeat(格数,每格大小);
grid-template-rows:repeat(格数,大小1 大小2); 绘制 格数*2个的每两个高度分别为大小1,大小2的格子
方式三(设置大小自动填充格子格数):
grid-template-rows:repeat(auto-fill,每格大小)
方式四(每格按份设置,自动填充格子高宽)
grid-template-rows:repeat(格数,1fr); 类似flex:1
方式五(控制每格波动范围)
grid-template-rows:repeat(格数,minmax(npx,n1px); 设置后,当父元素容器变化时,每行高度会在这个范围内波动,最少为npx,最大为n1px,之间会自动填充高度
栅格间距
row-gap:npx;
column-gap:npx;
gap:行间距 列间距
有内容的栅格自动填满空的栅格:
grid-auto-flow:row dense
设置栅格整体对齐方式(非栅格内容,及当每行/每列栅格的高/宽小于父容器高/宽,生效)---即栅格在水平/竖直方向未撑满父元素
水平:justify-content:start/end/center/space-around/stretch/...
竖直:align-content:start/end/center/space-around/...
简写:place-content:竖直对齐方式 水平对齐方式;
设置栅格内的内容对齐方式(即当每行/每列栅格的栅格等于父元素高/宽时生效)---即栅格在水平/竖直方向撑满父元素
水平:justify-items:start/end/center/space-around/stretch/...; 子元素内容会在所在栅格内对齐
竖直:align-items:start/end/center/space-around/...;
简写:place-item:竖直对齐方式 水平对齐方式;
设置单个栅格内的内容对齐方式
子元素选择器中
水平:justify-self:justify-content:start/end/center/space-around/stretch/...
竖直:align-self:justify-content:start/end/center/space-around/stretch/...
简写:place-self:竖直对齐方式 水平对齐方式;
子元素设置
**线指定占据栅格**
方式一(根据线来指定) 如3*3的格子,n为1表示第一行/列的线,n为4表示最后一列/最后一行
grid-row-start:n; 从第n行的线开始
grid-row-end:n; 到第n行的线结束
grid-column-start:n; 从第n列的线开始
grid-column-end: n; 到第n列的线结束
方式二(指定线名)
在父元素画格子时指定
grid-template-rows:[第一行开始名]npx[第一行结束名 第二行开始名] npx[第二行结束名 第三行开始名] npx ...;
子元素指定栅格:
grid-row-start:行名称; 从第n行的线开始
grid-row-end:行名称; 到第n行的线结束
grid-column-start:列名称; 从第n列的线开始
grid-column-end: 列名称; 到第n列的线结束
方式三(重复命名)
在父元素画格子时指定
grid-template-rows:repeat(格数,[ 行开始名称]大小[ 行结束名称 ])
子元素指定栅格
grid-row-start:行开始名称 n; 从第n行的线开始
grid-row-end:行结束名称 n; 到第n行的线结束
grid-column-start:列开始名称 n; 从第n列的线开始
grid-column-end: 列结束名称 n; 到第n列的线结束
方式四(偏移量)
grid-row-start:n; 从第n行的线开始
grid-row-end: span n; 从第n行开始,偏移n个，不指定开始线,默认从1开始偏移
grid-column-start:n; 从第n列的线开始
grid-column-end: span n; 从第n列开始,偏移n个，不指定开始线,默认从1开始偏移
方式五(简写)----推荐----
支持名称和数字
grid-row:n/n; 从第n行的线开始到第n行结束
grid-column: n/n; 到第n列的线结束到第n列结束
grid-row:n/span n; 从第n行的线开始,水平偏移n个
**区域指定占据栅格**
方式一(指定线)
grid-area:行开始线n/列开始线n/行结束线n/列结束线n
方式二(指定线名)
在父元素画格子时指定
grid-template-rows:repeat(格数,[ 行名称]大小)
子元素指定栅格
grid-area:行名称 开始n/列名称 开始n/行名称 结束n/列名称 结束n
方式三(指定区域名)
在父元素画栅格结束后
grid-template-areas:"名称1 名称2 " "名称3 名称4"
" "内的名称分别代表水平方向的格子,另一行的格子在后面的" "内,若一行内的名称相同,则同一个名字代表所在的多个格子
子元素
子元素的容器标签可以换成所定义的名称,在子元素的选择器中
grid-area:名称; 及代表子元素所占的栅格为指定名称的栅格
方式四(指定区域名后再使用线):
在父元素画栅格结束后
grid-template-areas:"名称1 名称2 " "名称3 名称4"
子元素指定占据栅格
grid-area:对应名称-start/对面名称-statr/对应名称-end/对应名称-end
分别为:对应名称的栅格的行起始线/对应名称的栅格的列起始线/对应名称的栅格的行结束线/对应名称的栅格的列结束线
方式五(占位符指定局部区域名,控制部分栅格)
在父元素画栅格结束后
grid-template-areas:". . " "名称3 名称4"; 一个'.'点就代表占位一个栅格
子元素就可使用名称占据需要的栅格
在子元素的选择器中:grid-area:名称;
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./index.css">
<style>
.box{
width: 300px;
height: 300px;
border: solid 1px red;
display: grid;
row-gap: 10px;
column-gap: 10px;
/* grid-template-rows:repeat(3,1fr); */
grid-template-rows: repeat(3,100px);
/* grid-template-rows:100px 100px 100px; */
grid-template-columns: repeat(3,100px);
/* grid-template-columns: 100px 100px 100px; */
}
.box>div{
/* width: 100px;
height: 100px; */
background-color: blueviolet;
border: solid 1px blueviolet;
background-clip: content-box;
padding: 10px;
box-sizing: border-box;
}
div:first-child{
/* grid-row-start:1;
grid-row-end:2;
grid-column-start: 1;
grid-column-end: 4; */
grid-area:1/1/4/4
}
</style>
</head>
<body>
<div class='box'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
</body>
</html>