史上最全grid布局教程

coderklaus
410 阅读5分钟

这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战

Flex布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局

Grid布局则是将容器划分 成‘行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局

IxNyUE.png

基本概念

容器

开启了grid布局的盒子，就被称之为grid-container

IxNTxh.png

项目

在grid-container中的每一个网格元素就被称之为一个个的grid-item

IxNxFW.png

基本概念

IDmUbX.png

IDmYNh.png

开启gird布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 600px;
      height: 600px;
      background-color: #2ae2ee;
      /*
         display设置为grid或者inline-grid来开启网格布局
         + grid --- container容器为块级元素
         + inline-grid --- container容器为行内元素
       */
      display: grid;
    }

    .item {
      width: 100px;
      height: 100px;
      font-size: 20px;
      text-align: center;
      line-height: 100px;
      color: #fff;
    }

    .item1 {
      background-color: #fc0f6e;
    }
    .item2 {
      background-color: #360ce5;
    }
    .item3 {
      background-color: #734d41;
    }
    .item4 {
      background-color: #5616c8;
    }
    .item5 {
      background-color: #535fd8;
    }
    .item6 {
      background-color: #ccda86;
    }
    .item7 {
      background-color: #75a50f;
    }
    .item8 {
      background-color: #c879b5;
    }
    .item9 {
      background-color: #a7ca1d;
    }
    .item10 {
      background-color: #bcbc32;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item item1">item1</div>
    <div class="item item2">item2</div>
    <div class="item item3">item3</div>
    <div class="item item4">item4</div>
    <div class="item item5">item5</div>
    <div class="item item6">item6</div>
    <div class="item item7">item7</div>
    <div class="item item8">item8</div>
    <div class="item item9">item9</div>
    <div class="item item10">item10</div>
  </div>
</body>
</html>

gird-container的属性

grid-template-*

grid-template-columns

IDmoyO.png

.container {
  width: 600px;
  height: 600px;
  background-color: #2ae2ee;
  /*
   单单设置display为grid或inline-grid虽然开启了grid布局
   但是这么设置是没有任何效果的，因为grid需要横向和纵向分别可以放几个
  */
  display: grid;
  /* grid布局可以划分为4列，每一列200px */
  grid-template-columns: 200px 200px 200px;
  /*
   没有设置多少行，gird布局会自己去计算可以放置多少行
   假设可以分n行，在这里每一行的高度即为 600 / n
  */
}

IDmCMr.png

grid-template-rows
.container {
  width: 600px;
  height: 600px;
  background-color: #2ae2ee;
  display: grid;
  grid-template-columns: 200px 200px 200px;
  /*
  	三行 每一行200px
  	但是这里其实有4行，超出的部分会自动扩开网格，高度为item的高度
  	(列同理)
  */
  grid-template-rows: 200px 200px 200px;
}

IDmi3u.png

属性相关
repeat函数

repeat函数，第一个参数为需要重复的次数，第二个参数为flex-item的宽度或高度

IDpeOH.png

auto-fill

容器宽度或高度不固定的时候，使用auto-fill可以自动计算出grid布局需要多少行或多少列

IDp11k.png

.container {
  background-color: #2ae2ee;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(auto-fill, 200px);
}

IDpFCz.png

fr

fr（fraction的缩写 意为'片段'）用于更方便的在grid布局中表示gird-item之间的比例关系

IDpCqh.png

.container {
  width: 600px;
  height: 600px;
  background-color: #2ae2ee;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

IDwPNQ.png

minmax函数

minmax(min，max)函数产生一个长度范围，接收2个参数，分别表示最小值和最大值，所定义的宽度或高度的可选值为[min, max]

IDwJk5.png

.container {
  height: 600px;
  background-color: #2ae2ee;
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  grid-template-rows: repeat(3, 1fr);
}
auto

auto由浏览器自己决定对应的宽度或高度

IDwvVD.png

column-gap/row-gap

用于设置grid-item之间的间距

/* gap: column-gap row-gap */
gap: 30px 20px;

/* 如果 column-gap === row-gap 那么这两个值可以合并为一个 */
gap: 20px; /* 实际是 gap: 20px 20px;的简写 */

IDwfSE.png

grid-template-area

一个区域由单个或多个单元格组成，具体如何划分，由使用者自行决定

IDw0Ph.png

.container {
  /* 
  	多个值之间使用空格进行隔开
    但是为了提高阅读性，我们一般会将多个值换行书写
  */
  grid-template-areas:
    'a a a'
    'b b b'
    'c c c';
}

IDwCM2.png

grid-auto-flow

用于设置子元素的排列方式(默认值是row)

IDwjmL.png

IDwy9f.png

justify-items/align-items

设置所有单元格内容(也就是grid-item内元素)的水平和垂直对齐方式

可以值为stretch（默认值 铺满）|start(左对齐)|end(右对齐)|center(居中对齐)等

IDwi3w.png

place-items

place-items是align-items和justify-items属性的简写方式

/* place-items: <align-items> <justify-items> */
/* 注意：第一个值是垂直布局 第二个才是水平布局 */
place-items: center; /* place-items: center center;  */

justify-content/align-content

设置整个内容区域的对齐方式(其实就是grid-item的整体布局)

IDwZOe.png

grid-auto-columns/grid-auto-rows

多出来的元素的宽度和高度

如果grid-auto-columns/grid-auto-rows和grid-item的宽度和高度同时存在的时候，以grid-item的宽度和高度为主

IDoPT5.png

grid-items的属性

grid-column-start/grid-column-end/grid-row-start/grid-row-end

根据网格线指定元素具体位置

IDonCR.png

IDovfi.png

.item1 {
  background-color: #fc0f6e;
  /* grid-column-start: 1; */
  /* grid-column-end: 3; */
  /* 上面2行样式可以简写: */
  grid-column: 1 / 3;
}

IDo11h.png

.item1 {
  background-color: #fc0f6e;
  /* 从左往右跨2个grid-item */
  grid-column-start: span 2;
 	/* 等价于 */
  grid-column-end: span 2;
}

grid-area

用于指定grid-item放置在哪一个区域中

IDo4Xe.png

.container {
  height: 600px;
  background-color: #2ae2ee;
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 100px));
  grid-template-rows: repeat(3, 100px);
  grid-auto-rows: 150px;
  /*
  	对于区域设置，推荐设置为单个(唯一的一个a区域)或连续的区域(垂直或水平的连续a区域)
    以免grid布局不知道如何放置对应的元素，而出现布局混乱
  */
  grid-template-areas:
    'a a a'
    'b b b'
    'c c c';
}

.item1 {
  background-color: #fc0f6e;
  grid-area: b; /* 这里的b不需要加引号 */
}

IDofar.png

grid-area

grid-area属性还可用作grid-row-start、grid-column-start、 grid-row-end、 grid-column-end的合并简写形式，直接指定项目的位置

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

IDoze5.png

.item1 {
  background-color: #fc0f6e;
  /* grid-row: 1 / 3;
  grid-column: 1 / 3; */
  /* 可以被简写为 */
  grid-area: 1 / 1 / 3 / 3;
}

justify-self/align-self

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

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

IDoKHz.png

place-self

align-self和justify-self的简写方式

    .item1 {
      background-color: #fc0f6e;
      /* place-self: <align-self> <justify-self> */
      /* 注意：依旧是先垂直属性，再是水平属性 */
      place-self: start center;
    }
avatar
文章
阅读
粉丝