Grid布局是什么
Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。
Grid布局与Flex布局的区别
Flex是一维布局，只能处理一个维度上的布局，一行或者是一列。
Grid布局是二维布局 ，将容器划分成了“行”和“列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。
Grid 布局远比 flex 布局强大!
基本概念
- 容器(container)
- 项目(items)
- 行(row)
- 列(column)
- 间距(gap)
- 区域(area)
- 内容(content)
容器属性
grid-template-columnsgrid-template-rowsrow-gapcolumn-gapgap(3和4的简写)grid-template-areasgrid-auto-flowjustify-itemsalign-itemsplace-items(8和9的简写)justify-contentalign-contentplace-content(11和12的简写)grid-auto-columnsgrid-auto-rows
函数与关键字
grid-template-columns(rows)
grid-template-columns:
设置每一列的宽度，可以是具体的值，也可以是百分比
grid-template-rows:
设置每一行的高度，可以是具体的值，也可以是百分比
<!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>Grid</title>
</head>
<body>
<!-- 容器 container -->
<div class="container">
<!-- 项目 item -->
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
</div>
</body>
</html>
<style>
* {
margin: 0;
padding: 0;
}
.container {
border: solid 10px skyblue;
height: 400px;
width: 400px;
margin: 50px auto;
font-size: 50px;
line-height: 100px;
text-align: center;
/* 设置容器布局为grid布局 */
display: grid;
/* 指定每一行的高度 每个值中间用空格隔开 */
grid-template-rows: 100px 100px 100px;
/* 指定每一列的宽度 每个值中间用空格隔开 */
grid-template-columns: 100px 100px 100px;
}
.item1 {
background-color: aqua;
}
.item2 {
background-color: aquamarine;
}
.item3 {
background-color: palevioletred;
}
.item4 {
background-color: peru;
}
.item5 {
background-color: sandybrown;
}
.item6 {
background-color: springgreen;
}
.item7 {
background-color: turquoise;
}
.item8 {
background-color: yellowgreen;
}
.item9 {
background-color: yellow;
}
</style>
Grid的函数与关键字
repeat函数
可以简化重复的值。该函数接受两个参数，第一个参数为重复的次数，第二个参数是所要重复的值
grid-template-rows: 100px 100px 100px;
/* 可以写为 */
grid-template-rows: repeat(3, 100px);
auto-fill关键字
表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。有时单元格的大小是固定的，但是容器的大小不确定，想响应式的排满容器，就可以用auto-fill自动填充
.container {
border: solid 10px rgb(255, 0, 0);
margin: 50px auto;
font-size: 50px;
line-height: 100px;
text-align: center;
display: grid;
/* 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素 */
grid-template-columns: repeat(auto-fill, 200px);
grid-template-rows: 200px 200px;
}
fr关键字
为了方便表示比例关系，网格布局提供了fr关键字(fraction缩写，意为"片段”), 可以理解为份数，把剩余空间分为多少份
.container {
border: solid 10px rgb(255, 0, 0);
margin: 50px auto;
font-size: 50px;
line-height: 100px;
text-align: center;
display: grid;
/* 列平均分为3份 */
grid-template-columns: repeat(3, 1fr);
/* 行平均分为4份 */
grid-template-rows: repeat(4, 1fr);
}
/* 表示第一列宽度为100px, 剩余空间分为3份，第二列1份，第三列2份 */
grid-template-columns: 100px 1fr 2fr;
minmax函数
minmax函数传入一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值
.container {
border: solid 10px rgb(255, 0, 0);
margin: 50px auto;
font-size: 50px;
line-height: 100px;
text-align: center;
display: grid;
/* 表示第一列宽200px 第二列宽最小为200px 最大为占满剩余空间 */
grid-template-columns: 200px minmax(200px, 1fr);
}
auto关键字
auto关键字 表示由浏览器自己决定大小
.container {
/* 表示中间列由浏览器自动调节 */
grid-template-columns: 200px auto 200px;
}
row(column)-gap gap
row-gap
设置每个item(项目)之间的行间距; row-gap: 10px 表示每个item行间距是 10px
column-gap
设置每个item(项目)之间的列间距; column-gap: 20px 表示每个item列间距是 20px
gap
以上两个属性的简写形式; gap: 10px 20px 表示每个item行间距是 10px, 列间距是 20px
.container {
border: solid 10px rgb(255, 0, 0);
margin: 50px auto;
font-size: 50px;
line-height: 100px;
text-align: center;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3. 1fr);
/* 行间距10px */
row-gap: 10px;
/* 列间距20px */
column-gap: 20px;
}
.container {
/* 行间距10px */
row-gap: 10px;
/* 列间距20px */
column-gap: 20px;
/* 等同于 */
gap: 10px 20px;
}
grid-template-areas
grid-template-areas用于定义区域，一个区域由一个或者多个单元格组成
般这个属性跟项目属性 grid-area 一起使用，在这里一起介绍。
grid-area 用于指定项目放在哪一个区域
<!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>area</title>
<style>
* {
margin: 0;
padding: 0;
}
.item-h { grid-area: header; }
.item-s { grid-area: sidebar; }
.item-c { grid-area: content; }
.item-r { grid-area: right; }
.item-f { grid-area: footer; }
.container {
display: grid;
background-color: #2196F3;
padding: 10px;
gap: 10px;
grid-template-areas:
"header header header header header header"
"sidebar content content content content right"
"sidebar content content content content right"
"sidebar footer footer footer footer footer";
}
.container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<!-- 容器 container -->
<div class="container">
<!-- 项目 item -->
<div class="item-h">页头</div>
<div class="item-s">侧边</div>
<div class="item-c">内容</div>
<div class="item-r">右侧</div>
<div class="item-f">页脚</div>
</div>
</body>
</html>
可以用小数点(.)表示这一块不需要使用
grid-auto-flow
grid-auto-flow指定在网格中被自动布局的元素怎样排列。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行。
grid-auto-flow: row - 先行后列（默认值）
.container {
border: solid 10px rgb(255, 0, 0);
margin: 50px auto;
font-size: 50px;
line-height: 100px;
text-align: center;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-auto-flow: row;
}
grid-auto-flow: column - 先列后行
grid-auto-flow: column;
grid-auto-flow: row dense - 表示换行时留下的空间可以由下面的元素填补上去
.container {
border: solid 10px rgb(255, 0, 0);
width: 500px;
margin: 50px auto;
font-size: 50px;
line-height: 100px;
text-align: center;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
grid-auto-flow: row;
}
.item2 {
background-color: aquamarine;
/* column span 2表示列跨2个单元格 */
grid-column: span 2;
/* row span 2表示行跨2个单元格 */
grid-row: span 2;
}
.item4 {
background-color: peru;
grid-column: span 2;
}
这时候就可以利用 dense 来填补空白区域
grid-auto-flow: row dense;
justify(align)-items place-items
justify-items设置单元格内容的水平对齐方式
align-items设置单元格内容的垂直对齐方式
justify-items: start | end | center | stretch(默认值，占满整个单元格);
align-items: start | end | center | stretch(默认值，占满整个单元格);
.container {
border: solid 10px rgb(255, 0, 0);
width: 400px;
height: 400px;
margin: 50px auto;
font-size: 50px;
line-height: 100px;
text-align: center;
display: grid;
gap: 10px;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
justify-items: start;
}
justify-items: end;
align-items同理，place-items为这两个属性的缩写
place-items: start end - 先行后列
justify(align)-content place-content
justify-content 设置整个内容区域在容器里面的水平位置
align-content 设置整个内容区域在容器里面的水平位置
place-content 前两个属性的简写
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 项目与项目的间隔相等，项目与容器边框之间也是同样的间隔距离
justify-content等同于flex布局中的justify-content
align-content等同于flex布局中的align-item
space-evenly示例
.container {
border: solid 10px rgb(255, 0, 0);
width: 400px;
height: 400px;
margin: 50px auto;
font-size: 50px;
line-height: 100px;
text-align: center;
display: grid;
gap: 10px;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
justify-content: space-evenly;
align-content: space-evenly;
/* 上面两行等同于 */
/* place-content: space-evenly; */
}
grid-auto-columns(rows)
grid-auto-columns 用于设置多出项目的列宽
grid-auto-rows 用于设置多出项目的行高
比如设置一个3X3的网格，但却有10个项目，所以会多出一个，这时候就可以用这属性设置多出的这一个项目。
.container {
border: solid 10px rgb(255, 0, 0);
width: 400px;
height: 400px;
margin: 50px auto;
font-size: 30px;
line-height: 50px;
text-align: center;
display: grid;
gap: 10px;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-auto-rows: 60px;
}
项目属性
grid-column-startgrid-column-endgrid-column(1和2的简写形式)grid-row-startgrid-row-endgrid-row(4和5的简写形式)grid-areajustify-selfalign-selfplace-self(8和9的简写形式)
grid-column(row)-start(end) / grid-column(row)
可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置
grid-column-start 项目左边框所在的垂直网格线
grid-column-end 项目右边框所在的垂直网格线
grid-column: start / end 以上两个属性简写形式
grid-row-start 项目上边框所在的垂直网格线
grid-row-end 项目下边框所在的垂直网格线
grid-row: start / end 以上两个属性简写形式
start代表从哪根网格线开始, end表示到哪根网格线结束
值里面使用的span代表占用几个单元格
.container {
border: solid 10px rgb(255, 0, 0);
width: 400px;
height: 500px;
margin: 50px auto;
font-size: 30px;
line-height: 50px;
text-align: center;
padding: 10px;
display: grid;
gap: 10px;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
justify-content: space-evenly;
}
.item1 {
background-color: aqua;
grid-column-start: 1;
grid-column-end: 3;
}
.item2 {
background-color: aquamarine;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: span 3;
}
.item3 {
background-color: palevioletred;
grid-column: 1 / 3;
grid-row: 2 / 4;
}
grid-area
grid-area 指定项目放在哪一个区域
.container {
border: solid 10px rgb(255, 0, 0);
width: 400px;
height: 400px;
margin: 50px auto;
font-size: 30px;
line-height: 50px;
text-align: center;
padding: 10px;
display: grid;
gap: 10px;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-template-areas: "a a a" "b b b" "c c c";
justify-content: space-evenly;
}
.item1 {
background-color: aqua;
grid-area: b;
}
grid-area也可以作为grid-row-start / grid-column-start / grid-row-end / grid-column-end 的缩写形式
.container {
border: solid 10px rgb(255, 0, 0);
width: 400px;
height: 500px;
margin: 50px auto;
font-size: 30px;
line-height: 50px;
text-align: center;
padding: 10px;
display: grid;
gap: 10px;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
justify-content: space-evenly;
}
.item1 {
background-color: aqua;
/* 代表第一行开始 第四行结束 与 第二列开始 第四列结束 */
grid-area: 1 / 2 / 4 / 4
}
justify(align)-self / place-self
justify-self 设置单元格内容的水平位置，跟 justify-items的用法完全一致，但只作用于单个项目
align-self 设置单元格内容的垂直位置，跟align-items的用法完全一致，也是只作用于单个项目
place-self 为上面两个属性的简写形式
.container {
border: solid 10px rgb(255, 0, 0);
width: 500px;
height: 400px;
margin: 50px auto;
font-size: 30px;
line-height: 50px;
text-align: center;
padding: 10px;
display: grid;
gap: 10px;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
justify-content: space-evenly;
}
.item1 {
background-color: aqua;
width: 60%;
height: 60%;
justify-self: end;
align-self: center;
}
.item5 {
background-color: sandybrown;
width: 60%;
height: 60%;
place-self: center;
}
1283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
