[TOC]
### 1. 小米布局
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin: 0;padding: 0}
.conter{
display: grid;
/* grid-template-rows: repeat(3,310px);
grid-template-columns: repeat(4,310px); */
grid: repeat(3,310px)/repeat(4,310px);
width: 1240px;
margin: 0 auto;
}
.conter div{
border: 1px solid #333;
}
.item1 {
grid-row: 1;
grid-column: 1/3;
}
.item3 {
grid-column: 4;
grid-row: 1/4;
display: inherit;
grid-template-rows: 390px auto 260px;
}
.item4{
display: grid;
}
.item3-1,.item3-2,.item3-3{
display: inherit;
padding: 30px 20px;
}
.item3-2 div{
border: none ;
border-bottom: 1px solid #333;
}
</style>
</head>
<body>
<div class="conter">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">
<div class="item3-1">
<div class="item3-1-1"></div>
<div class="item3-1-2"></div>
<div class="item3-1-3"></div>
</div>
<div class="item3-2">
<div class="item3-1-1"></div>
<div class="item3-1-2"></div>
<div class="item3-1-3"></div>
<div class="item3-1-1"></div>
<div class="item3-1-2"></div>
<div class="item3-1-3"></div>
</div>
<div class="item3-3">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
</div>
<div class="item4">
<div class="item4-1"></div>
<div class="item4-2"></div>
</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>
~~~
### 2. 简易布局
~~~
<style>
*{margin: 0;padding: 0;}
.conter{
display: grid;
grid-template-rows: repeat(3,300px);
grid-template-columns: repeat(4,300px);
width: 1200px;
margin: 0 auto;
}
.conter div{
border: 1px solid #333;
}
.item1{
grid-column: 1/3;
}
.item3{
grid-row: 1/4;
grid-column: 4;
grid-template-rows: 350px auto 250px;
}
.item4,.item3{
display: grid
}
</style>
</head>
<body>
<div class="conter">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">
<div></div>
<div></div>
<div></div>
</div>
<div class="item4">
<div></div>
<div></div>
</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>
~~~
### 3. 字母排版
~~~
<style>
*{margin: 0;padding: 0;}
.parent{
display: grid;
grid-template-rows: 100px 500px 100px;
grid-template-columns: repeat(10 ,1fr);
grid-template-areas:
"t t t t t t t t t t "
"l r r r r r r r r r "
"b b b b b b b b b b "
}
@media (max-width:640px){
.parent{
grid-template-areas:
"t t t t t l l l l l "
"r r r r r r r r r r "
"b b b b b b b b b b "
}
}
.top{
grid-area: t;
}
.left{
grid-area: l;
}
.right{
grid-area: r;
}
.bottom{
grid-area: b;
}
.parent div{
text-align: center;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="parent">
<div class="top">top</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="bottom">bottom</div>
</div>
~~~
### 4. 图片响应
~~~
<style>
*{margin: 0;padding: 0}
.conter{
display: grid;
grid-template-rows: repeat(2 ,200px);
/* grid-template-columns: repeat(4,300px); */
/* grid-template-columns: repeat(auto-fit,200px); */
grid-template-columns: repeat(auto-fit,minmax(200px, 1fr));
grid-gap: 5px;
}
img{
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="conter">
<div><img src="images/现代.png" alt=""></div>
<div><img src="images/现代.png" alt=""></div>
<div><img src="images/现代.png" alt=""></div>
<div><img src="images/现代.png" alt=""></div>
<div><img src="images/现代.png" alt=""></div>
<div><img src="images/现代.png" alt=""></div>
<div><img src="images/现代.png" alt=""></div>
<div><img src="images/现代.png" alt=""></div>
</div>
</body>
~~~
