grid布局
什么是grid布局?
Flex布局是轴线布局,只能指定"项目"针对轴线的位置,可以看做是一维布局,Grid布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看做是二维布局,Grid布局比Flex布局强大
基本概念
0. 容器 --- 有容器属性
container (最外层的大盒子,盒子里面可以放很多东西)
详细参考图:
image.png
1.容器属性:
(1) /* columns:多少列 这里写了三列 /
/ grid布局开始: /
display: grid;
/ 1. columns:多少列 这里写了三列 具体的数值 /
/ grid-template-columns: 100px 100px 100px; */
/* 2. repeat(3,100px):第一个参数:代表要三列,每列是100px*/
/* grid-template-columns: repeat(3,100px);*/
/* 3. repeat(auto-fill,100px) auto-fill: 有时,单元格的大小是固定的,但是容器的大小不确定,这个属性就会自动填充*/
/* grid-template-columns: repeat(auto-fill,100px); */
/* 4. repeat(fr,100px) fr: 为了方便表示比例的关系,网格布局提供了fr关键字(fraction的缩写,意为片段)*/
/* 四列宽度平均分 */
/* grid-template-columns: repeat(4, 1fr); */
/*就像flex布局的 flex:1 flex:2 flex:3*/
/* grid-template-columns: 1fr 2fr 3fr; */
/* 5. minmax(),函数产生一个长度范围,表示长度就在这个范围之中,它接受两个参数,分别为最小值和最大值 */
/* grid-template-columns: 1fr minmax(150px,1fr); */
/* 6. auto,表示浏览器自己决定长度*/
/* grid-template-columns: 100px auto 100px; */
/* 7. 网格线,可以用方括号定义网格线名称, 方便以后的引用 */
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
(2) grid-template-rows
image.png
(3) grid-row-gap / grid-column-gap (一句话解释:item(项目) 相互之间的距离)
(4) grid-column-gap (一句话解释:item(项目) 相互之间的距离)
(5) grid-gap (3和4的简写)
注意:根据最新标准,上面的三个属性名的grid-前缀已经删除,grid-column-gap和grid-row-gap
写成了column-gap和row-gap,grid-gap写成gap
/* row-gap:行上面的距离 /
/ row-gap: 10px; */
/* column-gap:列上面的距离 /
/ column-gap:10px; /
/ gap:是(row-gap column-gap) 行和列上面综合距离 */
gap: 20px;
(6) grid-template-areas (一个区域由多个单元格组成,由你决定(具体使用,需要在项目属性里面设置))
区域不需要利用 " , " 则使用 " . " 表示
区域的命名会影响到网格线.每个区域的起始网格线,会自动命名为区域名-start,终止网格线自动命名为区域名-end
/* grid-template-area 划分区 /
/ grid-template-areas: "a b c"
"d e f"
"g h i"; /
/ grid-template-areas: "a a a"
"b b b"
"c c c"; */
grid-template-areas: "a . c"
"d . f"
"g . i";
(7) grid-auto-flow
划分网格以后,容器的子元素会按照顺序,自动放置每一个网格,默认的放置顺序是"先行后列",
即先填满第一行,再开始放入第二行(就是子元素的排放顺序)
grid-auto-flow: row;
image.png
grid-auto-flow:column;
image.png
grid-auto-flow:row dense;
image.png
(8) justify-items(水平方向) / align-items(垂直方向)
(9) align-items(垂直方向)
(10) place-content
设置单元格内容的水平和垂直的对齐方式
justify-items: start | end | center | stretch
place-items属性是align-items属性和justify-items属性的合并简写形式
place-items:<align-items><justify-items>
实际效果:
image.png
(11) justify-content(水平方向)
(12) align-content(垂直方向)
(13) place-content(11和12的简写)
设置整个内容区域的水平和垂直的对齐方式
image.png
(14) grid-auto-columns (用来设置多出来的项目的宽和高)
(15) grid-auto-rows
效果如下:
image.png
2. 项目 --- 有项目属性
详细参考图:
image.png
items
- grid-column-start
- grid-column-end
-
grid-column(1和2的简写)
image.png
grid-column-start:1 || grid-column-start: span 1
grid-column-end: 3; || grid-column-end: span 3;
-
grid-row-start
-
grid-row-end
-
grid-row(3和4的简写形式)
image.png
-
grid-area (指定项目放在哪一个区域)
image.png
更加简写方式:
image.png
-
justify-self
-
align-self
-
place-self(8和9的简写方式)
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 600px;
height: 600px;
border: 10px solid skyblue;
margin: 0 auto;
/* grid布局开始: */
display: grid;
/* 1. columns:多少列 这里写了三列 具体的数值 */
/* grid-template-columns: 100px 100px 100px; */
/* 2. repeat(3,100px):第一个参数:代表要三列,每列是100px*/
/* grid-template-columns: repeat(3,100px);*/
/* 3. repeat(auto-fill,100px) auto-fill: 有时,单元格的大小是固定的,但是容器的大小不确定,这个属性就会自动填充*/
/* grid-template-columns: repeat(auto-fill,100px); */
/* 4. repeat(fr,100px) fr: 为了方便表示比例的关系,网格布局提供了fr关键字(fraction的缩写,意为片段)*/
/* 四列宽度平均分 */
/* grid-template-columns: repeat(4, 1fr); */
/*就像flex布局的 flex:1 flex:2 flex:3*/
/* grid-template-columns: 1fr 2fr 3fr; */
/* 5. minmax(),函数产生一个长度范围,表示长度就在这个范围之中,它接受两个参数,分别为最小值和最大值 */
/* grid-template-columns: 1fr minmax(150px,1fr); */
/* 6. auto,表示浏览器自己决定长度*/
/* grid-template-columns: 100px auto 100px; */
/* 7. 网格线,可以用方括号定义网格线名称, 方便以后的引用 */
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
/* rows:多少行 这里写了四行 */
grid-template-rows: 100px 100px 100px 100px;
/* row-gap:行上面的距离 */
/* row-gap: 10px; */
/* column-gap:列上面的距离 */
/* column-gap:10px; */
/* gap:是(row-gap column-gap) 行和列上面综合距离 */
gap: 20px;
/* grid-template-area 划分区 */
/* grid-template-areas: "a b c"
"d e f"
"g h i"; */
grid-template-areas: "a a a"
"b b b"
"c c c";
/* grid-template-areas: "a . c""d . f""g . i"; */
/* 划分网格以后,容器的子元素会按照顺序,自动放置每一个网格,默认的放置顺序是"先行后列",
即先填满第一行,再开始放入第二行(就是子元素的排放顺序) */
/* grid-auto-flow: row; */
/* grid-auto-flow: column; */
grid-auto-flow: row dense;
/* 对齐方式 */
/* justify-items:center;
align-items: center; */
/* place-items (justify-items)(align-items)集合 */
/* place-items: center center; */
/* 设置整个内容区域的水平和垂直的对齐方式 */
/* justify-content: center;
align-content: center; */
/* place-content (justify-content)(align-content)集合*/
}
.item {
font-size: 20px;
background-color: red;
color: #fff;
}
.item-1 {
background-color: red;
/*列的开始 和列的结束 */
/* grid-column-start: 1;
grid-column-end: 3; || grid-column-end: span 3;
*/
/* 简写方式 第一个开始 第三个结束*/
/* grid-column: 1 / 3; */
/* grid-area (指定项目放在哪一个区域) */
grid-area: b;
}
.item-2 {
background-color: orange;
}
.item-3 {
background-color: burlywood;
}
.item-4 {
background-color: pink;
}
.item-5 {
background-color: salmon;
}
.item-6 {
background-color: aqua;
}
.item-7 {
background-color: red;
}
.item-8 {
background-color: lightpink;
}
.item-9 {
background-color: purple;
}
.item-10 {
background-color: orangered;
}
</style>
</head>
<body>
<div class="main">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
<div class="item item-10">10</div>
</div>
</body>
</html>
