使用 Grid 进行常见布局

朱雀 2022-01-18 23:47 277阅读 0赞

`grid` 布局是W3C提出的一个二维布局系统，通过 `display: grid` 来设置使用，对于以前一些复杂的布局能够得到更简单的解决。本篇文章通过几个布局来对对 `grid` 布局进行一个简单的了解。目前，`grid` 仅仅只有 `Edge`使用前缀能够支持，为了更好地体验，可以使用 Chrome 浏览器，在 `chrome://flags` 开启 `#enable-experimental-web-platform-features` 选项。 另外，更多的例子可以前往 [Grid by examples][], 更多的用法可以前往 [W3 Specification][],也可以前往 [A Complete Guide to Grid][] 以及 [译文][Link 1]

> 2019年2月注：目前 Grid 已被所有主流浏览器所支持

[布局代码示例][Link 2]

原文链接见: [山月的博客][Link 3]

## 左右固定中间自适应 ##

以前，这需要使用 `negative margin`，`float`, `position` 解决，圣杯布局是一个比较好的解决方案。后来，`flex`横空出世，使用 `flex-grow` 与 `flex-basis` 完成自适应布局。`grid` 布局相比 `flex` 布局更加简单，只需要在 `container` 上设置 `grid-template-columns: 100px auto 100px`。

.container {
      display: grid;
      grid-template-columns: 100px auto 200px;
    }
    复制代码

## 三等分 ##

以前的方法可以设置 `float: left; width: 33.33333333`，使用 `flex` 可以设置 `flex-basis: 33.33333333`。在 grid 中只需要设置 `grid-template-columns: 1fr 1fr 1fr`

.container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      height: 100px;
      background-color: #feb;
    }
    复制代码

## 三七分 ##

在 grid 中设置 container 为十等分，可以使用 `grid-template-columns: repeat(10, 1fr)`。 `repeat` 为重复10次 `1fr`。`grid-column` 为 `grid-column-start` 与 `grid-column-end` 的缩写，表示起止的 `line`。使用 grid 进行栅格系统的布局也是很简单。

.container {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
    }
    
    .column-3 {
      grid-column: 1 / 4;
    }
    
    .column-7 {
      grid-column: 4 / 11;
    }
    复制代码

## 复杂布局 ##

以上几个例子，均是单向布局，`flex` 就能很好的解决，而如下几个布局，均是二维布局，传统布局有些困难。以下示例图，可以在 `container` 上使用 `grid-template-areas`，在 `item` 上设置 `grid-area` 属性来设置复杂布局。

<div class="grid-layout">
      <div class="header">header</div>
      <div class="left">left</div>
      <div class="main">main</div>
      <div class="right">right</div>
      <div class="footer">footer</div>
    </div>
    复制代码

.container {
      display: grid;
      grid-template-columns: 100px auto 100px;
      grid-template-rows: 40px 300px 50px;
      grid-template-areas: "header header header"
                           "left main right"
                           "footer footer footer";
    }
    
    .container .header {
      grid-area: header;
    }
    
    .container .footer {
      grid-area: footer;
    }
    
    .container .left {
      grid-area: left;
    }
    
    .container .right {
      grid-area: right;
    }
    
    .container .main {
      grid-area: main;
    }
    复制代码

## 九宫格 ##

在传统布局中就比较有困难。在 grid 中设置三行三列等宽，并使用 `grid-gap` 设置间隙。

.container {
      width: 300px;
      height: 300px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 8px;
      border: 1px solid #fac;
      padding: 8px;
    }
    复制代码

## 参考 ##

*  [A Complete Guide to Grid][]
 *  [W3 Specification][]
 *  [Grid by examples][]
 *  [caniuse][]
 *  [Grid polyfill][]

转载于:https://juejin.im/post/5c7116efe51d45098302601d

[Grid by examples]: https://link.juejin.im?target=http%3A%2F%2Fgridbyexample.com%2Fexamples%2F
[W3 Specification]: https://link.juejin.im?target=https%3A%2F%2Fwww.w3.org%2FTR%2Fcss3-grid-layout%2F
[A Complete Guide to Grid]: https://link.juejin.im?target=https%3A%2F%2Fcss-tricks.com%2Fsnippets%2Fcss%2Fcomplete-guide-grid%2F
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fblog.xiange.tech%2Fpost%2Fgrid-guide%2Freadme%2F
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fblog.xiange.tech%2Fpost%2Fgrid-layout-common-usage%2Fdemo
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Fblog.xiange.tech%2Fpost%2Fgrid-layout-common-usage%2Freadme%2F
[caniuse]: https://link.juejin.im?target=http%3A%2F%2Fcaniuse.com%2F
[Grid polyfill]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FFremyCompany%2Fcss-grid-polyfill%2F