Grid布局
2022-09-02 本文已影响0人
我家有个王胖胖
1.网格布局（Grid）是强大的CSS布局方案，它将网页划分为一个个的网格，通过任意组合这些网格来实现不同需求的布局方式。
Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。
基本概念：
容器（container）——有容器属性
项目（items）——有项目属性
行（row)
列（column）
间距（gap) ——单元格之间的距离
区域（area）—— 自己划分每个单元格占据的区域
内容（content)
————————————————
基本概念.png
1.容器属性
grid-template-columns:设置每一列的宽度，可以是具体值，也可以是百分比
repeat():第一个参数是重复的次数，第二个参数是所要重复的值
<!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>
.container{
display: grid;
grid-template-columns: 200px 200px 200px;
//grid-template-columns: repate(3,200px);//重复
//grid-template-columns:repeat(3,auto);//等分
//grid-template-columns:1fr 2fr 1fr;//比例
}
.item{
padding: 15px;
border: 1px solid red;
text-align: center;
height: 200px;
line-height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
image.png
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>Document</title>
<style>
.container{
display: grid;
grid-template-rows: 1fr 2fr 3fr;
grid-template-columns: repeat(3,auto)
}
.item{
padding: 15px;
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
</div>
</body>
</html>
grid-template-rows.png
2.grid-column-start grid-column-end
grid-row-start grid-row-end (item占据多行多列)
<!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>
.container{
display: grid;
grid-template-rows: 1fr 2fr 3fr;
grid-template-columns: repeat(3,auto)
}
.item{
padding: 15px;
border: 1px solid red;
text-align: center;
}
.item:first-child{
/* column左边框网格线的第一条 */
grid-column-start:1;
/* column右边框网格线的第三条 */
grid-column-end: 3;
/* row上边框网格线第一条 */
grid-row-start: 1;
/* row下边框网格线第三条 */
grid-row-end: 3;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
</div>
</body>
</html>
image.png
简写方式:span
grid-columns grid-row
<!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>
.container {
display: grid;
grid-template-rows: 1fr 2fr 3fr;
grid-template-columns: repeat(3, auto);
/* 未设置grid-template-rows 的默认值的单元格高度 */
grid-auto-rows: 1fr;
}
.item {
padding: 15px;
border: 1px solid red;
text-align: center;
}
.item:first-child {
/* 1:左边框第一个网格线开始 span 2 横跨两个单元格 */
grid-column: 1 / span 2;
/* 1:上边框第一个网格线开始 span 2 竖直方向横跨2个单元格*/
grid-row: 1 / span 2;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
</div>
</body>
</html>
简写方式.png
3.minmax函数:函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值(可实现类似响应式效果)
<!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>
.container {
display: grid;
grid-template-rows: 1fr 2fr 3fr;
/* 第三列宽度最小100，最大200 */
grid-template-columns: auto auto minmax(100px,200px);
/* 未设置grid-template-rows 的默认值的单元格高度 */
grid-auto-rows: 1fr;
}
.item {
padding: 15px;
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
</div>
</body>
</html>
minmax.png
minmax-mobile.png
4.grid-template-areas:自定义网格布局
<!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>
.grid {
display: grid;
grid-template-areas:
"header header header"
"content content sidebar"
"box-1 box-2 box-3"
"footer footer footer";
}
.header {
grid-area: header;
text-align: center;
}
.content {
grid-area: content;
}
.sidebar {
grid-area: sidebar;
}
.box-1 {
grid-area: box-1;
}
.box-2 {
grid-area: box-2;
}
.box-3 {
grid-area: box-3;
}
.footer {
grid-area: footer;
text-align: center;
}
</style>
</head>
<body>
<div class="grid">
<header class="header">
我是header
</header>
<section class="content">
<h3>Content</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat nam
libero consectetur itaque perferendis laborum veritatis reiciendis
incidunt repellendus laboriosam aspernatur, eos vero. Reprehenderit
aliquam optio, quam repellat officia recusandae!
</p>
</section>
<aside class="sidebar">
<h3>联系我们</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et nemo aut
consequuntur sapiente magni quam amet quis eligendi quisquam placeat,
nostrum vero porro molestiae laboriosam, odit repellat ad dolores
magnam?
</p>
</aside>
<div class="box-1">
<h3>标题一</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus
quod veritatis porro dolore ratione reprehenderit hic consequuntur
laborum maxime, velit quam omnis veniam et, odio ab quia repellendus
repudiandae! Amet!
</p>
</div>
<div class="box-2">
<h3>标题二</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus
quod veritatis porro dolore ratione reprehenderit hic consequuntur
laborum maxime, velit quam omnis veniam et, odio ab quia repellendus
repudiandae! Amet!
</p>
</div>
<div class="box-3">
<h3>标题三</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus
quod veritatis porro dolore ratione reprehenderit hic consequuntur
laborum maxime, velit quam omnis veniam et, odio ab quia repellendus
repudiandae! Amet!
</p>
</div>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
grid-area.png
