Grid布局简单介绍及实现常见的布局

最近项目中遇到了一些css问题，通过grid布局就能很好的解决，之前grid布局没有用过也不怎么了解，所以在解决问题的过程中特地去学习了一下，主要看了阮大神的文章 。

先说说我项目的布局问题吧，就是类似于下图的这种，每块内容宽度不固定，pc上的时候3等分 ，笔记本上就2等分，每块之间需要有一定的间距。这个时候使用grid布局就非常合适。

grid布局实现如下：

<div class="container">
      <div class="item"></div>
      <!-- ....n个item -->
    </div>

.containter {
      display: grid;
      grid-template-columns: repeat(3, 33.33%);
      gap: 20px;
    }
//再根据媒体查询做适配
grid-template-columns: repeat(2, 50%);

repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。第一个参数也能是如 auto fill, auto fit等关键字，当宽度或高度不确定时每一行（或每一列）容纳尽可能多的单元格。

项目中我们经常会遇到每个块上下、左右之间需要一定的间距，而整个内容区域的外围却不需要间距 如上 彩图。这个时候使用grid布局 一个gap属性（简写属性:是row-gap和column-gap2个的简写）就能非常简单的解决。

grid实现css常见布局

一、左右两侧，左侧固定宽度，右侧自适应占满

<div class="container">
      <div class="left"></div>
      <div class="right"></div>
    </div>

.container {
      display: grid;
      grid-template-columns: 200px 1fr;
    }

二、左中右三列，左右等宽，中间自适应

<div class="container">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>

.container {
      display: grid;
      grid-template-columns: 200px 1fr 200px;
    }

三、上中下三行，头部固定高，底部固定高，中间自适应占满

<div class="container">
      <div class="header"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </div>

.container {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 100px 1fr 200px;
      height: 100vh;
    }

fr表示比例关系，如果有多个存在 如 1fr 2fr 表示后者是前者的2倍。

有时候我们想要给某个内容一个范围的值，这个时候可以使用minmax函数，这个函数接受2个参数，顾名思义一个是最小值一个是最大值。

grid-template-rows: 100px 1fr minmax(200px, 1fr);

本文只是简单介绍一下grid布局的使用，具体知识点可以查看阮大神的文章