logo
UUOVO
banner
banner
banner
NEWS LETTER

Html-格子布局(Grid)

Scroll down

划分行列

  1. grid-template-columns 划分列数

    • 划几个就写几个值，每个值代表该列的宽

  2. grid-template-rows 划分行数

    • 划几个就写几个值，每个值代表该行的高

  3. repeat() 重复设置

    • 参数一：重复的数量
    • 参数二：重复的值,这个值可以有多个，用空格连接
      • 示例：
        1
        grid-template-columns:repeat(2, 100px 50px)

  4. 自动填充 auto-fit

    • 根据容器尺寸，自动设置元素尺寸
    • 示例：
      1
      grid-template-columns: repeat(auto-fit,100px)

  5. 比例划分

    • 单位组合
      • 使用 fr 单位设置元素在空间中所占的比例
    • 重复定义
      • 结合 repeat

  6. 自动空间 auto

    • 在值中使用 auto，则将获取剩余空间

  7. 组合定义

    1
    2
    3
    grid-template: grid-template-rows / grid-template-columns
    eg：grid-template: 50px 100px 50px / 150px 150px
    grid-template: grid-template-areas
    • 示例：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      /*点代表占位符*/
      grid-template:
        'header header .'100px
        '. main main'200px
        'footer . .' 300px;

      div:nth-child(1) {
        grid-area: header
      }
      div:nth-child(2) {
        grid-area: main
      }
      div:nth-child(3) {
        grid-area: footer
      }

  8. 最大最下值 minmax()

    • 取值范围在最小到最大之间取值，左边最小，右边最大
    • 示例: 
      1
      grid-template-columns: repeat(2,minmax(100px, 1fr))

间距定义

  1. 行间距：row-gap
  2. 列间距：column-gap
  3. 组合定义：gap
    • 一个值：行列统一
    • 两个值：行 列

元素定位

  1. grid-row-start: 行开始网格线，起到命名的作用
  2. grid-row-end: 行结束网格线
  3. grid-column-start：列开始网格线
  4. grid-column-end：列结束网格线
  • 以上共有属性：
    • Line: 网格络
    • span数值： 网格包含的网格数量
    • span 区域名称： 网格包含到指定的区域名称
    • auto： 自动设置，默认为一个网格宽高

  1. 根据网格线

    • 通过设置具体的第几条网格线来设置区域位置，设置的数值可以是正数和负数

  2. 根据偏移量 span

    • 使用 span 可以设置包含网格的数量或包含到的区域名称。
    • 示例：
      1
      grid-row-start: span 2;

  3. 根据网格命名：看下面的网格命名小节

  4. 简写模式

    • 使用 grid-row 设置行开始网格线
    • 使用设置 grid-column 列结束网格线

  5. 更简洁的组合写法：

    1
    grid-area: grid-row/start/grid-column-start/grid-row-end/grid-column-end

  6. 实现类似于 bootstrap 的布局

网格命名

  • 独立命名

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /*2. 然后在定义行列宽时也添加进去*/
    .outer {
      grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c3-end];
      grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r3-end];
    }
    /*1.给一个网格中的每个线单独命名*/
    .div1 {
      grid-row-start: r2-start;
      grid-row-end: r2-end;
      grid-column-start: c3-start;
      grid-column-end: c3-end;
    }

  • 自动命名

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /*2. 然后在定义行列宽时也添加进去*/
    .outer {
      grid-template-columns: repeat(3,[c-start] 100px [c-end]);
      grid-template-rows: repeat(3,[r-start] 100px [r-end]);
    }
    /*1.给一个网格中的每个线单独命名*/
    .div1 {
      grid-row-start: r-start 2;
      grid-row-end: r-end 2;
      grid-column-start: c-start 2;
      grid-column-end: c-end 2;
    }

区域换位

  1. 编号定位

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /*2. 然后在定义行列宽时也添加进去*/
    .outer {
      grid-template-columns: repeat(3, 100px);
      grid-template-rows: repeat(3, 100px);
    }
    /*1.给一个网格中的每个线单独命名*/
    .div1 {
      grid-area:2/2/3/3;
    }

  2. 命名定位

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /*2. 然后在定义行列宽时也添加进去*/
    .outer {
      grid-template-columns: repeat(auto-fill, [c] 100px);
      grid-template-rows: repeat(auto-fill, [r] 100px);
    }
    /*1.给一个网格中的每个线单独命名*/
    .div1 {
      grid-area:r 2 / c 2 / r 3 / c 3;
    }

区域声明

  • 以布局移动端页面结构为列

  1. 区域布局

    • 每个子元素添加对应的 grid-area： 子元素的命名;
    • 在父元素中使用
      1
      2
      3
      4
      5
      6
      7
        grid-template-rows: 80px 1fr 50px;
        grid-template-columns: 100px 1fr 50px 60px;
        grid-template-areas:
            "ddd ddd ddd ddd"
            "aaa bbb bbb ccc"
            "eee eee eee eee";
      其中每个aaa，bbb,ccc,ddd,eee,代表了子元素的命名，命名放在哪里就代表子元素占用的位置

  2. 简写形式

    • 每个子元素添加对应的 grid-area： 栅格名称;
    • 在父元素中使用
      1
      2
      3
      4
      grid-template:
        '栅格名称 栅格名称 栅格名称 栅格名称' 行高
        '栅格名称 栅格名称 栅格名称 栅格名称' 行高
        '栅格名称 栅格名称 栅格名称 栅格名称' 行高/列宽 列宽 列宽 列宽;

  3. 区域命名(系统自动命名)

    • 只要子元素命名了网格线的区域，栅格名字自定生成
      • 示例:
        1
        grid-area: header1-start/header1-start/main-end/mian-end

  4. 区域占位

    • 使用一个或多个.来占位，一个.,代表一个位置

网格流动

  1. grid-auto-flow 改变单元格排列方式

    • column： 按列排序
    • row： 按行排序
    • dense： 元素使用前面空余栅格(想当与 margin)

  2. 在父元素使用

  3. 强制填充

    • 当元素在栅格中放不下时，将会发生换行产生留白，使用grid-auto-flow: row dense;可以执行填充空白区域操作

对齐管理

  • justify-content: 『所有栅格在容器中的水平对齐』方式，容器有额外空间时
  • align-content：『所有栅格在容器中的垂直对齐』方式，容器有额外空间时
  • align-items: 『栅格内所有元素的垂直排列方』式
  • justify-items: 『栅格内所有元素的横向排列』方式
  • align-self: 『元素在栅格中垂直』对齐方式
  • justify-self: 『元素在栅格中水平』对齐方式
  1. 网格对齐
    • justify-content 属性的值如下
值 说明
start 容器左边
end 容器右边
center 容器中间
stretch 撑满容器
space-between 第一个栅格靠左边，最后一个栅格靠右边，余下元素平均分配空间
space-around 每个元素两侧的间隔相等。所以，栅格之间的间隔比栅格与容器边距的间隔大一倍 space-evenly 栅格间距离完全平均分配
  • align-content 属性的值如下
值 说明
start 容器顶边
end 容器底边
center 容器垂直中间
stretch 撑满容器
space-between 第一个栅格靠左边，最后一个栅格靠右边，余下元素平均分配空间
space-around 每个元素两侧的间隔相等。所以，栅格之间的间隔比栅格与容器边距的间隔大一倍
space-evenly 栅格间距离完全平均分配
  1. 元素对齐
    • justify-items 用于控制元素的水平对齐方式，可用的属性值如下
值 说明
start 元素对齐栅格的左边
end 元素对齐栅格的右边
center 元素对齐栅格的中间
stretch 水平撑满栅格
  • align-items 用于控制元素的垂直对齐方式，可用的属性值如下
值 说明
start 元素对齐栅格的顶边
end 元素对齐栅格的底边
center 元素对齐栅格的垂直中间
stretch 垂直撑满栅格
  1. 简写
    1
    2
    3
    place-content: <align-content> <justify-content>
    place-items: <align-items> <justify-items>
    place-self: <align-self> <justify-self>

自动排列

  • 属性说明
    • grid-auto-rows: 控制自动增加的栅格行的尺寸，grid-auto-flow:row; 为默认
    • grid-auto-columns: 控制自动增加的栅格列的尺寸，grid-auto-flow: column;
其他文章
cover
Html-表格表单篇
  • 24/10/30
  • 15:29
  • CSS&HTML
cover
Html-浮动布局(Float)
  • 24/10/30
  • 15:29
  • CSS&HTML
© 2024.10.30 - 2025 UUOVO
由 Hexo 驱动 v7.3.0 主题 - Async v2.2.3
目录导航 置顶
  1. 1. 划分行列
  2. 2. 间距定义
  3. 3. 元素定位
  4. 4. 网格命名
  5. 5. 区域换位
  6. 6. 区域声明
  7. 7. 网格流动
  8. 8. 对齐管理
  9. 9. 自动排列
请输入关键词进行搜索
  • to close