文章目录
- 前言
- 一、容器和项目
- 二、容器属性
- 一. display属性
- 二. grid-template-columns属性 和 grid-template-rows属性
- 三. column-gap属性和row-gap属性
- 四. gap属性
- 五. grid-template-areas属性
- 五. grid-auto-flow属性
- 六. justify-items属性 和align-items属性
- 七. place-items属性
- 八. justify-content 属性,align-content 属性,place-content 属性
- place-content属性
- 八. grid-auto-columns 和 grid-auto-rows属性
- 三、项目属性
前言
Grid布局时将容器划分成 “行” 和 “列”
产生单元格, 然后指定 项目所在 的单元格
一、容器和项目
容器和项目
-
采用网格布局的区域 , 称为 “容器”.
-
容器内部采用网格定位的子元素, 称为 “项目”
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
-
最外层的 div 元素就是容器, 内层的三个 div 元素就是项目.
-
项目只能是容器的顶层子元素,不包含项目的子元素,比如上面代码的
元素就不是项目。Grid 布局只对项目生效。
行和列
- 容器里面的水平区域称为 “行”
- 垂直区域称为 “列”.
单元格
- 行和列的交叉区域, 称为 “单元格”
网格线
- 划分网格的线,称为"网格线"(grid line)。水平网格线划分出行,垂直网格线划分出列
二、容器属性
- Grid布局的属性分成两类
- 一类定义在容器上面, 称为容器属性.
- 另一类定义在项目上面, 称为项目属性.
一. display属性
display: grid;
指定一个容器采用网格布局.- 语法 :
div {
display: grid;
}
- 默认情况下, 容器元素都是块级元素, 也可以设为行内元素.
div {
display: inline-grid;
}
二. grid-template-columns属性 和 grid-template-rows属性
想要多少行或者列, 就填写相应属性值的个数, 不填写自动分配
grid-template-columns
属性 定义每一列的列宽.grid-template-rows
属性 定义每一行的行宽.
基本使用 :
div {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
案例 :
<!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>
.main {
display: grid;
width: 600px;
height: 600px;
/* 代表三列 */
grid-template-columns: 100px 100px 100px;
/* 代表四行 */
grid-template-rows: 100px 100px 100px 100px;
border: 2px solid red;
}
.item {
text-align: center;
line-height: 100px;
font-size: 50px;
}
.item-1 {
background-color: red;
}
.item-2 {
background-color: pink;
}
.item-3 {
background-color: blue;
}
.item-4 {
background-color: skyblue;
}
.item-5 {
background-color: black;
}
.item-6 {
background-color: darkkhaki;
}
.item-7 {
background-color: yellow;
}
.item-8 {
background-color: yellowgreen;
}
.item-9 {
background-color: darkred;
}
.item-10 {
background-color: deepskyblue;
}
</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>
1. repeat()
- 有时候, 重复写同样的值非常麻烦, 尤其网格很多时, 可以使用repeat()函数
- repeat() 接受两个参数, 第一个是重复的次数, 第二个参数是所要重复的值.
.box {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(4, 100px);
}
- repeat() 也重复某种模式.
.box {
display: grid;
grid-template-columns: repeat(2, 100px 20px 80px);
grid-template-rows: repeat(3, 100px);
}
- 上面的代码定义了6列3行, 相当于创建了两次 宽度分别为100px 20px 80px的列.
2. auto-fill关键字
- 有时, 单元格的大小是固定的, 但是容器的大小不确定
- 如果希望每一行容纳尽可能多的单元格, 这时可以使用 auto-fill 关键字表示自动填充.
div {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-template-rows : repeat(3, 100px);
}
- 上面的代码表示每列宽度100px, 每行宽度100px, 创建三行.
- 然后自动填充, 直到容器不能放置更多的列.
3. fr关键字
- 为了方便表示比例关系, 网格布局提供了fr关键字
- 如果两列的宽度分别为 1fr 和 2fr, 表示后者是前者的两倍.
div {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(2, 100px);
}
4. minmax()
- 函数产生一个长度范围, 表示长度就在这个范围之中
- 它接受两个参数, 分别为最小值和最大值.
div {
display: grid;
/* 代表两列 */
grid-template-columns: 1fr minmax(150px, 200px);
/* 代表三行 */
grid-template-rows: repeat(3, 100px);
}
上面代码表示两列三行 第一列占父盒子宽度的一半,
5. auto
- 表示由浏览器自己决定长度
.main {
display: grid;
width: 600px;
height: 600px;
grid-template-columns: 100px auto 100px;
grid-template-rows: repeat(4, 100px);
border: 2px solid red;
}
上面代码表示中间的宽度由浏览器决定, 自动分配
6. 网格线
可以用方括号定义网格线名称
.main {
/* 代表两列 */
grid-template-columns: [c1] 100px [c2] auto [c3] 100px [c4];
/* 代表四行 */
grid-template-rows: repeat(4, 100px);
}
三. column-gap属性和row-gap属性
表示的是item相互之间的距离. 写在容器上
.main {
display: grid;
grid-template-columns: [c1]100px [c2]auto [c3]100px [c4];
grid-template-rows: repeat(4, 100px);
/* 列间距 */
column-gap: 20px;
/* 行间距 */
row-gap: 20px;
border: 2px solid red;
}
四. gap属性
gap 属性有两个属性,
写一个表示行间距和列间距各有指定的间距.
写两个, 第一个表示行间距, 第二个表示列间距.
五. grid-template-areas属性
一个区域由单个或多个单元格组成, 需要在项目属性里面设置
.main {
display: grid;
/* 代表三列 */
grid-template-columns: [c1]100px [c2]auto [c3]100px [c4];
/* 代表四行 */
grid-template-rows: repeat(4, 100px);
/* 行间距20 列间距30px */
gap: 20px 30px;
/* 分区 */
grid-template-areas: "header header header"
"main main sidebar"
"footer footer footer";
border: 2px solid red;
}
上面代码中,顶部是页眉区域header,底部是页脚区域footer,中间部分则为main和sidebar。
区域不需要利用, 则使用点 (.) 表示
.main {
display: grid;
/* 代表三列 */
grid-template-columns: [c1]100px [c2]auto [c3]100px [c4];
/* 代表四行 */
grid-template-rows: repeat(4, 100px);
/* 行间距20 列间距30px */
gap: 20px 30px;
grid-template-areas: 'a . c''d . f''g . i''j';
border: 2px solid red;
}
五. grid-auto-flow属性
划分网格以后, 容器的子元素会按照属性, 自动放置在每一个网格,
默认顺序是先行后列
可以用grid-auto-flow属性修改默认顺序
默认
grid-auto-flow: column;
修改排放顺序
grid-auto-flow
属性除了设置成row
和column
,还可以设成row dense
和column dense
。这两个值主要用于,某些项目指定位置以后,剩下的项目怎么自动放置。
六. justify-items属性 和align-items属性
设置单元格内容的水平和垂直的对齐方式
justify-items
表示 水平方向
align-items
表示垂直方向
语法
justify-items: start | end | center | stretch;
属性
start
:对齐单元格的起始边缘。end
:对齐单元格的结束边缘。center
:单元格内部居中。stretch
:拉伸,占满单元格的整个宽度(默认值)。
示范
align-items: start;
justify-items: start;
七. place-items属性
place-items属性是align-items属性和justify-items属性的合并简写形式。
语法
place-items: <align-items> <justify-items>;
八. justify-content 属性,align-content 属性,place-content 属性
justify-content
属性是整个内容区域在容器里面的水平位置(左中右)align-content
属性是整个内容区域的垂直位置(上中下)。
语法
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
属性
start
- 对齐容器的起始边框。end
- 对齐容器的结束边框。center
- 容器内部居中。stretch
- 项目大小没有指定时,拉伸占据整个网格容器。space-around
- 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。space-between
- 项目与项目的间隔相等,项目与容器边框之间没有间隔。space-evenly
- 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。
place-content属性
place-content属性是align-content属性和justify-content属性的合并简写形式。
语法
place-content: <align-content> <justify-content>
八. grid-auto-columns 和 grid-auto-rows属性
用来设置多出来的项目宽和高
.main {
display: grid;
grid-template-columns: [c1]100px [c2]100px [c3]100px [c4];
grid-template-rows: repeat(3, 100px);
grid-auto-rows: 50px;
}
三、项目属性
项目属性定义在项目上面
一. grid-column-start 属性,grid-column-end 属性,grid-row-start 属性,grid-row-end 属性
grid-column-start
属性:左边框所在的垂直网格线grid-column-end
属性:右边框所在的垂直网格线grid-row-start
属性:上边框所在的水平网格线grid-row-end
属性:下边框所在的水平网格线
二. grid-column 和 grid-row 属性
grid-column
:grid-column-start
属性和grid-column-end
属性 的简写形式grid-row
:grid-row-start
属性和grid-row-end
属性 的简写形式.
.item-1 {
background-color: red;
grid-column: 1 / 3;
}
上述代码表示1号项目的左边框是第一根垂直网格线. 右边框是第三根垂直网络线.
三. span关键字
这四个属性的值还可以使用span关键字,表示"跨越"
.item-1 {
grid-column-start: span 2;
}
四. grid-area
指定项目放在哪一个区域
语法
grid-area: b;
用法
.item-1 {
background-color: red;
grid-column: span 2;
grid-area: b;
}
grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式,直接指定项目的位置。
语法
.item {
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
.item-1 {
grid-area: 1/1/3/3;
}
五. justify-self 属性,align-self 属性,place-self 属性
justify-self
属性设置单元格内容的水平位置(左中右),跟justify-items
属性的用法完全一致,但只作用于单个项目。
align-self
属性设置单元格内容的垂直位置(上中下),跟align-items
属性的用法完全一致,也是只作用于单个项目。
语法
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
属性
start
:对齐单元格的起始边缘。end
:对齐单元格的结束边缘。center
:单元格内部居中。stretch
:拉伸,占满单元格的整个宽度(默认值)。
place-self
place-self属性是align-self属性和justify-self属性的合并简写形式。
place-self: <align-self> <justify-self>;