功能最强大的布局（兼容性不怎么好，未来会逐渐完善）
教程（来自CSS Tricks):
先了解：
容器：container ; 项目：items
语法
写法：如何让一个元素变成flex容器：
.container{
display: grid / inline-grid;
}
grid container有哪些属性、以下都是样式
行和列：grid-template-columns、grid-template-rows
设置行列范围：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
.container{
display: grid;
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 100px 300px 100px;
border: 1px solid red;
}
.a,.b,.c{
border: 1px solid blue;
}
.a{
grid-row-start: 1; **行从第一根线到第二根**
grid-row-end: 2;
grid-column-start: 1; **列从第一根线到第六根**
grid-column-end: 6;
}
.b{
grid-column-start: 1;
grid-column-end: 3;
}
.c{
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 3;
grid-column-end: 5;
}
效果如下：
取名
fr的用法
用法： js.jirengu.com/begenaboge/…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</div>
</body>
</html>
* {
margin:0;
padding:0;
box-sizing: border-box;
}
/*fr表示一份*/
.container {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
border: 1px solid red;
min-height: 400px;
}
.container > div {
border: 1px solid green;
}
.e {
grid-column-start: 2;
grid-column-end: 4;
}
效果如下：
平均布局：用fr来实现平均布局，就不在需要写负Margin了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</body>
</html>
* {
margin:0;
padding:0;
box-sizing: border-box;
}
.container {
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
border: 1px solid red;
min-height: 400px;
width: 800px;
grid-gap: 12px; **每个图片左右上下之间相隔**12px
}
.image {
width: 191px;
height: 191px;
border: 1px solid green;
}
效果如下：
grid-template-areas：分区
空隙gap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<header>header</header>
<aside>aside</aside>
<main>main</main>
<div class="ad">ad</div>
<footer>footer</footer>
</div>
</body>
</html>
* {
margin:0;
padding:0;
box-sizing: border-box;
}
.container {
display: grid;
min-height: 100vh; **最少高度100，用vh**
grid-template-rows: 60px auto 60px; **行像素：高**
grid-template-columns: 100px auto 100px; **列像素：宽**
grid-row-gap: 5px; **行空隙**
grid-column-gap: 10px; **列空隙**
grid-template-areas: **对应名分区**
"header header header"
"aside main ad"
"footer footer footer"
}
.container > *{
border: 1px solid red;
}
.container > header{
grid-area: header; **header的区域是header**
}
.container > aside{
grid-area: aside;
}
.container > main{
grid-area: main;
}
.container > .ad{
grid-area: ad;
}
.container > footer{
grid-area: footer;
}
效果如下：js.jirengu.com/bujuzogisa/…
做个Grid布局
示例：
效果如下：js.jirengu.com/morinogamu/…
开始：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="imagelist">
<div class="image bigimage"></div>
<div class="image smallimage"></div>
<div class="image smallimage"></div>
<div class="image smallimage"></div>
<div class="image middleimage"></div>
<div class="image middleimage"></div>
<div class="image middleimage"></div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.imagelist{
border: 1px solid red;
display: inline-grid;
grid-template-rows: 240px repeat(4, 120px); **用repeat来简写**
grid-template-columns: 250px 250px;
grid-template-areas: **对应名分区**
"big mid1"
"big mid2"
"sm1 mid2"
"sm2 mid3"
"sm3 mid3";
}
.imagelist > .image:first-child{ **first-child不能有空格**
grid-area: big; **字符串对应**
border: 1px solid red;
}
.imagelist > .image:nth-child(2){
grid-area: sm1;
border: 1px solid red;
}
.imagelist > .image:nth-child(3){
grid-area: sm2;
border: 1px solid red;
}
.imagelist > .image:nth-child(4){
grid-area: sm3;
border: 1px solid red;
}
.imagelist > .image:nth-child(5){
grid-area: mid1;
border: 1px solid red;
}
.imagelist > .image:nth-child(6){
grid-area: mid2;
border: 1px solid red;
}
.imagelist > .image:nth-child(7){
grid-area: mid3;
border: 1px solid red;
}
总结
1、用grid-template-areas 设计大致的布局
2、用grid-template-rows和grid-template-columns指定每一行每一列的高度和宽度
- grid-template-rows: 240px repeat(4, 120px);
- grid-template-columns: 250px 250px;
3、grid尤其适合用来做不规则布局
4、对于每一个小块，用grid-area和grid-template-areas 里布局的字符串对应
.demo > .image:first-child{
grid-area: big;
border: 1px solid red;
}
Grid小游戏
grid garden
