网格布局是最强大的 CSS 布局方案，它将网页划分成一个个网格，可以任意组合不同的网格做出各种各样的布局。
基本概念： display: grid; --- 创建网格容器。所有直接子元素都成为 -- grid items(网格项目)
属性：grid-template-columns -- 列宽，grid-template-rows -- 行高。
列宽：grid-template-columns:1fr 1fr 1fr; 如果设置 n 个值都一样的话可以用 repeat 函数，参数 1 是重复的次数，参数 2 是重复值。
行高：grid-template-rows: 3fr; 如果没有指定行高就会执行 grid-auto-rows。
<!-- 列宽 -->
<style>
.container {
display: grid;
/* 列宽 auto：平均分布 */
/* grid-template-columns: 1fr 1fr 1fr; */
/* grid-template-columns: 200px 200px 200px; */
/* 如果设置n个值都一样的话可以用 repeat() 函数，参数1是重复的次数，参数2是重复值 */
/* fr可以用来等比例分配 */
grid-template-columns: repeat(3, auto);
}
.item {
padding: 3rem;
border: #ccc solid 1px;
background: #f4f4f4;
font-size: 1.3rem;
font-weight: bold;
text-align: center;
}
main {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 1.5rem;
}
</style>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<main>
<section>
<h3>欢迎来到欧青拉少</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati dolorum cum sint ipsum ratione fugiat
dignissimos officia minus itaque hic.</p>
</section>
<aside>
<h3>Hello World</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati dolorum cum sint ipsum ratione fugiat
dignissimos officia minus itaque hic.</p>
</aside>
</main>
</body>
<!-- 行高 -->
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 行高 */
grid-template-rows: 1fr 2fr 3fr;
/* 没有指定行高的就会执行 grid-auto-rows */
grid-auto-rows: 3fr;
}
.item {
padding: 3rem;
border: #ccc solid 1px;
background: #f4f4f4;
font-size: 1.3rem;
font-weight: bold;
text-align: center;
}
</style>
<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>
</body>
跨行跨列：grid-column-start：1; --- 左边框所在的网格线，grid-column-end: 4; --- 右边框所在的网格线。grid-row-start: 1; --- 上边框所在的网格线， grid-row-end: 3; --- 下边框所在的网格线。
跨行：grid-column: 1 / span 3; --- 左边框在第一个垂直网格线，并且横跨三个单元格。
跨列：grid-row: 1 / span 2; --- 上边框在第一个水平网格线，并且横跨两个单元格。span 表示横跨的单元格。
<style>
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.item {
padding: 3rem;
border: 1px solid #ccc;
background: #f4f4f4;
font-size: 1.3rem;
font-weight: bold;
text-align: center;
}
.item:first-child {
/* 左边框所在的网格线 */
/* grid-column-start: 1; */
/* 右边框所在的网格线 */
/* grid-column-end: 4; */
/* 上边框所在的网格线 */
/* grid-row-start: 1; */
/* 下边框所在的网格线 */
/* grid-row-end: 3; */
/* 跨列 */
/* 左边框在第一个垂直网格线，并且横跨三个单元格 */
grid-column: 1 / span 3;
/* 跨行 */
/* 左边框在第一个水平网格线，并且横跨两个单元格 */
/* span表示横跨的单元格 */
grid-row: 1 / span 2;
}
.item:nth-child(9) {
grid-column: 1 / span 3;
grid-row: 3 / span 2;
}
</style>
<body>
<div class="grid">
<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 class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</body>
minmax(100px，auto)：如果内容高度大于 100px 那么整个 div 的高度由内容撑开，如果小于 100px 那么 div 的高度就默认为 100px。
<style>
.item {
padding: 3rem;
border: 1px solid #ccc;
background: #f4f4f4;
font-size: 1.3rem;
font-weight: bold;
text-align: center;
}
.grid {
display: grid;
/* 每个item的列宽不小于300px不大于1fr，如果视口宽度不能放下所有的item项的时候就进行换行，而多余的空间又平均分配给每个子元素 */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
</style>
<body>
<div class="grid">
<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>
</body>
网格模板：grid-template-areas。
<style>
.wrapper {
display: grid;
grid-template-areas:
'header header header'
'content content sidebar'
'box-1 box-2 box-3'
'footer footer footer'
;
grid-gap: 1rem;
}
.header {
grid-area: header;
}
.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;
}
.header,
.content,
.sidebar,
.box-1,
.box-2,
.box-3,
.footer {
border: 1px solid cyan;
}
@media (max-width:500px) {
.wrapper {
grid-template-areas:
'header'
'content'
'sidebar'
'box-1'
'box-2'
'box-3'
'footer'
;
}
}
</style>
<body>
<div class="wrapper">
<header class="header">
<h1>米修在线</h1>
</header>
<section class="content">
<h3>Hello World</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium reiciendis placeat dicta omnis suscipit
quidem delectus, assumenda eligendi aut quibusdam numquam eius ad earum vel beatae ex quasi accusamus, nobis
quod repudiandae expedita. Assumenda alias et laudantium, quos saepe ipsa!
</p>
</section>
<aside class="sidebar">
<h3>联系我们</h3>
<ul>
<li>米修在线</li>
<li>中国</li>
<li>米修在线@163.com</li>
<li>12345678</li>
</ul>
</aside>
<div class="box-1">
<h3>标题一</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil alias fuga nisi excepturi ea nostrum corrupti
consectetur aspernatur maxime facere quas, quaerat eligendi eos ducimus totam inventore? Eos, iste qui?
</p>
</div>
<div class="box-2">
<h3>标题二</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil alias fuga nisi excepturi ea nostrum corrupti
consectetur aspernatur maxime facere quas, quaerat eligendi eos ducimus totam inventore? Eos, iste qui?
</p>
</div>
<div class="box-3">
<h3>标题三</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil alias fuga nisi excepturi ea nostrum corrupti
consectetur aspernatur maxime facere quas, quaerat eligendi eos ducimus totam inventore? Eos, iste qui?
</p>
</div>
<footer class="footer">
<p>Coopyright © 2021</p>
</footer>
</div>
</body>
