CSS3-grid布局实践

CSS3 Grid Layout是一个新的模块，这个模块主要定义一个二维网格布局系统，用来优化用户界面设计。在这个网格布局模块中，网格容器的所有子元素可以在一个灵活的或者固定的了布局网格中定位到任意槽中。

其实详细的说明，网上有大把的文章，我只记实践，上代码。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CSS3-grid布局最佳实践</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>

<body>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .container {
      width: 100%;
      height: 100%;
      background-color: #f5f5f5;
      color: #ffffff;
      font-size: 24px;
      display: grid;
      grid-template-columns: 180px auto;
      /* 列 */
      grid-template-rows: 60px auto 60px;
      /* 行 */
      grid-column-gap: 15px;
      /* 列之间的空隙 */
      grid-row-gap: 0;
      /* 行之间的空隙 */
      /**
      * 上面的参数形成的网格如下所示
      * |-----180px-----|-------------auto-------------|
      * |               |                              |
      * |               |                             60px
      * |               |                              |
      * |---------------|------------------------------|
      * |               |                              |
      * |               |                              |
      * |               |                              |
      * |               |                             auto
      * |               |                              |
      * |               |                              |
      * |               |                              |
      * |---------------|------------------------------|
      * |               |                              |
      * |               |                             60px
      * |               |                              |
      * |---------------|------------------------------|
      */
    }

    .header {
      grid-column: 1 / 3;
      /* 列的第一根线到第三根线 就是占满整个列宽 */
      grid-row: 1 / 2;
      /* 行的第一根线到第二根线 就是占满第一个网格的高 也可以简写成1 */
      background-color: olive;
    }

    .aside {
      grid-column: 1 / 2;
      grid-row: 2 / 4;
      background-color: yellowgreen;
    }

    .article {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
      background-color: olivedrab;
    }

    .footer {
      grid-column: 2 / 3;
      grid-row: 3 / 4;
      background-color: aquamarine;
    }

    /* 这里开始与布局无关 */
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* PS：如果只需要article部分出现滚动条，overflow:auto,需要计算高度，并显式的赋值才生效。2019/08/07 */
  </style>
  <div class="container">
    <header class="item header">Header</header>
    <aside class="item aside">Aside</aside>
    <article class="item article">
      Article
    </article>
    <footer class="item footer">Footer</footer>
  </div>
</body>

</html>

查看演示代码

Totonoo.com