简介

  • image.png

  • image.png

    容器属性

    grid-template-columns

    规定列数（和宽度）

  • 值是一个用空格分隔的列表，其中每个值指定相应列的尺寸

  • image.png
  • image.png
  • grid-template-columns设置列的宽度
  • 由于行的没有设置高度，那么子元素的高会默认均分撑满父级
  • image.png

  • image.png

    grid-template-rows

    规定行数（和高度）

  • image.png

  • image.png
  • 如果元素超出规定行，那么超出的行自动均分父元素高度

  • image.pngimage.png

    grid-template属性

    repeat（多少列，每个列的宽度）

  • image.pngimage.png

    repeat(auto-fill, 宽度)

  • auto-fill代表自适应父级宽度生成列

  • image.pngimage.png

    fr 片段

  • 为了方便表示比例关系，网格布局提供了fr关键字（fraction的缩写，意为片段）

  • image.pngimage.png

  • image.pngimage.png

    minmax(最小值，最大值)函数

  • 函数产生一个长度范围，表示长度就在这个范围之中，接受两个参数

  • 最小值，最大值
  • image.png

  • image.png

    auto自适应

  • image.png

  • image.png

    网格线

  • 可以用方括号定义网格线名称，方便以后的引用

  • image.png

    row-gap 行间距

  • image.pngimage.png

    column-gap 列间距

  • image.png

  • image.png

    gap 行列间距

  • 第一个参数为行间距，第二个参数为列间距

  • 如果行列间距统一，可以写成一个参数
  • image.png
  • image.png

  • image.pngimage.png

    grid-template-areas规定区域

  • 后面的ar名称自定义的

  • image.pngimage.png

    区域不需要利用，则使用点（.）表示

  • 区域的命名会影响到网格线，每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end

  • image.pngimage.png

  • image.pngimage.png

    grid-auto-flow

  • 划分网格以后，容器的字元素会按照顺序，自动放置在每一个网格。默认的放置顺序是‘先行后列’

  • 即先填满第一行，再开始放入第二行（就是子元素的排放顺序）

  • 默认值为row

    参数 column 竖着排列

  • image.png

  • image.png

    其他参数

  • image.png

  • https://www.runoob.com/cssref/pr-grid-auto-flow.html

    对其方式

  • image.png

  • image.png

  • image.pngimage.png

    grid-auto-rows

  • 设置列多出的项目高度

  • image.png

  • image.png

    项目属性

  • image.png

    grid-column-start/grid-column-end列网格线开始/结束

  • 指定项目从哪个网格线开始

  • 指定项目从哪个网格线结束

  • image.pngimage.png

    grid-column列网格线简写方式

  • image.pngimage.png

    grid-row-start/grid-row-end行网格线开始/结束

  • image.pngimage.png

    grid-row行网格线简写方式

  • image.png

  • image.png

    span网格线跨越写法

  • image.png

  • image.png
  • image.png

  • image.png

    项目对其方式

  • image.png