非常好用的的grid布局

二十世纪末的程序员
1,347 阅读7分钟

直接进入咱们今天的正题grid布局

什么是grid布局

Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。可以将一个页面划分为几个主要区域，来定义这些区域的大小、位置、层次等关系

image.png

<style>
  .father {
    display: grid;
  }
</style>

<body>
<div class="father">
  <div class="son1">
    <p>我是son1</p>
  </div>
  <div class="son2">
    <h3>我是son2</h3>
  </div>
  <div class="son3">
    <i>我是son3</i>
  </div>
  <div class="son4">
    <p>我是son4</p>
  </div>
  <div class="son5">
    <h3>我是son5</h3>
  </div>
  <div class="son6">
    <i>我是son6</i>
  </div>
</div>
</body>

设置display:grid/inline-grid的元素就是网格布局容器，这样就能出发浏览器渲染引擎的网格布局算法。在这个代码实例中，.father元素就是网格布局容器，.son元素就是网格的项目，由于网格元素只能是容器的顶层子元素，所以p、h3、i元素并不是网格元素。 网络线的概念，就是划分grid分网格的线，有助于我们对grid-column系列属性的理解。

image.png 这是一个一个 2 x 3 的网格，共有3根水平网格线和4根垂直网格线。

grid布局的属性

同样，Grid 布局属性可以分为两大类：

  • 容器属性，
  • 项目属性

容器属性(也就是父盒子身上的属性)

在元素上设置display：grid 或 display：inline-grid 来创建一个网格容器

  • display：grid 容器是一个块级元素
  • display: inline-grid 容器是一个行内元素 grid-template-columns和grid-template-rows属性

grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高

.father {
    display: grid;
    
    /* 声明两行:行高分别为50px 50px */
    grid-template-rows: 50px 50px;
    
    /* 声明三列:宽度分别为 200px 200px 200px */
    grid-template-columns: 200px 200px 200px;
    
    /* 设置行间距和列间距 */
    grid-gap: 50px;
    
    background-color: orange;
 }

看看效果

image.png 也可以直接用grid-template属性来简写，效果是一样的

grid-template: 50px 50px / 200px 200px 200px;

上述代码中重复写单元格宽高，通过使用repeat()函数，可以简写重复的值

  • 第一个参数是重复的次数

  • 第二个参数是重复的值 所以可以简写

    /* 声明两行:行高分别为50px 50px / grid-template-rows: repeat(2, 50px); / 声明三列:宽度分别为 200px 200px 200px */ grid-template-columns: repeat(3, 200px); 在行和列上除了有repeat()函数，还有一些其他的属性：

auto-fill

自动适应，在一行（或者一列）中容纳最多的单元格

// 每一列200px，数量不固定，看容器最多能装几个
grid-template-columns: repeat(auto-fill, 200px);

image.png fr

表示比例关系，和flex中的flex:1的效果很像

// 表示第一列宽设置为 200px，后面的两列把剩余宽度分成三份，第二列占1份，第三列占两份
grid-template-columns: 200px 1fr 2fr;

minmax

产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。第一个参数是最小值，第二个参数是最大值(如果没有给具体的宽度，默认是最大值)

z这列的宽最小200px，最大1000px
grid-template-columns: minmax(200px, 1000px);

auto

让浏览器自己决定长度

// 表示第一第三列为 100px，中间由浏览器决定长度
grid-template-columns: 100px auto 100px;

grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式

grid-row-gap: 10px // 表示行间距是 10px
grid-column-gap: 20px // 表示列间距是 20px
grid-gap: 10px 20px // 等同上述两个属性的简写

grid-template-areas 属性

用于定义区域，一个区域由一个或者多个单元格组成，要先给顶层子元素设置 grid-area属性，定义子元素的名字，如果子元素设置了grid-area属性，父容器上没有设置grid-template-areas属性，默认显示最后一个子元素在最后面

.son1 {
    grid-area: son1;
    background-color: skyblue;
 }
 
 .father {
    grid-template-areas: 'son4 son5 son6 son1 son2 son3'; // 设置区域的单元格组成和排列方式
  }

image.png 每行由单引号内 ' ' 定义，以空格分隔。.号表示没有名称的网格项。

grid-auto-flow 属性

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。顺序就是由grid-auto-flow决定，默认为行，代表"先行后列"，即先填满第一行，再开始放入第二行。

grid-auto-flow: row // 网格按行排列

image.png

grid-auto-flow: column // 按列排列

image.png

grid-auto-flow: dense // 对空白格子的填充，变成紧密的

image.png justify-items 属性， align-items 属性， place-items 属性

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

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

属性效果对应如下：

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

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

justify-content 属性， align-content 属性， place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）

.father {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}
  • start - 对齐容器的起始边框
  • end - 对齐容器的结束边框
  • center - 容器内部居中
  • space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
  • space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔
  • space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
  • stretch - 项目大小没有指定时，拉伸占据整个网格容器

网格项目属性

grid-auto-columns 属性和 grid-auto-rows 属性

有时候项目的指定位置，在现有网格的外部，就会产生显示网格和隐式网格，比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。超出的部分就是隐式网格，而grid-auto-rows与grid-auto-columns就是专门用于指定隐式网格的宽高。

grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性

指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置

  • grid-column-start 属性：左边框所在的垂直网格线

  • grid-column-end 属性：右边框所在的垂直网格线

  • grid-row-start 属性：上边框所在的水平网格线

  • grid-row-end 属性：下边框所在的水平网格线

    .son1 {
      /* grid-area: son1; */
      grid-column-start: 6;
      grid-row-end: 6;
      background-color: skyblue;
      }

    通过设置grid-column属性，指定1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线，来指定这个网格的位置

image.png grid-area 属性

grid-area 属性指定项目放在哪一个区域

.son1 {
  grid-area: e;
}

这个意思就是将son1项目网格放到于e区域，要与父容器的grid-template-areas搭配使用

justify-self 属性、align-self 属性以及 place-self 属性

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

.son1 {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

这两个属性都可以取下面四个值。

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

grid的主要应用场景

Grid是一个强大的布局，如一些常见的 CSS 布局，如居中，两列布局，三列布局等等是很容易实现的，目前还是pc段使用居多，Grid布局在手机端支持还不算太友好。总体兼容性还不错，但在 IE 10 以下不支持

avatar
文章
阅读
粉丝