CSS 系列——Grid布局学习笔记-CFANZ编程社区

Grid 布局，就是网格布局。

简单的需求，垂直居中、水平居中等，有 Flex 布局。

网格布局，对应网页设计或者说是平面设计中的网格系统（Grid System）

设置一个经典的网页布局

/* html 代码 */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Grid layout</title>
</head>
<body>
  <div class="container">
    <header>Header</header>
    <main>Main</main>
    <aside>Aside</aside>
    <footer>Footer</footer>
  </div>
</body>
</html>

上面代码中基本上是只是将页面几个大的元素列出来，理论上在没有布局之前它们们是每个各占一行的普通的div盒子。但是结合网页设计中的设计，将 header 放到导航，footer放到页脚，中间是主要内容和边栏工具。

CSS 代码

.container {
  border: 1px solid red;
  height: 80vh;
  
  display: grid;
  grid-template-columns: 20% auto 20%;
  grid-template-rows: 50px auto 50px;
  grid-template-areas:
    'header header header'
    '.      main aside'
    'footer footer footer';
}

上面代码中，将容器元素设置为网格布局，并分三列(grid-template-columns)，宽度分别是 20%,auto,20%；分三行(grid-template-rows)，高度分别是50px, auto，50px,再分别设置每个元素的对应区域，就完成了一个经典的网页布局。

.container header {
  grid-area: header;
  background-color: red;
}

.container main {
  grid-area: main;
  background-color: blue;
}

.container aside {
  grid-area: aside;
  background-color: yellow;
}

.container footer {
  grid-area: footer;
  background-color: red;
}

分别将header,main,aside,footer,设置为对应的网格区域，就形成了一个经典的网页布局。

简单的网页布局

grid-template 的组合写法

其实grid布局还可以使用类似font和background的组合写法

<!DOCTYPE css>
.container {
  grid-template: 
    [row1-start] "header header header" 25px [row-end]
    [row2-start] "footer footer footer" 25px [row-end]
    / auto 50px auto;
}

上面的写法似乎比分开描述行列的写法更容易理解，和实际的图像更有对应性，代码从字面义上表示第一行的开始，第一行的结束，第一行中分别有哪些元素，以及行宽是多少，第二行同理；行的信息描述完之后，描述三个列的大小信息，分别是auto,50px,auto的大小。

因此上面的经典网页布局中，可以写成：

.container {
  grid-template:
    'header header header' 20%
    '. main aside'  auto
    'footer footer footer' 20%
    / 50px auto 50px ;
}

上面代码分别对应三行布局进行了 CSS 设置，更具有可读性，也更好和画面对应，设置完行之后设置列的信息。

还可以使用grid-column-gap或者grid-row-gap设置行列间的间距

.container {  
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

// grid 布局真tm复杂，流行不起来是有原因的。

Grid 布局练习知乎布局

知乎简易复刻版

主要用来练习 Grid 布局，切换 tab 可以用，搜索可以用。搜索所得内容版权等一切归原网站所有。