网格布局（补充中......）"/>
Grid网格布局（补充中......）
Grid网格布局
（我画了一个图，便于更好理解网格布局，有亿点点潦草）
| 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、
.container {display: grid;grid-template-columns: 150px auto 150px;/*第一列150px 第二列自动 第三列150px*/grid-gap: 1em;/*空隙*/
}
header, footer {grid-column: 1 / 4;/*是grid-column-start和grid-column-row的合并写法*/
}
header,
aside,
article,
footer {background: #1a4a65;color:white;display: grid;place-content: center;/*align-content和justify-content的合并写法*/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、
.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、
#container{display: grid;grid-template-columns: repeat(auto-fill, 100px);/*自适应， 每列100px*/grid-template-rows:100px 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>
更多推荐
Grid网格布局（补充中......）
发布评论