<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 参考自 ：https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html */
/* Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 */
/* Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。
Grid 布局远比 Flex 布局强大。 */
/* 基本概念：
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。
容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。行和列的交叉区域，称为"单元格"（cell）。正常情况下，n行和m列会产生n x m个单元格。
划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线
*/
* {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
height: auto;
}
.container {
min-height: 100vh;
height: auto;
/* display: grid指定一个容器采用网格布局。 */
display: grid;
/* grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。 */
/* grid-template-columns: repeat(3, 33.33%); grid-template-columns: repeat(2, 100px 20px 80px); */
/* 有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
grid-template-columns: repeat(auto-fill, 100px); */
/* fr单位被用于在一系列长度值中分配剩余空间，如果已指定其它部分，则剩下的空间根据各自的数字按比例分配。 grid-template-columns: 150px 1fr 2fr; */
/* minmax(min, max)：用来定义一个范围，最小值为min，最大值为max。grid-template-columns: 40px 50px minmax(50px, 2fr) 1fr 40px; */
grid-template-columns: 280px auto;
grid-template-rows: 50px auto 25px;
/* grid-template-areas属性用于定义区域，如果某些区域不需要利用，则使用"点"（.）表示 */
grid-template-areas:
"logo header"
"sidebar main"
". footer";
/* rid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。 */
grid-column-gap: 10px;
grid-row-gap: 10px;
/* 等同于 */
/* grid-gap: 10px 10px; */
/* grid-gap: 10px; */
/* 划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列" ，row dense和column dense这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。*/
/* grid-auto-flow: row | column | row dense | column dense */
grid-auto-flow: column;
/* justify-items属性设置单元格内容的水平位置，align-items属性设置单元格内容的垂直位置 */
/* align-items: start | end | center | stretch; stretch：拉伸，占满单元格的整个宽度（默认值）*/
/* justify-items: start | end | center | stretch; stretch：拉伸，占满单元格的整个宽度（默认值） */
justify-items: stretch;
align-items: stretch;
/* justify-content属性是整个内容区域在容器里面的水平位置，align-content属性是整个内容区域的垂直位置。 */
/* justify-content: start | end | center | stretch | space-around | space-between | space-evenly; */
/* align-content: start | end | center | stretch | space-around | space-between | space-evenly; */
justify-content: stretch;
align-content: stretch;
/* grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。 */
}
.container > div {
border: 1px solid silver;
}
.logo {
/* grid-area属性指定项目放在哪一个区域。或者 grid-area: <row-start> / <column-start> / <row-end> / <column-end>; */
grid-area: logo;
/* justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。 */
/* align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。 */
}
.header {
grid-area: header;
}
.sidebar {
/* grid-column-start属性：左边框所在的垂直网格线 */
/* grid-column-end属性：右边框所在的垂直网格线 */
/* grid-row-start属性：上边框所在的水平网格线 */
/* grid-row-end属性：下边框所在的水平网格线 */
/* grid-column-start: 1; grid-column-end: 2;等同于 */
grid-column: 1 / 2;
/* grid-row-start: 2; grid-row-end: 4;等同于 */
/* grid-row: 2 / span 2; */
grid-row: 2 / 4;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">logo</div>
<div class="header">header</div>
<div class="sidebar">sidebar</div>
<div class="main">main</div>
<div class="footer">footer</div>
</div>
</body>
</html>
标签：单元格,column,布局,grid,template,属性,css,row From： https://www.cnblogs.com/caroline2016/p/17582674.html