CSS之Grid布局，不会不许干饭

KT猫啊
475 阅读5分钟

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。

1、首先第一个问题-什么是grid布局

flex布局我们都知道，是轴线布局，针对轴线的位置，这个我们看作是一维布局，flex一次只能处理一行或者一列
grid是把容器划分成了“行”和“列”，形成了一个单元格，可以指定不同的单元格，做出各种各样的布局，这个我们看作是二维布局，grid布局可以应用多个轴

2、css的布局方式

  1. table布局
  2. float布局
  3. flex布局
  4. 响应式布局
  5. grid布局

3、基本概念

网格布局的区域叫容器（container），容器里面用的单元格叫项目（items）

    <div class="grid_box">
        <div><p>1</p></div>
        <div><p>2</p></div>
        <div><p>3</p></div>
    </div>

上面名为grid_box的div就是容器，里面的三个div元素就是项目

这里需要注意：项目只能是容器里面的最外层的子元素，不包含项目里面的子元素，比如上面的p标签就不是项目，并且grid只对项目有效

4、行和列

先来看一张图

image.png 容器里面水平的空隙是“行”，垂直的空隙是“列”

5、容器的属性

div{
  display：grid //开启网格布局
}

grid-template-rows 设置行的尺寸，每一行的行宽
grid-template-columns 设置列的尺寸,每一列的列高

    .grid_div{
      display: grid;
      grid-template-rows: 100px 100px 100px; 3行 每行为100px的高度
      grid-template-columns: 100px 100px 100px; 3列 每列为100px的宽度
    }

如下图：行宽和列高都是100px

image.png 还有另外一直写法，使用百分比

    .grid_div{
      display: grid;
      grid-template-rows: 50% 50% 50% 50% 50%; 5行，平均每行为50%
      grid-template-columns: 50% 50%; 2列
    }

image.png

repeat

看到上面的50% 50% 50% 50%，好多哇，就会觉得哎呦我去，这我要是10行，我不得写10个50%啊，那100行，emem，原地去世，太麻烦了，这个时候，我们的repeat就出现了，我们动手改一改上面复杂的样式代码

    .grid_div{
      display: grid;
      grid-template-rows: repeat(5, 50%); 5行，平均每行为50%
      grid-template-columns:  repeat(2, 50%); 2列，平均每行为50%
    }

repaet（）里面有两个参数，参数一：重复的次数，参数二：重复的值

auto-fill

有一种情况是项目的大小是固定的，但是容器的大小不确定的时候，这个属性可以用来自动填充

.grid_div{
   display: grid;
   grid-template-columns: repeat(auto-fill, 500px);
}

image.png 看到3的后面已经填充不下第4个500盒子了，所以就换行了

fr

fr是fraction的缩写，如果两列的宽度分别是1fr和2fr，这里的2fr就是1fr的2倍

.grid_div{ 
   display: grid; 
   grid-template-columns: repeat(4, 1fr); 分4份，每份相等
   grid-template-columns: 1fr 2fr 3fr; 几个fr就是几份，分6份，分别占取1份、2份、3份
}

如下图： image.png

minmax（）

minmax（）产生一个长度的范围，表示长度就在这个范围之中，里面有2个参数，参数一：最小值，参数二：最大值

.grid_div{ 
   display: grid; 
   grid-template-columns: 1fr minmax（100px, 1fr）; minmax（）表示列宽不小于100px，不大于1fr
}
auto

由浏览器自己决定长度

.grid_div{ 
   display: grid; 
   grid-template-columns: 1fr auto 1fr; 两边相等，中间随便
}

如下图：

image.png

实现布局

学习了上面的几个属性，相信我们可以进行一些简单的布局，举个🌰

两栏布局
.grid_div{ 
   display: grid; 
   grid-template-columns:  30% 70%；
}

image.png

9宫格布局
.grid_div{ 
   display: grid; 
   grid-template-columns: repeat(3, 100px); 
   grid-template-rows: repeat(3, 100px);
}

image.png

设置单元格直接的距离
.grid_div{ 
   display: grid; 
   grid-columns-gap: 10px; 列间距
   grid-rows-gap: 10px; 行间距
   grid-gap: 10px; 行列间距的简写
}

刚刚展示的9宫格是没有间距的，加了grid-gap属性就有了单元格周围的间距，如下图：

image.png

grid-auto-flow

控制项目开始的的顺序

.grid_div{ 
   display: grid; 
   grid-auto-flow: row;先走完第一行再走第二行，顺序执行
   grid-auto-flow: columns;先走完第一列再走第二列，顺序执行
}

如下图：

image.png

6、项目属性

项目属性可以指定位置
grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线
简写：grid-column

.grid_box>div:first-child{
    background: red;
    grid-column-start: 2; 在垂直的第2条网格线
    grid-column-end:4; 在垂直的第4条网格线     
}

项目的第一个元素，就是红色盒子，从左往右数一共4条垂直的网格线，红色盒子的位置可以看到，红色盒子的左边框在第2条网格线上，右边框在第4条网格线上，如下图： image.png

grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线
简写：grid-row

.grid_box>div:first-child{
    background: red;
    grid-row-start: 2; 在水平的第2条网格线
    grid-row-end:4; 在水平的第4条网格线     
}

从上往下数一共4条水平的网格线，红色盒子的上边框在第2条网格线上，下边框在第4条网格线上，因为红色盒子的位置，所以元素9就被挤下去了，如下图： image.png

不写太多，简单认识几个平时用的最多的

avatar
文章
阅读
粉丝