search

博客列表 >grid布局主要用法

grid布局主要用法

岂几岂几
岂几岂几原创
2020年04月19日 20:49:201181浏览

1. 初识grid布局

  • grid布局页脚网格布局, 格栅布局.
  • 它的布局方式有<table>布局的影子. 可以把grid布局看作是<table>布局plus.
  • 类似flex布局, grid布局也有容器和项目的概念, 除此之外,还有:
    1. 单元格, grid容器可以划分为n行m列个单元格.单元格中放置项目.
    2. 网格线, 将grid容器划分为n行m列的直线.
    3. 显式网格, 由用户根据项目数量指示容器生成的网格.
    4. 隐式网格, 当显式网格数量不足以容纳放入grid容器中的项目时, grid容器会根据缺的网格数量自动生成的网格.
    5. 网格区域, 由一个以上的单元格组成的矩形区域. 必须是矩形区域.

网格布局的基本步骤: 1. 生成网格; 2. 放置项目.

2. 创建grid容器

  • display: 声明使用网格布局的容器元素.
  • grid-auto-flow: 声明项目在网格中自动填充项目的方案(先行再列/先列再行).
  • grid-template-columns/rows: 在容器中显式的划分行与列, 生成指定数量的单元格.
  • grid-auto-rows/columns: 根据比显式网格多出的项目数量, 在容器中隐式生成行与列来放置它们.

demo1-创建grid容器, 设置容器的优先布局方向, 设置容器中固定数量的行和列, 设置容器中自动增加的行和列:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>创建Grid容器</title>
  8.     <style>
  9.         /* 2.grid容器的样式 */
  10.         .container {
  11.             /* 2.1.容器大小&背景色 */
  12.             width: 400px;
  13.             height: 400px;
  14.             background-color: wheat;
  16.             /* 2.2.创建grid容器 */
  17.             display: grid;
  19.             /* 2.3.设置项目在grid容器中的填充方案 */
  20.             /* 2.3.1.默认是行优先(先行后列)的方式 */
  21.             grid-auto-flow: row;
  22.             /* 2.3.2.列优先的方式: */
  23.             /* grid-auto-flow: column; */
  25.             /* 2.4.通过设置行和列, 显式指定grid容器中生成的单元格数量及其大小 */
  26.             /* 例: 三列二行, 行列都设置为100px */
  27.             /* 2.4.1.设置列信息: 3列, 每行100px宽 */
  28.             grid-template-columns: 100px 100px 100px;
  29.             /* 2.4.2.设置行信息: 2列, 每列100px高 */
  30.             grid-template-rows: 100px 100px;
  32.             /* 2.5.放置不下的项目(三行两列只能放6个项目,第七个放不下), 会隐式生成单元格来放置第7个单元格 */
  33.             /* 当前设置是行优先的填充方案, 所以列数是固定的, 隐式生成会增加行数, 且一次增加一行的单元格.
  34.                 第7个项目将放在第3行第一个单元格 */
  35.             /* 值为auto, 浏览器自动计算隐式生成的单元格的高度, 以填充完剩下的行高 */
  36.             grid-auto-rows: auto;
  37.             /* 值为像素值, 隐式生成的单元格, 将以像素值为高度生成(单元格) */
  38.             grid-auto-rows: 150px;
  39.         }
  40.     </style>
  41. </head>
  43. <body>
  44.     <!-- 1.先写一个容器,里面放7个项目 -->
  45.     <div class="container">
  46.         <div class="item item1">1</div>
  47.         <div class="item item2">2</div>
  48.         <div class="item item3">3</div>
  49.         <div class="item item4">4</div>
  50.         <div class="item item5">5</div>
  51.         <div class="item item6">6</div>
  52.         <div class="item item7">7</div>
  53.     </div>
  54. </body>
  56. </html>

3. 设置单元格数量与尺寸

  • 固定宽度px: 固定大小
  • 百分比%: 以容器大小为依据来计算
  • 自动计算auto: 由浏览器决定长度
  • 比例fr: 将容器空间按比例分配给每一个单元格
  • 区间minmax(min,max): 设置单元格尺寸变化范围
  • 重复生成repeat(): 快速生成相同大小单元格的
  • 自动填充auto-fill: 单元格固定,但容器不确定时,可以让一行/列容纳尽可能多的项目

demo2-设置单元格的数量和尺寸:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>显示设置单元格的方式</title>
  8.     <style>
  9.         /* 2.grid容器的样式 */
  10.         .container {
  11.             /* 2.1.容器大小&背景色 */
  12.             width: 400px;
  13.             height: 400px;
  14.             background-color: wheat;
  16.             /* 2.2.创建grid容器 */
  17.             display: grid;
  19.             /* 2.3.设置项目在grid容器中的填充方案 */
  20.             /* 2.3.1.默认是行优先(先行后列)的方式 */
  21.             grid-auto-flow: row;
  22.             /* 2.3.2.列优先的方式: */
  23.             /* grid-auto-flow: column; */
  24.         }
  26.         /* 3.显示设置单元格的方式 */
  27.         .container {
  29.             /* 3.1.固定值 */
  30.             /* 即分别设置生成的单元格的列宽和行高 */
  31.             /* 以划分为三列二行, 行列都设置为100px为例 */
  32.             /* 3.1.1.设置列数量和宽度: 3列, 每行100px宽 */
  33.             grid-template-columns: 100px 100px 100px;
  34.             /* 3.1.2.设置行数量和高度:2列, 每列100px高 */
  35.             grid-template-rows: 100px 100px;
  37.             /* 3.2.百分比 */
  38.             /* 以划分为三列二行为例 */
  39.             /* 3.2.1.设置列数量和宽度:3列, 第1,2列分别占grid容器宽度的20%, 30%;第3列(值为auto)自动填充占满剩下的grid宽度 */
  40.             grid-template-columns: 20% 30% auto;
  41.             /* 3.2.2.设置行数量和高度:2行,第1,3行高度设置为固定值100px;第2列(值为auto)自动填充占满剩下的grid容器高度 */
  42.             grid-template-rows: 100px auto 100px;
  44.             /* 3.3.按比例(比例符号: fr. 1:1:1写作:1fr 1fr 1fr) */
  45.             /* 单元格的行/列将会按照比例填充满grid容器 */
  46.             /* 3.3.1.例子1: */
  47.             /* 列宽为: 1:1:1 */
  48.             grid-template-columns: 1fr 1fr 1fr;
  49.             /* 行高为: 1:2:1 */
  50.             grid-template-rows: 1fr 2fr 1fr;
  52.             /* 3.3.2.特别的: */
  53.             /* 如果比例值中放auto, 如下例中设置第二行行高为auto, 则第二行单元格的行高视单元格中的项目高度而定
  54.                 容器高度减去第二行行高, 剩下的高度由第一行和第三行单元格按1:1填充.
  55.              */
  56.             grid-template-columns: 1fr 1fr 1fr;
  57.             grid-template-rows: 1fr auto 1fr;
  59.             /* 3.4.重复设置 */
  60.             /* 可以用repeat(行/列数量, 行高1/列宽1 行高2/列宽2 ...)来重复生成相同设置的单元格 */
  61.             /* 行高/列宽的值可以是3.1-3.3介绍的3种值 */
  62.             /* 3.4.1.例1: */
  63.             /* 重复设置3列, 每列列宽均为100px */
  64.             grid-template-columns: repeat(3, 100px);
  65.             /* 重复设置4行, 每行行高均为grid容器高度的20% */
  66.             grid-template-rows: repeat(4, 20%);
  68.             /* 3.4.2.例2: 重复列宽/行高数有多个 */
  69.             /* 重复设置4列, 每列列宽为:100px 150px 100px 150px */
  70.             grid-template-columns: repeat(2, 100px 150px);
  72.             /* 3.4.3.例3: 为每列的列宽/行高设置最大和最小值(弹性填充) */
  73.             /* 单元格列宽将以 行高最小值总和和grid容器宽度 之间的最大值 作为总列宽进行平均布局 */
  74.             grid-template-columns: repeat(2, minmax(50px, 300px));
  75.             /* 只设置单元格高度最小值, 当最小值总和小于grid容器高度时, 剩下的单元格高度按照1:1平均分配 */
  76.             grid-template-rows: repeat(2, minmax(150px, 1fr));
  78.             /* 3.4.4.例4:自动填充 */
  79.             /* 不指定列宽/行高, 按照指定的行高/列宽数值重复填充, 直至grid容器剩余的宽度/高度不能再继续填充为止 */
  80.             grid-template-columns: repeat(auto-fill, 110px);
  81.             grid-template-rows: repeat(auto-fill, 100px);
  82.         }
  83.     </style>
  84. </head>
  86. <body>
  87.     <!-- 1.先写一个容器,里面放7个项目 -->
  88.     <div class="container">
  89.         <div class="item item1">1</div>
  90.         <div class="item item2">2</div>
  91.         <div class="item item3">3</div>
  92.         <div class="item item4">4</div>
  93.         <div class="item item5">5</div>
  94.         <div class="item item6">6</div>
  95.         <div class="item item7">7</div>
  96.     </div>
  97. </body>
  99. </html>

4. 将项目填充到指定单元格中

4.1 使用默认网格线划分单元格

  • 默认从左上角开始,从左到右,从上到下,依次从 1 开始编号
  • 如果从右下角开始,由下向上,由右向左,依次由从-1 开始编号
  • 根据数字网格线,可以将项目放到网格线形成的封闭矩形区域中
  • 设置项及其作用
    • grid-row-start/grid-row-end: 设置项目将填充到的单元格列起止网格线编号;
    • grid-column-start/grid-column-end: 设置单元格将填充到的单元格行起止网格线编号;
    • grid-row: 可以同时设置grid-row-start/grid-row-end;
    • grid-column: 可以同时设置grid-column-start/grid-column-end;
  • 设置项的值
    1. 网格编号, 可以正数编号和负数编号混用.
    2. 结束网格编号比起始网格编号多的差值.
    3. 省略值, 如果填充方式和默认填充方式一样, 则可省略部分设置项和设置值.

demo3-使用默认网格线把项目布局到单元格中:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>使用默认网格线把项目布局到单元格中</title>
  8.     <style>
  9.         /* 2.grid容器的样式 */
  10.         .container {
  11.             /* 2.1.容器大小&背景色 */
  12.             width: 400px;
  13.             height: 400px;
  14.             background-color: wheat;
  16.             /* 2.2.创建grid容器 */
  17.             display: grid;
  19.             /* 2.3.设置项目在grid容器中的填充方案 */
  20.             /* 2.3.1.默认是行优先(先行后列)的方式 */
  21.             grid-auto-flow: row;
  22.             /* 2.3.2.列优先的方式: */
  23.             /* grid-auto-flow: column; */
  25.             /* 2.4.显式设置grid容器中的单元格行列数（四行四列，十六宫格） */
  26.             grid-template-columns: repeat(4, 1fr);
  27.             grid-template-rows: repeat(4, 1fr);
  28.         }
  30.         /* 3.把各个项目放入单元格中 */
  31.         /* tips: 火狐浏览器的"查看器"的"布局"页签中勾选"显示行号" */
  32.         /* 3.1. 设置第一个项目的布局（以示例中的最后一个为准，就是填充满grid容器）*/
  33.         .item.item1 {
  34.             background-color: lightgreen;
  35.             /* 3.1.1.使用网格线编号(左上角开始编号)确认项目1布局的单元格 */
  36.             grid-row-start: 1;
  37.             grid-row-end: 3;
  38.             grid-column-start: 1;
  39.             grid-column-end: 3;
  40.             /* 3.1.2.使用网格线编号(右下角开始编号)确认项目1布局的单元格 */
  41.             grid-row-start: -1;
  42.             grid-row-end: -3;
  43.             grid-column-start: -1;
  44.             grid-column-end: -3;
  46.             /* 3.1.3.把项目1放到中间 */
  47.             grid-row-start: 2;
  48.             grid-row-end: 3;
  49.             grid-column-start: 2;
  50.             grid-column-end: 3;
  52.             /* 3.1.4.项目1填满容器*/
  53.             /* 注意，本例中，除开项目1，还有项目2-项目4，这3个项目默认会被在其中的子元素撑起一定的宽高，
  54.                 本设置可以填满容器剩余的空间  */
  55.             grid-row-start: 1;
  56.             grid-row-end: 5;
  57.             grid-column-start: 1;
  58.             grid-column-end: 5;
  60.             /* 另一种写法（标号为-1的网格线就是最右边、最下边的网格线） */
  61.             grid-row-start: 1;
  62.             grid-row-end: -1;
  63.             grid-column-start: 1;
  64.             grid-column-end: -1;
  65.         }
  67.         /* 3.2.设置第二个项目的布局位置 */
  68.         /* 使用grid-row和grid-column对布局设置实现简写 */
  69.         .item.item2 {
  70.             background-color: lightpink;
  71.             /* 3.2.1.使用类似3.1.1的网格线布局方式，项目2将占满前两行，并覆盖项目1在前两行的位置 */
  72.             grid-row-start: 1;
  73.             grid-row-end: 3;
  74.             grid-column-start: 1;
  75.             grid-column-end: 4;
  77.             /* 3.2.2.上面的简写 */
  78.             /* 可以用grid-row和grid-column同时设置行、列的起止网格线。 */
  79.             grid-row: 1/3;
  80.             grid-column: 1/4;
  81.         }
  82.         /* tips：某个单元格，如果放入了多个元素，那么后放入的元素会放在上面，遮挡住先放的 */
  84.         /* 3.3.设置第三个项目的布局位置 */
  85.         /* 使用终止线相对于起始线的偏移量来简化 */
  86.         .item.item3 {
  87.             background-color: yellow;
  88.             grid-row-start: 3; 
  89.             /* 值为开始网格线标号的基础上加2，即3+2=5（span可以认为是+） */
  90.             /* 坑：span 2，span和后面的数字之间一定要有空格！！ */
  91.             grid-row-end: span 2;
  92.             grid-column-start: 1;
  93.             grid-column-end: span 2;
  95.             /* 上面的简写 */
  96.             grid-row: 3/span 2;
  97.             grid-column: 1/span 2;
  98.         }
  100.         /* 3.4.设置第四个项目的布局位置 */
  101.         /* 省略默认布局方式的设置项 */
  102.         .item.item4 {
  103.             background-color: gray;
  104.             /* 如果从系统默认安排的位置开始填充，则可以忽略开始的网格线（包括行/列方向都可以） */
  105.             /* 在本例中，项目1已经布局到第12个单元格（第三行第三列，显示设置的最后一个单元格），
  106.                 项目4会触发隐式填充，若不做任何设置，项目4将从第四行第一列开始布局（原因：行优先布局）
  107.                 若不改变这个前提，则可以把开始布局的设置省略 */
  108.             /* 本例中，第四个项目默认要从第5条网格线开始布局，所以可以省略 */
  109.             /* grid-row-start: 5; */
  110.             grid-row-end: span 2;
  111.             /* 本例中，第四个项目默认要从第1条网格线开始布局，所以可以省略 */
  112.             /* grid-column-start: 1; */
  113.             grid-column-end: span 2;
  114.             /*   */
  115.         }
  116.     </style>
  117. </head>
  119. <body>
  120.     <!-- 1.先写一个容器,4个项目 -->
  121.     <div class="container">
  122.         <div class="item item1">1</div>
  123.         <div class="item item2">2</div>
  124.         <div class="item item3">3</div>
  125.         <div class="item item4">4</div>
  126.     </div>
  127. </body>
  129. </html>

4.2 使用命名网格线划分单元格

  • 使用语义化的名称替代容器自动生成的数字网线线编号
  • 同一条网络线可以有多个别名
  • 用得较少, 用法和使用默认网格线类似, 只是需要先定义网格线名称.
  • 设置值也可以是span n和省略值.

demo4-使用命名网格线划分单元格

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>使用自定义名称的网格线来划分单元格(用得少)</title>
  8.     <style>
  9.         /* 2.grid容器的样式 */
  10.         .container {
  11.             /* 2.1.容器大小&背景色 */
  12.             width: 400px;
  13.             height: 400px;
  14.             background-color: wheat;
  16.             /* 2.2.创建grid容器 */
  17.             display: grid;
  19.             /* 2.3.设置项目在grid容器中的填充方案 */
  20.             /* 2.3.1.默认是行优先(先行后列)的方式 */
  21.             grid-auto-flow: row;
  22.             /* 2.3.2.列优先的方式: */
  23.             /* grid-auto-flow: column; */
  25.             /* 2.4.设置显示的单元格布局，同时设置网格线别名 */
  26.             /* 注意:不能用重复语法(repeat) */
  27.             /* 同一根网格线，可以有多个别名：[别名1 别名2 ...] */
  28.             grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end c4-start] 100px [c4-end];
  29.             grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end c4-start] 100px [c4-end];
  31.             /* 默认填充的规则,可以不写,只写跟默认填充规则不一样的 */
  32.         }
  34.         /* 3.把各个项目放入单元格中 */
  35.         /* tips: 火狐浏览器的"查看器"的"布局"页签中勾选"显示行号" */
  36.         /* 火狐浏览器的"查看器"的"布局"页签中勾选"显示行号" */
  37.         .item.item1 {
  38.             /* 3.1.例1.使用自定义命名的网格线布局项目到单元格中 */
  39.             /* 放在第二行第三列 */
  40.             background-color: lightgreen;
  41.             grid-row-start: r2-start;
  42.             /* 默认就是布局一行/一列, 所以可以省略 */
  43.             /* grid-row-end: span 1; */
  44.             grid-column-start: c3-start;
  45.             /* 默认就是布局一行/一列, 所以可以省略 */
  46.             /* grid-column-end: span 1; */
  48.         }
  50.         /* 自定义命名的网格线布局的使用跟默认网格线布局的使用完全一样，示例略。 */
  52.     </style>
  53. </head>
  55. <body>
  56.     <!-- demo3中,网格线是1,2,3...等阿拉伯数字 -->
  57.     <!-- 本实例中,我们自定义网格线名称 -->
  58.     <!-- 1.先写一个容器,7个项目 -->
  59.     <div class="container">
  60.         <div class="item item1">1</div>
  61.         <div class="item item2">2</div>
  62.         <div class="item item3">3</div>
  63.         <div class="item item4">4</div>
  64.     </div>
  65. </body>
  67. </html>

5. 将项目填充到网格区域中

5.1 默认网格区域

  • 设置项目属性grid-area: 将项目填充到指定容器的区域中
  • 语法: grid-area: 起始行 / 起始列 / 结束行 / 结束列

demo5-使用grid-area设置网格区域大小:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>使用默认网格区域来划分单元格</title>
  8.     <style>
  9.         /* 2.grid容器的样式 */
  10.         .container {
  11.             /* 2.1.容器大小&背景色 */
  12.             width: 400px;
  13.             height: 400px;
  14.             background-color: wheat;
  16.             /* 2.2.创建grid容器 */
  17.             display: grid;
  19.             /* 2.3.设置项目在grid容器中的填充方案 */
  20.             /* 2.3.1.默认是行优先(先行后列)的方式 */
  21.             grid-auto-flow: row;
  22.             /* 2.3.2.列优先的方式: */
  23.             /* grid-auto-flow: column; */
  25.             /* △2.4.设置显式4行4列布局*/
  26.             grid-template-columns: repeat(4, 1fr);
  27.             grid-template-rows: repeat(4, 1fr);
  28.         }
  30.         /* △3.设置每一个项目部署到的网格区域 */
  31.         /* 火狐浏览器的"查看器"的"布局"页签中勾选"显示区域名称" */
  32.         .item.item1 {
  33.             background-color: lightgreen;
  34.             /* 3.1.设置第一个项目部署到第一行的所有单元格组成的网格区域*/
  35.             /* 语法:grid-area: row-start / col-start / row-end / col-end */
  36.             /* 写法1： */
  37.             grid-area: 1 / 1 / 2 / 5;
  38.             /* 写法2：（使用偏移） */
  39.             grid-area: 1 / 1 / span 1 / span 4;
  40.             /* 写法3：（以为第一个项目默认就是从第一条网格线开始布局，所以可以简写） */
  41.             grid-area: span 1 / span 4;
  43.         }
  45.         .item.item2 {
  46.             background-color: lightpink;
  47.             /* 3.2.设置第二个项目不是到第二行第一个和第三行第一个单元格组成的网格区域中 */
  48.             /* 语法:grid-area: row-start / col-start / row-end / col-end */
  49.             /* 写法1： */
  50.             grid-area:2 /1 / 4/ 2;
  51.             /* 写法2：（使用偏移） */
  52.             grid-area: 2 /1/span 2/span 1;
  53.             /* 写法3：省略默认设置 */
  54.             /* 因为第一个项目已经占据了第一行所有单元格，所以第二个项目默认从第二行第一个单元格
  55.                 开始布局，相关的默认配置项可以省略 */
  56.             grid-area: span 2;
  58.         }
  60.         /* 项目3，4，5不做设置，将布局到第二行第二个，第三个和第四个单元格中 */
  61.         .item.item3 {
  62.         background-color: yellow;
  63.         }
  65.         .item.item4 {
  66.         background-color: lightgrey;
  67.         }
  68.         .item.item5 {
  69.         background-color: violet;
  70.         }
  72.         /* tips：某个单元格，如果放入了多个元素，那么后放入的元素会放在上面，遮挡住先放的 */
  73.     </style>
  74. </head>
  76. <body>
  77.     <!-- 一个以上的单元格组成的矩形块,叫网格区 -->
  78.     <!-- 1.先写一个容器,5个项目 -->
  79.     <div class="container">
  80.         <div class="item item1">1</div>
  81.         <div class="item item2">2</div>
  82.         <div class="item item3">3</div>
  83.         <div class="item item4">4</div>
  84.         <div class="item item5">5</div>
  85.     </div>
  86. </body>
  88. </html>

5.2 命名网格区域

  • 可以为每一个网格区域设置一个语义化的名称
  • 具有名称的网络区域称之为命名区域
  • 名称相同的网格区域会合并, 形成更大的区域空间
  • 项目设置的区域名称后,会自动填充到容器中应对的命名区域中

demo6-使用grid-area为网格区域命名, 使用grid-template-areas指定命名区域所占的单元格:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>使用命名网格区域来划分单元格</title>
  8.     <style>
  9.         /* 2.grid容器的样式 */
  10.         .container {
  11.             /* 2.1.容器大小&背景色 */
  12.             width: 400px;
  13.             height: 400px;
  14.             background-color: wheat;
  16.             /* 2.2.创建grid容器 */
  17.             display: grid;
  19.             /* 2.3.设置项目在grid容器中的填充方案 */
  20.             /* 2.3.1.默认是行优先(先行后列)的方式 */
  21.             grid-auto-flow: row;
  22.             /* 2.3.2.列优先的方式: */
  23.             /* grid-auto-flow: column; */
  25.             /* △2.4.设置显式3行3列布局*/
  26.             grid-template-columns: 80px 1fr 80px;
  27.             grid-template-rows: 40px 1fr 40px;
  29.             /* △2.5.设置每个网格区域所占的单元格及其网格名称 */
  30.             /* tips:相同网格名称的单元格将会合并 */
  31.             /* 结合火狐浏览器的开发者工具-查看器-布局-勾选“显示区域名称”来看设置 */
  32.             grid-template-areas: 
  33.                 "header header header"
  34.                 "left main right"
  35.                 "footer footer footer";
  36.         }
  38.         /* △3.设置每一个项目部署到的区域名称 */
  39.         /* 火狐浏览器的"查看器"的"布局"页签中勾选"显示区域名称" */
  40.         .item.item1 {
  41.             background-color: lightgreen;
  42.             /* 3.1.第一个项目部署到的区域名称设置为header
  43.                 (它将被部署到区域名称为header的网格区中) */
  44.             grid-area: header;
  46.         }
  48.         .item.item2 {
  49.             background-color: lightpink;
  50.             /* 3.2.第二个项目部署到的区域名称设置为left
  51.                 （它将被部署到区域名称为left的网格区中） */
  52.             grid-area:left;
  54.         }
  56.         .item.item3 {
  57.             background-color: yellow;
  58.             /* 3.3.第三个项目部署到的区域名称设置为main
  59.                 （它将被部署到区域名称为main的网格区中） */
  60.             grid-area:main;
  62.         }
  64.         .item.item4 {
  65.             background-color: gray;
  67.             /* 3.4.第四个项目部署到的区域名称设置有right
  68.                 （它将被部署到区域名称为right的网格区中）  */
  69.             grid-area: right;
  71.             /* 语法:grid-area: row-start / col-start / row-end / col-end */
  72.             /* grid-area: 1 / 1 / 2/ 5; */
  73.             /* 用偏移量来写 */
  74.             /* grid-area: 1 / 2 / span 1 / span 5; */
  76.             /* grid-area: span 1 / span 4; */
  77.         }
  79.         .item.item5 {
  80.             background-color: brown;
  82.             /* 3.5.第五个项目部署到的区域名称设置为footer
  83.                 （它将被部署到区域名称为right的网格区中）  */
  84.             grid-area: footer;
  85.         }
  87.         /* tips：某个单元格，如果放入了多个元素，那么后放入的元素会放在上面，遮挡住先放的 */
  88.     </style>
  89. </head>
  91. <body>
  92.     <!-- 一个以上的单元格组成的矩形块,叫网格区 -->
  93.     <!-- 1.先写一个容器,5个项目 -->
  94.     <div class="container">
  95.         <div class="item item1">1</div>
  96.         <div class="item item2">2</div>
  97.         <div class="item item3">3</div>
  98.         <div class="item item4">4</div>
  99.         <div class="item item5">5</div>
  100.     </div>
  101. </body>
  103. </html>

5.3 网格区域占位符

  • 当项目默认已到填充到正确的区域中,无需设置时,可使用”.”做为占位符

demo7-使用”.”做默认填充的网格区域的占位符

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>使用网格占位符来简化网格区域设置</title>
  8.     <style>
  9.         /* 2.grid容器的样式 */
  10.         .container {
  11.             /* 2.1.容器大小&背景色 */
  12.             width: 400px;
  13.             height: 400px;
  14.             background-color: wheat;
  16.             /* 2.2.创建grid容器 */
  17.             display: grid;
  19.             /* 2.3.设置项目在grid容器中的填充方案 */
  20.             /* 2.3.1.默认是行优先(先行后列)的方式 */
  21.             grid-auto-flow: row;
  22.             /* 2.3.2.列优先的方式: */
  23.             /* grid-auto-flow: column; */
  25.             /* △2.4.设置显式3行3列布局*/
  26.             grid-template-columns: 80px 1fr 80px;
  27.             grid-template-rows: 40px 1fr 40px;
  29.             /* △2.5.设置每个网格区域所占的单元格及其网格名称 */
  30.             /* tips:相同网格名称的单元格将会合并 */
  31.             /* 结合火狐浏览器的开发者工具-查看器-布局-勾选“显示区域名称”来看设置 */
  32.             /* tips:项目1被布局在header网格区域，在此前提下，项目2,3,4默认会分别布局到
  33.                 第二行的第1,2,3个单元格中，所以就不用显式的写出网格名称了，用.代替 */
  34.             grid-template-areas: 
  35.                 "header header header"
  36.                 ". . ."
  37.                 "footer footer footer";
  38.         }
  40.         /* △3.设置每一个项目部署到的区域名称 */
  41.         /* 火狐浏览器的"查看器"的"布局"页签中勾选"显示区域名称" */
  42.         .item.item1 {
  43.             background-color: lightgreen;
  44.             /* 3.1.第一个项目部署到的区域名称设置为header
  45.                 (它将被部署到区域名称为header的网格区中) */
  46.             grid-area: header;
  48.         }
  50.         .item.item2 {
  51.             background-color: lightpink;
  52.             /* 3.2.第二个项目部署到的区域名称设置为left
  53.                 （它将被部署到区域名称为left的网格区中） */
  54.             /* 结合2.5.的第二个tips，不用设置该网格名称了，删掉 */
  55.             /* grid-area:left; */
  57.         }
  59.         .item.item3 {
  60.             background-color: yellow;
  61.             /* 3.3.第三个项目部署到的区域名称设置为main
  62.                 （它将被部署到区域名称为main的网格区中） */
  63.             /* 结合2.5.的第二个tips，不用设置该网格名称了，删掉 */
  64.             /* grid-area:main; */
  66.         }
  68.         .item.item4 {
  69.             background-color: gray;
  71.             /* 3.4.第四个项目部署到的区域名称设置有right
  72.                 （它将被部署到区域名称为right的网格区中）  */
  73.             /* 结合2.5.的第二个tips，不用设置该网格名称了，删掉 */
  74.             /* grid-area: right; */
  76.             /* 语法:grid-area: row-start / col-start / row-end / col-end */
  77.             /* grid-area: 1 / 1 / 2/ 5; */
  78.             /* 用偏移量来写 */
  79.             /* grid-area: 1 / 2 / span 1 / span 5; */
  81.             /* grid-area: span 1 / span 4; */
  82.         }
  84.         .item.item5 {
  85.             background-color: brown;
  87.             /* 3.5.第五个项目部署到的区域名称设置为footer
  88.                 （它将被部署到区域名称为right的网格区中）  */
  89.             grid-area: footer;
  90.         }
  92.         /* tips：某个单元格，如果放入了多个元素，那么后放入的元素会放在上面，遮挡住先放的 */
  93.     </style>
  94. </head>
  96. <body>
  97.     <!-- 一个以上的单元格组成的矩形块,叫网格区 -->
  98.     <!-- 1.先写一个容器,5个项目 -->
  99.     <div class="container">
  100.         <div class="item item1">1</div>
  101.         <div class="item item2">2</div>
  102.         <div class="item item3">3</div>
  103.         <div class="item item4">4</div>
  104.         <div class="item item5">5</div>
  105.     </div>
  106. </body>
  108. </html>

5.4 命名网格区域线默认名称

  • 区域起始行/列: 区域名称-start, 如header-start / header-start,表示区域起始行/区域起始列
  • 区域结束行/列: 区域名称-end,如header-end / header-end,表示区域结束行/区域结束列
  • 前面几种填充方式, 都是把项目放到一个网格区域中, 这种填充方式可以把项目放到多个网格区域中.

demo8-命名网格区域线默认名称:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>网格区域线的的默认名称</title>
  8.     <style>
  9.         /* 2.grid容器的样式 */
  10.         .container {
  11.             /* 2.1.容器大小&背景色 */
  12.             width: 400px;
  13.             height: 400px;
  14.             background-color: wheat;
  16.             /* 2.2.创建grid容器 */
  17.             display: grid;
  19.             /* 2.3.设置项目在grid容器中的填充方案 */
  20.             /* 2.3.1.默认是行优先(先行后列)的方式 */
  21.             grid-auto-flow: row;
  22.             /* 2.3.2.列优先的方式: */
  23.             /* grid-auto-flow: column; */
  25.             /* △2.4.设置显式3行2列布局*/
  26.             grid-template-columns: 80px 1fr;
  27.             grid-template-rows: 40px 1fr 40px;
  29.             /* △2.5.设置每个网格区域所占的单元格及其网格名称 */
  30.             /* tips:相同网格名称的单元格将会合并 */
  31.             /* 结合火狐浏览器的开发者工具-查看器-布局-勾选“显示区域名称”来看设置 */
  32.             /* tips:项目1被布局在header网格区域，在此前提下，项目2,3默认会分别布局到
  33.                 第二行的第1,2个单元格中，所以就不用显式的写出网格名称了，用.代替 */
  34.             /* tips:网格区域设置好后，header-start对应水平和垂直的第一条网格线；
  35.                 header-end对应水平和垂直的第3条网格线；同理，footer-start对应水平第3条
  36.                 网格线，垂直第1条网格线；footer-end对应水平第3条网格线，垂直第3条网格线 */
  37.             grid-template-areas: 
  38.                 "header header"
  39.                 ". . "
  40.                 "footer footer";
  41.         }
  43.         /* △3.设置每一个项目部署到的网格区域 */
  44.         /* 语法:grid-area: row-start / col-start / row-end / col-end */
  45.         /* 火狐浏览器的"查看器"的"布局"页签中勾选"显示区域名称" */
  46.         .item.item1 {
  47.             background-color: lightgreen;
  48.             /* 3.1.第一个项目部署到的区域名称设置为header
  49.                 (它将被部署到区域名称为header的网格区中) */
  50.             grid-area: header-start / header-start / header-end / header-end;
  52.         }
  54.         .item.item2 {
  55.             background-color: lightpink;
  56.             /* 3.2.第二个项目部署到的区域名称设置为left
  57.                 （它将被部署到区域名称为left的网格区中） */
  58.             /* 结合2.5.的第二个tips，不用设置该网格名称了，删掉 */
  59.             /* grid-area:left; */
  61.         }
  63.         .item.item3 {
  64.             background-color: yellow;
  65.             /* 3.3.第三个项目部署到的区域名称设置为main
  66.                 （它将被部署到区域名称为main的网格区中） */
  67.             /* 结合2.5.的第二个tips，不用设置该网格名称了，删掉 */
  68.             /* grid-area:main; */
  70.         }
  72.         .item.item4 {
  73.             background-color: brown;
  75.             /* 3.5.第五个项目部署到的区域名称设置为footer
  76.                 （它将被部署到区域名称为right的网格区中）  */
  77.             grid-area: footer-start / footer-start / footer-end / footer-end;
  78.         }
  80.         /* tips：某个单元格，如果放入了多个元素，那么后放入的元素会放在上面，遮挡住先放的 */
  81.     </style>
  82. </head>
  84. <body>
  85.     <!-- 一个以上的单元格组成的矩形块,叫网格区 -->
  86.     <!-- 1.先写一个容器,4个项目 -->
  87.     <div class="container">
  88.         <div class="item item1">1</div>
  89.         <div class="item item2">2</div>
  90.         <div class="item item3">3</div>
  91.         <div class="item item4">4</div>
  92.     </div>
  93. </body>
  95. </html>

6. 设置所有项目在容器中的对齐方式

  • justify-content: 设置所有项目在容器中水平方向的对齐方式
  • align-content: 设置所有项目在容器中垂直方向的对齐方式
  • place-content: 上面二个属性的简写, place-content: 垂直对齐方式 水平对齐方式

demo9-设置所有项目在容器中的对齐方式:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>单元格在容器中的对齐方式</title>
  8.     <style>
  9.         /* 2.grid容器的样式 */
  10.         .container {
  11.             /* 2.1.容器大小&背景色 */
  12.             width: 400px;
  13.             height: 400px;
  14.             background-color: wheat;
  16.             /* 2.2.创建grid容器 */
  17.             display: grid;
  19.             /* 2.3.设置项目在grid容器中的填充方案 */
  20.             /* 2.3.1.默认是行优先(先行后列)的方式 */
  21.             grid-auto-flow: row;
  22.             /* 2.3.2.列优先的方式: */
  23.             /* grid-auto-flow: column; */
  25.             /* 2.4.通过设置行和列, 显式指定grid容器中生成的单元格数量及其大小 */
  26.             /* 例: 三列二行, 行列都设置为100px */
  27.             grid-template-columns: repeat(3, 50px);
  28.             grid-template-rows: repeat(3, 50px);
  29.         }
  31.         /* 2.grid容器中项目的样式 */
  32.         .item {
  33.             background-color: violet;
  34.             height: 50px;
  35.             width: 50px;
  36.         }
  38.         /* 3.设置单元格在容器中的对齐方式 */
  39.         .container {
  40.             /* 3.1.用justify-content设置单元格在优先布局的方向上的对齐方式 */
  41.             /* 值域(和flex的justify-content/align-content值类似)：
  42.                 start, end, center, space-between, space-around, space-evenly */
  43.             justify-content: space-evenly;
  45.             /* 3.2.用align-content设置单元格在非优先布局的方向上的对齐方式 */
  46.             /* 值域(和flex的justify-content/align-content值类似)：
  47.                 start, end, center, space-between, space-around, space-evenly */
  48.             align-content: center;
  50.             /* 3.3.用space-content同时设置justify-content和align-content */
  51.             /* 使用方法：place-content [align-content] [justify-content] */
  52.             place-content: space-between center;
  54.         }
  55.     </style>
  56. </head>
  58. <body>
  59.     <!-- 1.先写一个容器,里面放7个项目 -->
  60.     <div class="container">
  61.         <div class="item item1">1</div>
  62.         <div class="item item2">2</div>
  63.         <div class="item item3">3</div>
  64.         <div class="item item4">4</div>
  65.         <div class="item item5">5</div>
  66.         <div class="item item6">6</div>
  67.         <div class="item item7">7</div>
  68.         <div class="item item8">8</div>
  69.         <div class="item item9">9</div>
  70.     </div>
  71. </body>
  73. </html>

7. 设置所有项目在单元格或网格区域内的对齐方式

  • justify-items: 设置所有项目在单元格/网格区域中水平方向的对齐方式
  • align-items: 设置所有项目在单元格/网格区域中垂直方向的对齐方式
  • place-items: 上面二个属性的简写, place-items: 垂直对齐方式 水平对齐方式

demo10-设置所有项目在单元格或网格区域内的对齐方式:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>全局设置所有项目在单元格中的对齐方式</title>
  8.     <style>
  9.         /* 2.grid容器的样式 */
  10.         .container {
  11.             /* 2.1.容器大小&背景色 */
  12.             width: 400px;
  13.             height: 400px;
  14.             background-color: wheat;
  16.             /* 2.2.创建grid容器 */
  17.             display: grid;
  19.             /* 2.3.设置项目在grid容器中的填充方案 */
  20.             /* 2.3.1.默认是行优先(先行后列)的方式 */
  21.             grid-auto-flow: row;
  22.             /* 2.3.2.列优先的方式: */
  23.             /* grid-auto-flow: column; */
  25.             /* 2.4.通过设置行和列, 显式指定grid容器中生成的单元格数量及其大小 */
  26.             /* 例: 三列三行, 1:1:1 */
  27.             grid-template-columns: repeat(3, 1fr);
  28.             grid-template-rows: repeat(3, 1fr);
  29.         }
  31.         /* 2.grid容器中项目的样式 */
  32.         .item {
  33.             background-color: violet;
  34.             height: 50px;
  35.             /* width: 50px; */
  36.         }
  38.         /* 3.设置项目在单元格中的对齐方式 */
  39.         .container {
  40.             /* 3.1.用justify-items设置单元格在优先布局的方向上的对齐方式 */
  41.             /* 值域(和flex的align-items的值类似)：start, end, center, stretch(默认值, 去掉width才起作用) */
  42.             justify-items: space-evenly;
  44.             /* 3.2.用align-items设置单元格在非优先布局的方向上的对齐方式 */
  45.             /* 值域(和flex的align-items的值类似)：start, end, center, stretch(默认值, 去掉height才起作用) */
  46.             align-items: center;
  48.             /* 3.3.用space-items同时设置justify-items和align-items */
  49.             /* 使用方法：place-items [align-items] [justify-items] */
  50.             place-items: center stretch;
  52.         }
  53.     </style>
  54. </head>
  56. <body>
  57.     <!-- 1.先写一个容器,里面放7个项目 -->
  58.     <div class="container">
  59.         <div class="item item1">
  60.             <span>1</span>
  61.             <span>2</span>
  62.             <span>3</span>
  63.         </div>
  64.         <div class="item item2">2</div>
  65.         <div class="item item3">3</div>
  66.         <div class="item item4">4</div>
  67.         <div class="item item5">5</div>
  68.         <div class="item item6">6</div>
  69.         <div class="item item7">7</div>
  70.         <div class="item item8">8</div>
  71.         <div class="item item9">9</div>
  72.     </div>
  73. </body>
  75. </html>

8. 设置某个项目在单元格或网格区域内的对齐方式

  • justify-self: 设置某个项目在单元格/网格区域中水平方向的对齐方式
  • align-self: 设置某个项目在单元格/网格区域中垂直方向的对齐方式
  • place-self: 上面二个属性的简写, place-self: 垂直对齐方式 水平对齐方式

demo11-设置某个项目在单元格或网格区域内的对齐方式:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>单独设置某个项目在单元格中的对齐方式</title>
  8.     <style>
  9.         /* 2.grid容器的样式 */
  10.         .container {
  11.             /* 2.1.容器大小&背景色 */
  12.             width: 400px;
  13.             height: 400px;
  14.             background-color: wheat;
  16.             /* 2.2.创建grid容器 */
  17.             display: grid;
  19.             /* 2.3.设置项目在grid容器中的填充方案 */
  20.             /* 2.3.1.默认是行优先(先行后列)的方式 */
  21.             grid-auto-flow: row;
  22.             /* 2.3.2.列优先的方式: */
  23.             /* grid-auto-flow: column; */
  25.             /* 2.4.通过设置行和列, 显式指定grid容器中生成的单元格数量及其大小 */
  26.             /* 例: 三列三行, 1:1:1 */
  27.             grid-template-columns: repeat(3, 1fr);
  28.             grid-template-rows: repeat(3, 1fr);
  29.         }
  31.         /* 2.grid容器中项目的样式 */
  32.         .item {
  33.             background-color: violet;
  34.             height: 50px;
  35.             width: 50px;
  36.         }
  38.         /* 3.全局设置项目在单元格中的对齐方式 */
  39.         .container {
  40.             /* 3.1.用justify-items设置单元格在优先布局的方向上的对齐方式 */
  41.             /* 值域(和flex的align-items的值类似)：start, end, center, stretch(默认值, 去掉width才起作用) */
  42.             justify-items: space-evenly;
  44.             /* 3.2.用align-items设置单元格在非优先布局的方向上的对齐方式 */
  45.             /* 值域(和flex的align-items的值类似)：start, end, center, stretch(默认值, 去掉height才起作用) */
  46.             align-items: center;
  48.             /* 3.3.用space-items同时设置justify-items和align-items */
  49.             /* 使用方法：place-items [align-items] [justify-items] */
  50.             place-items: center center;
  52.         }
  54.         /* 4.单独设置第5个单元格中的项目在单元格中的对齐方式 */
  55.         .item.item5 {
  56.             /* 项目在容器优先布局方向上的对齐方式 */
  57.             justify-self: start;
  58.             /* 项目在容器非优先布局方向上的对齐方式 */
  59.             align-self: end;
  61.             /* 用space-self同时设置justify-self和align-self的值 */
  62.             /* 使用方法:space-self [align-self] [justify-self] */
  63.             place-self: start end;
  65.         }
  66.     </style>
  67. </head>
  69. <body>
  70.     <!-- 1.先写一个容器,里面放7个项目 -->
  71.     <div class="container">
  72.         <div class="item item1">1
  73.         </div>
  74.         <div class="item item2">2</div>
  75.         <div class="item item3">3</div>
  76.         <div class="item item4">4</div>
  77.         <div class="item item5">5</div>
  78.         <div class="item item6">6</div>
  79.         <div class="item item7">7</div>
  80.         <div class="item item8">8</div>
  81.         <div class="item item9">9</div>
  82.     </div>
  83. </body>
  85. </html>

9. 设置容器中行与列之间的间距/间隙

  • column-gap: 列间距
  • row-gap: 行间距
  • gap: 行间距 列间距: 简写
  • gap: 值: 行与列相等,可只写一个值

demo12-设置容器中行与列之间的间距/间隙:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>设置单元格之间的间隙大小</title>
  8.     <style>
  9.         /* 2.grid容器的样式 */
  10.         .container {
  11.             /* 2.1.容器大小&背景色 */
  12.             width: 400px;
  13.             height: 400px;
  14.             background-color: wheat;
  16.             /* 2.2.创建grid容器 */
  17.             display: grid;
  19.             /* 2.3.设置项目在grid容器中的填充方案 */
  20.             /* 2.3.1.默认是行优先(先行后列)的方式 */
  21.             grid-auto-flow: row;
  22.             /* 2.3.2.列优先的方式: */
  23.             /* grid-auto-flow: column; */
  25.             /* 2.4.通过设置行和列, 显式指定grid容器中生成的单元格数量及其大小 */
  26.             /* 例: 三列三行, 1:1:1 */
  27.             grid-template-columns: repeat(3, 1fr);
  28.             grid-template-rows: repeat(3, 1fr);
  29.         }
  31.         /* 2.grid容器中项目的样式 */
  32.         .item {
  33.             background-color: violet;
  34.         }
  36.         /* 3.设置单元格之间的间隙大小 */
  37.         .container {
  38.             /* 3.1.用row-gap设置单元格在水平方向上的间隙大小 */
  39.             row-gap: 10px;
  41.             /* 3.2.用column-gap设置单元格在垂直方向上的间隙大小 */
  42.             column-gap: 5px;
  44.             /* 3.3.用gap同时设置column-gap和row-gap */
  45.             /* 使用方法：gap [row-gap] [column-gap] */
  46.             gap: 5px 10px;
  48.         }
  49.     </style>
  50. </head>
  52. <body>
  53.     <!-- 1.先写一个容器,里面放7个项目 -->
  54.     <div class="container">
  55.         <div class="item item1">1
  56.         </div>
  57.         <div class="item item2">2</div>
  58.         <div class="item item3">3</div>
  59.         <div class="item item4">4</div>
  60.         <div class="item item5">5</div>
  61.         <div class="item item6">6</div>
  62.         <div class="item item7">7</div>
  63.         <div class="item item8">8</div>
  64.         <div class="item item9">9</div>
  65.     </div>
  66. </body>
  68. </html>

学习心得

  • grid布局, 对比flex布局, 虽然flex被看做一维布局, grid则被看做二维布局, 但flex设置为可折行布局后, 其实也具备了二维布局的形态. 我觉得, grid布局的各种属性设置, 可以简化flex实现二维布局和复杂布局的难度. 比如: 老师上课时说到布局demo(如下图), 使用flex嵌套+定位才实现, 而使用grid的”网格区域”属性设置, 可以通过简单几个设置, 这个布局demo中”跨行, 跨列”的难点. 之前有个疑问, 就是什么情况下用flex布局, 什么情况下用grid布局, 其实, 这个问题并不需要太纠结, 哪个实现起来简单就用哪个.

上一条：弹性盒子flex在项目样式举例下一条：php作用域的区别与作用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多