<!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>