Grid网格布局
(我画了一个图,便于更好理解网格布局,有亿点点潦草)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/08be5dfceb435a5653ccdb41a15bff88.png)
row line: | 行线 |
---|
column line: | 列线 |
track: | 网格轨道,行与行或列与列之间的区域 |
gap: | 网格间距, |
cell: | 网格单元格 |
area: | 网格区域,由一个或多个单元格组成 |
一、属性
display: grid; | |
---|
display: inline-grid; | |
grid-template-columns: 80px 100px 90px; | 将容器设为三列,每列的列宽依次为80、100、90px |
grid-template-rows: 90px 90px 90px; | 容器设为三行,每列的行高是100px |
grid-template-areas: ‘a a a’ ‘b b b’ ‘c c c’; | 定义区域名称, |
grid-template | 上面三个属性的合并形式 |
grid | 多个属性合并(不建议使用) |
grid-row-gap: 10px; | 行与行的间隔 |
grid-column-gap: 20px; | 列与列的间隔 |
grid-gap | 上面两个属性的合并写法,也可以简写为gap |
justify-content | |
align-content | |
place-content | |
grid-template-columns: repeat(3, 100px); | 分为3列, 每列100px |
grid-template-columns: repeat(auto-fit, 200px); | 自适应, 每列200px |
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); | 自适应列数, 每列最小100px |
grid-template-columns: repeat(3, 1fr); | 3列,每列宽度相同 |
grid-template-columns: 100px 1fr 2fr; | 第一列100px,剩余空间按 1 : 2 的比例分给第二、第三列 |
grid-template-columns: 100px auto; | 第一列100px,第二列宽度为剩余空间 |
grid-template-columns: 1fr 1fr minmax(200px, 2fr); | 前两列宽度相同 ,最后一列是常规下是第一列的二倍,最小 200px |
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; | 设置网格线名为[c1]、[c2] |
grid-auto-columns: 50px 50px 50px; | 位置超出定义列数时的宽度, |
grid-auto-rows: 50px 50px 50px; | 位置超出定义行数时的高度 |
grid-auto-flow | 容器的子元素会排列顺序: row"先行后列"、 column"先列后行"、 row dense 和 column dense |
grid-column-start: 1; | 左边框所在的垂直网格线 |
grid-column-end: 2; | /右边框所在的垂直网格线 |
grid-row-start: 1; | 上边框所在的水平网格线 |
grid-row-end: 2; | 下边框所在的水平网格线 |
grid-column: 1 / 2; | grid-column-start和grid-column-end的合并简写形式 也可以结合网格线和span关键字 |
grid-row:1 / 2; | grid-row-start属性和grid-row-end的合并简写形式 也可以结合网格线和span关键字 |
grid-area: a | 指定项目放在哪一个区域 由容器上的grid-template-area划分区域 |
justify-self: start | end |
align-self: start | end |
place-self: ; | // align-self属性和justify-self属性的合并简写形式 |
二、举个栗子
1、
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d9efd4bc835ec26c05a6ccdf9f8fa617.png)
.container {
display: grid;
grid-template-columns: 150px auto 150px;
grid-gap: 1em;
}
header, footer {
grid-column: 1 / 4;
}
header,
aside,
article,
footer {
background: #1a4a65;
color:white;
display: grid;
place-content: center;
height: 17vh;
}
@media all and (max-width: 700px) {
aside,
article {
grid-column: 1 / 4;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>栗子</title>
</head>
<body>
<div class="container">
<header>
栗子1
</header>
<aside>
栗子2
</aside>
<article>
栗子3
</article>
<aside>
栗子4
</aside>
<footer>
栗子
</footer>
</div>
</body>
</html>
2、
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6f426af26988bb397fac4a67064e11cd.png)
.parent {
display: grid;
grid-template: 100px 100px 100px / 100px 100px 100px;
gap: 10px;
}
.item {
border: 1px solid #999;
}
.a{
grid-column: 1/3;
grid-row: 1/2;
background:yellow;
}
.b{
grid-column: 2/3;
grid-row: 2/3;
background:#758493;
}
.c{
grid-column: 3/4;
grid-row: 3/4;
background:#55fd11;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="parent">
<div class="item a">1</div>
<div class="item b">2</div>
<div class="item c">3</div>
</div>
</body>
</html>
3、
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a08946d275661a5e8933e64b3d4b6a7a.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/fa921cb2a8c6fdc6e2356c39dd50915d.png)
#container{
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-template-rows:100px 100px 100px;
grid-auto-rows: 50px 50px 50px;
justify-content: space-between;
gap: 10px;
}
.item{
background:yellow;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>自适应</title>
</head>
<body>
<div id="container">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
<div class="item">e</div>
<div class="item">f</div>
<div class="item">g</div>
<div class="item">h</div>
<div class="item">i</div>
<div class="item">g</div>
<div class="item">j</div>
<div class="item">k</div>
</div>
</body>
</html>