grid-layout 网格布局--快速上手

红太狼 2023-08-17 17:39 118阅读 0赞

grid布局非常强大，他是二维布局模式，将容器划分成“行”和“列”，产生单元格，然后指定项目所在单元格，，而flex是一维布局，grid远比flex强大的多。

这里我只讲日常工作中常用的属性。

**1、容器上的属性**

**（1）display属性**

display：grid 用来指定容器为网格布局。这跟我们以前写 display：block； display：flex；都是一个意思，就是告诉浏览器我当前的这个盒子使用的布局方式，这样浏览器才能识别你接下俩设置的属性。

div {
      display: grid;
    }
    
    // 指定一个元素是行内块网格布局
    div {
      display: inline-grid;
    }

这里需要注意的是：设为网格布局以后，容器子元素的float、display：inline-block、display：table-cell、vertical-align和column-\*等设置都将失效。

**（2）grid-template-columns属性和grid-template-rows属性**

容器指定了网格布局之后，接着就可以划分行和列了，grid-template-columns用来指定每一列的宽度，grid-template-rows用来指定每一行的高度。

.container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
    }
    
    .container {
      display: grid;
      grid-template-columns: 33.33% 33.33% 33.33%;
      grid-template-rows: 33.33% 33.33% 33.33%;
    }
    
    .container {
      display: grid;
      grid-template-columns: repeat(3, 33.33%);
      grid-template-rows: repeat(3, 33.33%);
    }

上面三种写法都是指定了一个三行三列的网格，第一种是固定宽高，第二第三种是宽高都占总的三分之一。

在设置这两个属性时，我们时常会用到一些关键字：repeat、fr、minmax

repeat：repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

grid-template-columns: repeat(2, 100px 20px 80px);

fr：为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍

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

fr可以与绝对长度的单位结合使用，这时会非常方便。

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

上面代码表示，第一列的宽度为150像素，第二列的宽度是第三列的一半。

minmax()：

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

上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

(3)grid-auto-flow 属性

这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

**(4)justify-items 属性，align-items 属性，place-items 属性**

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

.container {
      justify-items: start | end | center | stretch;
      align-items: start | end | center | stretch;
    }

*  \- start：对齐单元格的起始边缘。
 *  \- end：对齐单元格的结束边缘。
 *  \- center：单元格内部居中。
 *  \- stretch：拉伸，占满单元格的整个宽度（默认值）

place-items属性是align-items属性和justify-items属性的合并简写形式。

place-items: <align-items> <justify-items>;

**2、容器的属性**

**(1)justify-self 属性，align-self 属性，place-self 属性**

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

**3、布局实例**

**（1）用grid实现两栏布局**

// html部分

</div>

// css部分
    .container{
      display: grid;
      grid-template-columns: 200px 1fr;
    }

这样，我们只需一行代码就搞定了两栏布局。

**（2）实现水平垂直居中**

// html部分
    <div class="container">
          <div class="item"></div>
    </div>
    
    // css部分
    .container{
      display: grid;
      justify-items: center;
      align-items: center;
    }

**（3）实现十二网格布局**

grid-template-columns: repeat(12, 1fr);

转载于:https://www.cnblogs.com/00feixi/p/11379007.html