CSS布局之Grid

2022年07月26日 17:34 · 阅读 23

Grid概述

网格布局（Grid）是最强大的css布局方案
他将网页划分为一个个网格，可以组合成不同的网格，做出各种各样的布局，以前，只能通过复杂的css达到效果，现在浏览器内置了Grid布局。
上图代码

<template>
  <ul class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
  </ul>
</template>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(1, 400px calc(100% - 800px) 400px);
  grid-template-rows: repeat(2, 30% 20% );

  div {
    display: inline-block;
    text-align: center;
  }
  div:nth-child(even){
    background: red;
  }
  div:nth-child(odd){
    background: yellow;
  }
}
复制代码

基本概念

容器和网格

采用网格布局的区域称为容器（container），容器内部采用网格定位的子元素，成为项目。

行和列

容器里面分为行和列，容器里水平区域称为行，垂直区域称为列。

单元格

行与列交叉的区域就叫做单元格，正常情况下，n行和m列会产生n * m个单元格，上图带颜色的就是单元格

网格线

划分网格的线，称为网格线。水平网格线划分出行，垂直网格线划分出列，正常情况下，n行就有n+1条水平网格线，m列就有m条垂直网格线。

容器属性

Grid布局属性，一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性

display属性

指定容器采用网格布局

div{
    dispaly: grid
}
复制代码

默认情况下，设置为grid布局的元素都会变成块级元素，但是也可以设置为行内块元素

div{
    display:inline-grid
}
复制代码

注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

grid-template-columns 属性， grid-template-rows 属性

grid-template-columns属性定义了每一列的列宽，grid-template-rows属性定义了每一行的行高。

div:{
  //第一种写法
  display: grid;
  grid-template-columns:100px 100px 100px 100px;
  grid-template-rows:100px 100px 100px;
  
  //也支持百分比  第二种写法
  grid-template-columns:30% 70%;
  grid-template-rows:70% 30%;
  
  //也支持calc函数 第三种写法
  grid-template-columns:100px calc(100% - 100px);
  grid-template-rows:70% 30%;
}
复制代码

repeat()

有时候，重复的写同样的值非常的麻烦，尤其是网格很多时，这时可以用repeat()函数，简化重复的值。上面第一种写法可以写成

div:{
    grid-template-columns:repeat(4,100px)//分为四列，每列宽度为100px
    
    grid-template-coluns: repeat(3,33.3%)//支持百分比
    
    grid-template-coluns: repeat(3,100px 200px) //分为四列，两列为一组，列宽100px 200px 100px 200px
复制代码

auto-fill关键字

有时，单元格的大小是固定的，但是容器的大小不固定，如果希望每一行或者每一列容纳尽可能多的单元格，这时可以使用auto-fill关键字自动填充。

div{
    grid-template-coluns: repeat(auto-fill,100px)//每列宽100px 自动将容器填充，知道容器不能放置更过的列。
    grid-template-coluns: repeat(auto-fill,25%)//支持百分比
}
复制代码

fr关键字

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

div{
    grid-template-columns: 1fr 2fr;
    //也可以与固定长度搭配
    grid-template-columns:150px 1fr 2fr;
    
    //如果要实现九宫格也很容易，只需要设置列宽，行高不设置会默认平分
    grid-template-columns:repeat(3,1fr);
}
复制代码

minmax()关键字

函数产生一个长度范围，表示长度在这个范围之中。它接受俩个参数，分别为最大值和最小值。

div{
    //随着浏览器的缩小，第三列最小的宽度为100，最大为1fr，是第二列的一半
    grid-template-columns: 1fr 2fr minmax(100px, 1fr);
}
复制代码

auto关键词

auto表示由浏览器的大小来自己决定长度，这个也得看分几行几列，具体见一下代码

<ul class="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
</ul>
.container {
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 100px 200px auto ;
    grid-template-rows: 100px auto;
}
 
复制代码

因为有九个项目，已经规定一列三个，所以就必须分为三行，这样才能将九个项目完全展示。然后规定第一行的高度为100ox，剩下的两行为auto，则这两行会将剩余的高度进行平分。

grid-row-gap属性、grid-columns-gap属性和grid-gap属性

grid-row-gap属性用于设置行间距，grid-columns-gap用于列间距。
grid-gap是grid-row-gap和grid-columns-gap的合并简写。

div{
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 20px;
  grid-column-gap: 30px;
  
  //以上可以简写成
  grid-gap: 20px 30px;
  //根据最新规定，grid-row-gap、grid-columns-gap以及grid-gap的grid可以省略不写
  //故，以上可以简写成row-gap columns-gap gap
  gap: 20px //gap只写一个参数，默认第二个值和第一个值一样  也就是行间距等于列间距 20px
}
  

复制代码

jusitify-content属性、align-content属性和place-content属性

jusitify-content属性代表网格布局在整个浏览器区域中的水平位置
- start 齐容器的起始边框。
- end 齐容器的结束边框。
- center 器内部居中。
- stretch 目大小没有指定时，拉伸占据整个网格容器。
- space-around 个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
- space-between 与项目的间隔相等，项目与容器边框之间没有间隔
- space-evenly 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
align-content属性，代表网格布局在整个浏览器区域中的垂直位置
place-content属性是align-content和jusitify-content合并的简写。如果只写一个参数，则第二个参数默认等于第一个。

//首先整个grid布局的宽高要小于包含他的父级块级元素  这样才能看出效果
div{
  place-content: center;
}
复制代码

项目属性

设置单元格所在的垂直和水平网格线，从而对单元格的列宽行高进行设置
grid-column-start 单元格左边框线所在的垂直网格线
grid-column-end 单元格右边框线所在的垂直网格线
grid-rows-start 单元格上边框线所在的水平网格线
grid-row-end 单元格下边框线所在的水平网格线

 .item-1 {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
  }
复制代码

容器属性

为了方便理解将grid-auto-flow在这里讲解，这个属性是为了设置网格的顺序。
划分网格后，容器里的子元素会按照顺序，自动放置在每一个网格。默认顺序是先行后列，即填满第一行，再放入第二行。
这个属性的值有以下几种类型
- row 默认先行后列
- column 先列后行
- row dense 默些项目指定位置后，剩下的项目先行后列铺满网格
- column dense 默认的项目指定位置后，剩下的项目先列后行铺满网格
这是默认状态下，指定位置后之前它所在的位置就空出来了

div{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  .item-1 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .item-2{
    grid-column-start: 3;
    grid-column-end: 5;
  }
}
复制代码

将grid-auto-flow设置成row dense

div{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow:row dense;
  .item-1 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .item-2{
    grid-column-start: 3;
    grid-column-end: 5;
  }
}
复制代码