Grid布局

一直酷下去
1,284 阅读8分钟

概念

CSS网格是一个用于web二维布局系统。利用系统，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局

image.png

利用网格布局可以轻松地进行单元格合并、格子与格子之间的间距 image.png

grid容器

image.png

grid子项

image.png

定义网格及fr单位

image.png

定义网格有点像Excel网格，有行有列。具体用到的是grid-template-rows和grid-template-columns ，它们的意思是基于网格行和列的维度，去定义网格的名称和网格轨道的尺寸大小

grid-template-columns:定义网格有多少列,单位可以是px、百分比、auto、fr混用 grid-template-columns：定义网格多少行,单位可以是px、百分比、auto、fr混用

image.png

fr单位同flex布局中的flex-grow拓展容器和flex-shrik收缩容器很像，都是一个比例值,fr的意思就是"均分"

grid-template-rows: 2fr 1fr;的意思就是第一行的高度是第二行高度的2倍

grid-template-rows: 0.3fr 0.3fr; 它的值之和必须大于等于1，否则就会出现空白区域，如下图所示就会出现40%的空白区域

image.png

示例1

合并网格及网格命名

image.png

image.png

示例2

grid布局中的一个特性，如果只指定了多个div中的一个与网格的对应关系，那么其他的div依然会自动填入到gid网格的其他网格中，不会跑到网格之外

image.png

示例3

简写方式

image.png

image.png

示例4

网格间隙及简写

image.png

起初这些属性只使用在grid布局中，所有加了grid前缀，后面发现其他布局中也可以是使用到间隙，为了达到通用的效果去掉了grid，比如flex布局中也可以使用定义间隙的样式

image.png

示例5

简写样式grid-gap: 行间距 列间距;,真的记不住哪个是行哪个是列也没关系，浏览器中可以查看简写的展开写法，新的写法grid: 20px 30px;

image.png

flex弹性布局中使用间距gap

image.png

示例6

网格对齐方式及简写

image.png

image.png

默认情况下div是靠格子的左上角对齐

justify-items 指的是子项在自己所处单元格水平方向的对齐方式

align-items 指的是子项在自己所处单元格水平方向的对齐方式

这种适合子项小于单元格时候的对齐方式

简写形式：place-items: 垂直方向 水平方向; (记不住没关系，浏览器中可以查看完整的形式)

示例7

image.png

它指的是整体的对齐方式，所有网格在grid中的对齐方式(条件是容器要比单元格要大)

image.png

默认情况下单元格是位于容器的左上角

justify-content 指的是单元格整体在水平方向的对齐方式

align-items 指的是单元格整体在垂直方向的对齐方式

这种适合子单元格小于grid容器的时候

简写形式：place-content: 垂直方向 水平方向; (记不住没关系，浏览器中可以查看完整的形式)

示例8

隐式网格和显示网格

自适应的行进行排列

image.png

之前的例子都是显示网格，即有多少个grid格子就有多少个单元格，是一一对应的关系

有的时候网格可能比单元格少，这种情况就会出现隐式网格

image.png

上图中定义了1行3列3个grid格子，但是又定义了5个单元格，因此网格比单元格少。1,2,3占用的就是显示网格，4,5多出来的就会按顺序自动拉伸排列，它占用的就是隐式网格(自动生成)，隐式网格的默认样式:

grid-auto-flow：row：默认row就是行产生隐式网格，因此多出来的4,5会折行到下面，宽度同显示网格一样，但是高度是拉伸的

这个隐式网格的高度是可以进行调节的 grid-auto-rows: 100px;

大部分情况下这2个样式是配套使用的

grid-auto-flow：row
grid-auto-rows: 100px;

示 例 9

自适应的列进行排列

如果是1列3行，下图中的4,5为什么会不在垂直方向上折行？4,5也会产生隐式网格，只是默认情况下是产生row的隐式网格 grid-auto-flow：row image.png

这时就需要对列产生隐式网格grid-auto-flow：column

image.png

但是隐藏网格中的单元格的宽度默认是拉设的，我们可以对其设置

grid-auto-columns: 100px;

image.png

大部分情况下这2个样式是配套使用的

grid-auto-flow：column
grid-auto-columns: 100px;

示 例 10

如果不设置grid容器的宽度，那么宽度和高度都是自适应的，增减内容，那么列会自动发生增减也会把grid容器撑开，所以用grid布局容易实现自适应列布局

紧密的布局

默认情况下一行三列的布局：

image.png

指定第一个div，从第二个列开始排列，那么第一个位置就会被空出来

image.png

加上紧密的属性后，后面的div并不是按照顺序填充，而是先把空的位置沾满

grid-auto-flow: row dense;

image.png

示例11

Grid中子项的相关语法

基于线的元素放置

image.png

在grid布局中每条线都有名字，通过指定div在grid网格中行/列的起始、结束的线就可以使div放到指定的格子中

image.png

image.png

示例12

加与不加下面2行样式的区别(同前面说的『紧密的』类似)：

grid-row-start: 1; grid-row-end: 2;

  • 不加的时候默认的排列顺序是auto，灰色div会自动排到粉色div后面
  • 加了之后灰色div会自动填充空白区域，“跑到”粉色div的前面

image.png

image.png

示例13

加上span后数字就不表示占据的位置，而是表示占据的个数grid-column-end: span 2; 它表示占2列

image.png

示例14

网格线除了使用数字来命名，还可以自定义命名

image.png

在定义网格的时候是可以控制命名的，通过"[]"

image.png

示例15

简写

image.png

基于线的grid-area

grid-area:行的起始线 / 列的起始线 / 行的结束位置线 / 列的结束位置线

除了可以通过指定某个区域的名字进行控制以外，还可以通过线的方式进行控制

image.png

示例16

子项的对齐方式(指定操作某一个子项)

justify-self:水平方向对齐方式

align-sellf:垂直方向对齐方式

image.png

下面的例子中的div为什么会在网格线的中间呢？因为它所占的区域是2行一列，在这个区域中水平垂直居中

image.png

示例17

repeat()

repeat()方法及auto-fill可选值(自适应)，指定可重复的数值

grid-template-columns: 100px 100px 100px;

// 等于下面这种写法

grid-template-columns:repeat(3,100px)

auto-fill是grid-template-columns属性的值，会自动的根据容器大小应该产生多少个网格,如果定义了一行3列的网格，初始化了4个div，那么第四个div就会依次折行排列并自动缩放

image.png

但是使用了auto-fill后网格会根据容器的宽度自适应生成若干个网格，这样即使初始化的格子少了，格子的数量也会依据内容自动的增减

image.png

示例18

minmax()

minmax()方法，设置最小和最大的范围

如下图所示，随着窗口大小发生变化，那么div2最小不会小于100px,最大就会占满剩余空间

image.png

示例19

使用网格布局，结合minmax()和repeat()做一个自适应布局的案例

示例20

image.png image.png image.png image.png image.png

叠加布局

思路 =>

  1. 让叠加的元素出现在一个格子中
grid-area: 1/1/1/1;
  1. 对需要指定位置的元素使用自对齐方式
justify-self: end;
align-self: end;

image.png

示例21

image.png

多种组合排列布局

思路：

  1. 指定整体几行几列网格、网格大小及间距
  2. 基于线指定某个单元格的位置和所占格子大小

image.png

如下图所示：

image.png

示例22

栅格布局

示例23

image.png

当某个divgrid-area: 1;的值设置为一个具体的值时，如果后面还有div那么它就不会自动按顺序进行排列而是自动填补空白区域，因此这里设置grid-area: auto / auto / auto / span 1 ;

就像下面这样，我们实际希望col-3是排在col-1的后面,但是由于col-1的前面有很多的空白区域因此col-3就自动填补到前面去了，为了避免这种情况的发生，使之能够自适应布局，我们需要置grid-area: auto / auto / auto / span 1 ;起始和结束位置都是auto，占据一个格子

image.png

容器自适应行列布局

image.png

容器自适应行布局

image.png

image.png

即使后面再添加更多的div，容器的高度也能随着内容自动被撑开

示例24

容器自适应列布局

示例25

行的自适应布局不需要写grid-auto-flow: row; 因为不写的话默认就是行的折行，产生行的隐式网格。但是列这折行这里就需要指定方向了，grid-auto-flow: column;

image.png

image.png

案例1

image.png

案例26

  • 这里用命名的方式划定网格区域比使用基于线的方式划定网格区域更加方便

  • 使用grid-template-areas划分网格区域的时候，命名的区域组成的图形必须是矩形

grid-template-areas:

"
a1 a3 a3
a2 a3 a3
a4 a4 a5
a6 a7 a7
"
  • 思路:
    • 1.指定网格的行列数并划分好区域
    • 2.将子项放到对应的网格中
avatar
文章
阅读
粉丝