search

博客列表 >Grid布局入门知识学习

Grid布局入门知识学习

我是郭富城
我是郭富城原创
2020年04月15日 02:01:32413浏览

作业演示：https://php520.vip/4.13/4.13.html

1. 基本术语

  • 容器: 使用网格布局的元素
  • 项目: 容器中的子元素
  • 网格线: 将容器划分为行与列的直线
  • 显式网络: 由用户根据项目数量指示容器生成的网格
  • 隐式网格: 由容器根据项目数量自动生成的网格
  • 单元格: 项目放置的具体空间
  • 网格区域: 一个以上的单元格组成的矩形区域

网格布局的基本步骤: 1. 生成网格; 2. 放置项目
网格布局实际上就是表格布局
Grid 布局/栅格布局/网格布局

2.grid布局常用属性

2.1 创建Grid容器

  • 通过display: grid;定义容器为栅格布局

  • 代码实例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>创建Grid容器</title>
    7.   <style>
    8.     .container {
    9.       /* 容器大小 */
    10.       width: 400px;
    11.       height: 400px;
    12.       background-color: wheat;
    13.       /* 创建Grid容器 */
    14.       display: grid;
    15.       /* 设置项目在网格中的填充方案，默认行优先 */
    16.       grid-auto-flow: row;
    17.       /* grid-auto-flow: column; */
    18.       /* 显式的划分行与列,比如划分为两行三列 */
    19.       grid-template-columns: 100px 100px 100px;
    20.       grid-template-rows: 100px 100px;
    21.       /* 对于放置不下的项目会隐式生成单元格 */
    22.       grid-auto-rows: auto;
    23.       grid-auto-rows: 150px;
    24.     }
    26.     .item {
    27.       background-color: lightskyblue;
    28.       font-size: 2rem;
    29.     }
    30.   </style>
    31. </head>
    32. <body>
    33.   <div class="container">
    34.     <div class="item item1">1</div>
    35.     <div class="item item2">2</div>
    36.     <div class="item item3">3</div>
    37.     <div class="item item4">4</div>
    38.     <div class="item item5">5</div>
    39.     <div class="item item6">6</div>
    40.     <div class="item item7">7</div>
    41.   </div>
    42. </body>
    43. </html>

2.2设置单元格的数量和尺寸

  • 通过grid-template-columns/rows，在容器中显式地划分行与列,生成指定数量的单元格来放置项目

  • 代码实例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>设置单元格的数量和尺寸</title>
    7.   <style>
    8.     .container {
    9.       /* 容器大小 */
    10.       width: 400px;
    11.       height: 400px;
    12.       background-color: wheat;
    13.       /* 创建Grid容器 */
    14.       display: grid;
    15.     }
    16.     .container {
    17.       /* 固定值 */
    18.       grid-template-columns: 100px 100px 100px;
    19.       grid-template-rows: 100px 100px 100px;
    20.       /* 百分比 */
    21.       grid-template-columns: 20% 30% auto;
    22.       grid-template-rows: 100px auto 100px;
    23.       /* 按比例 */
    24.       grid-template-columns: 1fr 2fr 2fr;
    25.       grid-template-rows: 1fr auto 2fr;
    26.       /* 重复设置 */
    27.       grid-template-columns: repeat(3, 100px);
    28.       grid-template-rows: repeat(3, 100px);
    30.       /* 按分组来设置：（50px-100px） */
    31.       grid-template-columns: repeat(2, 50px 100px);
    32.       /* 弹性设置 */
    33.       grid-template-columns: repeat(2, minmax(50px, 100px));
    34.       grid-template-rows: repeat(3, minmax(150px, 1fr));
    35.       /* 自动填充 */
    36.       grid-template-columns: repeat(auto-fill, 100px);
    37.       grid-template-rows: repeat(auto-fill, 100px);
    38.     }
    40.     .item {
    41.       background-color: lightskyblue;
    42.       font-size: 2rem;
    43.     }
    44.   </style>
    45. </head>
    46. <body>
    47.   <div class="container">
    48.     <div class="item item1">1</div>
    49.     <div class="item item2">2</div>
    50.     <div class="item item3">3</div>
    51.     <div class="item item4">4</div>
    52.     <div class="item item5">5</div>
    53.     <div class="item item6">6</div>
    54.     <div class="item item7">7</div>
    55.   </div>
    56. </body>
    57. </html>

2.3 使用默认的网格线划分单元格

  • 默认的网格线具有编号，可以通过属性grid-row-start,grid-row-end,grid-column-start,grid-column-end来划分具体的单元格。
    1. grid-row-start: 1;
    2. grid-row-end: 3;
    3. grid-column-start: 1;
    4. grid-column-end: 3;
  • 缩写：
    1. grid-row: 1 / 3;
    2. grid-column: 3 / 5;
  • 使用偏移量来简化
    1. grid-row: 3 / span 2;
    2. grid-column: 1 / span 2;

  • 代码实例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>使用默认的网格线划分单元格</title>
    7.   <style>
    8.     .container {
    9.       /* 容器大小 */
    10.       width: 400px;
    11.       height: 400px;
    12.       background-color: wheat;
    13.       /* 创建Grid容器 */
    14.       display: grid;
    15.     }
    16.     .container {
    17.       grid-template-columns: repeat(4, 1fr);
    18.       grid-template-rows: repeat(4, 1fr);
    19.     }
    20.     .item {
    21.       font-size: 2rem;
    22.     }
    23.     .item.item1 {
    24.       background-color: lightgreen;
    25.       grid-row-start: 1;
    26.       grid-row-end: 3;
    27.       grid-column-start: 1;
    28.       grid-column-end: 3;
    30.       /* 右下角开始 */
    31.       /* grid-row-start: -1;
    32.       grid-row-end: -3;
    33.       grid-column-start: -1;
    34.       grid-column-end: -3; */
    36.       /* 放到中间 */
    37.       /* grid-row-start: 2;
    38.       grid-row-end: 4;
    39.       grid-column-start: 2;
    40.       grid-column-end: 4; */
    42.       /* 填满空间 */
    43.       /* grid-row-start: 1;
    44.       grid-row-end: -1;
    45.       grid-column-start: 1;
    46.       grid-column-end: -1; */
    47.     }
    48.     /* 简写 */
    49.     .item.item2 {
    50.       background-color: lightpink;
    51.       /* grid-row-start: 1;
    52.       grid-row-end: 3;
    53.       grid-column-start: 3;
    54.       grid-column-end: 5; */
    56.       grid-row: 1 / 3;
    57.       grid-column: 3 / 5;
    58.     }
    60.     /* 使用偏移量来简化 */
    61.     .item.item3 {
    62.       background-color: yellow;
    63.       /* grid-row-start: 3;
    64.       grid-row-end: span 2;
    65.       grid-column-start: 1;
    66.       grid-column-end: span 2; */
    67.       grid-row: 3 / span 2;
    68.       grid-column: 1 / span 2;
    69.     }
    70.     .item.item4 {
    71.       background-color: whitesmoke;
    72.       /* grid-row-start: 3; */
    73.       grid-row-end: span 2;
    74.       /* grid-column-start: 3; */
    75.       grid-column-end: span 2;
    76.     }
    77.   </style>
    78. </head>
    79. <body>
    80.   <div class="container">
    81.     <div class="item item1">1</div>
    82.     <div class="item item2">2</div>
    83.     <div class="item item3">3</div>
    84.     <div class="item item4">4</div>
    85.   </div>
    86. </body>
    87. </html>

    2.4 使用命名(自定义)的网格线划分单元格

  • 使用语义化的名称替代容器自动生成的数字网线线编号
  • 同一条网络线可以有多个别名
  • 例如：
    1. .container {
    2. grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];
    3. grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
    4.     }

  • 代码示例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>使用命名(自定义)的网格线划分单元格</title>
    7.   <style>
    8.     * {
    9.       padding: 0;
    10.       margin: 0;
    11.     }
    12.     .container {
    13.       /* 容器大小 */
    14.       width: 400px;
    15.       height: 400px;
    16.       background-color: wheat;
    17.       /* 创建Grid容器 */
    18.       display: grid;
    19.     }
    20.     .container {
    21.       grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];
    22.       grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
    23.     }
    24.     .item {
    25.       font-size: 2rem;
    26.     }
    27.     .item.item1 {
    28.       background-color: lightgreen;
    29.       /* 默认就是跨越一行一列,所以可以省略 */
    30.       grid-row-start: r2-start;
    31.       grid-row-end: span;
    32.       grid-column-start: c3-start;
    33.       grid-column-end: span;
    34.     }
    35.     /* 简写 */
    36.     .item.item2 {
    37.       background-color: lightpink;
    38.       grid-row: 1 / 2;
    39.       grid-column: 1 / 4;
    40.     }
    42.     /* 使用偏移量来简化 */
    43.     .item.item3 {
    44.       background-color: yellow;
    45.       grid-row-end: span 2;
    46.       grid-column-end: span 2;
    47.     }
    48.     .item.item4 {
    49.       background-color: whitesmoke;
    50.     }
    51.   </style>
    52. </head>
    53. <body>
    54.   <div class="container">
    55.     <div class="item item1">1</div>
    56.     <div class="item item2">2</div>
    57.     <div class="item item3">3</div>
    58.     <div class="item item4">4</div>
    59.   </div>
    60. </body>
    61. </html>

2.5 网格区域

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

  • 代码实例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>网格区域</title>
    7.   <style>
    8.     * {
    9.       padding: 0;
    10.       margin: 0;
    11.     }
    12.     .container {
    13.       /* 容器大小 */
    14.       width: 400px;
    15.       height: 400px;
    16.       background-color: wheat;
    17.       /* 创建Grid容器 */
    18.       display: grid;
    19.     }
    20.     .container {
    21.       grid-template-columns: repeat(4, 1fr);
    22.       grid-template-rows: repeat(4, 1fr);
    23.     }
    25.     .item {
    26.       font-size: 2rem;
    27.     }
    28.     .item.item1 {
    29.       background-color: lightgreen;
    30.       grid-area: 1 / 1 / 2 / 5;
    31.       /* 行开始 / 列开始 / 行结束 / 列结束 */
    32.       grid-area: 1 / 1 / span 1 / span 4;
    33.       /* 当前位置可以省略 */
    34.       grid-area: span 1 / span 4;
    35.     }
    36.     .item.item2 {
    37.       background-color: lightpink;
    38.       grid-area: 2 / 1 / 4 /2;
    39.     }
    41.     .item.item3 {
    42.       background-color: yellow;
    43.     }
    44.     .item.item4 {
    45.       background-color: whitesmoke;
    46.     }
    47.     .item.item5 {
    48.       background-color: violet;
    49.     }
    50.   </style>
    51. </head>
    52. <body>
    53.   <div class="container">
    54.     <div class="item item1">1</div>
    55.     <div class="item item2">2</div>
    56.     <div class="item item3">3</div>
    57.     <div class="item item4">4</div>
    58.     <div class="item item5">5</div>
    59.   </div>
    60. </body>
    61. </html>

    2.6 命名(自定义)网格区域

  • 设置命名网格区域 ,相同名称的命名区域会合并
  • 可以为每一个网格区域设置一个语义化的名称
  • 具有名称的网络区域称之为命名区域
  • 项目设置的区域名称后,会自动填充到容器中应对的命名区域中
  • grid-template-areas:属性

  • 代码示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>命名(自定义)网格区域</title>
    7.   <style>
    8.     * {
    9.       padding: 0;
    10.       margin: 0;
    11.     }
    12.     .container {
    13.       /* 容器大小 */
    14.       width: 400px;
    15.       height: 400px;
    16.       background-color: wheat;
    17.       /* 创建Grid容器 */
    18.       display: grid;
    19.     }
    20.     .container {
    21.       grid-template-columns: 80px 1fr 80px;
    22.       grid-template-rows: 40px 1fr 40px;
    23.     }
    24.     .container {
    25.       /* 设置命名网格区域 ,相同名称的命名区域会合并*/
    26.       grid-template-areas:
    27.         "header header header"
    28.         "left main right"
    29.         "footer footer footer";
    30.     }
    31.     .item {
    32.       font-size: 2rem;
    33.     }
    34.     .item.item1 {
    35.       background-color: lightgreen;
    36.       grid-area: header;
    37.     }
    38.     .item.item2 {
    39.       background-color: lightpink;
    40.       grid-area: left;
    41.     }
    43.     .item.item3 {
    44.       background-color: yellow;
    45.       grid-area: main;
    46.     }
    47.     .item.item4 {
    48.       background-color: whitesmoke;
    49.       grid-area: right;
    50.     }
    51.     .item.item5 {
    52.       background-color: violet;
    53.       grid-area: footer;
    54.     }
    55.   </style>
    56. </head>
    57. <body>
    58.   <div class="container">
    59.     <div class="item item1">1</div>
    60.     <div class="item item2">2</div>
    61.     <div class="item item3">3</div>
    62.     <div class="item item4">4</div>
    63.     <div class="item item5">5</div>
    64.   </div>
    65. </body>
    66. </html>

2.7 网格区域占位符

  • 当项目默认已到填充到正确的区域中,无需设置时,可使用”.”做为占位符
  • 演示
    1. .container {
    2.       /* 设置命名网格区域 ,相同名称的命名区域会合并*/
    3.       grid-template-areas:
    4.         "header header header"
    5.         ". . ."
    6.         "footer footer footer";
    7.     }

2.8 网格区域线的默认名称

  • 区域起始行/列: 区域名称-start, 如header-start / header-start,表示区域起始行/区域起始列
  • 区域结束行/列: 区域名称-end,如header-end / header-end,表示区域结束行/区域结束列

2.9 设置单元格在容器中的对齐方式

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

  • 代码示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>设置单元格在容器中的对齐方式</title>
    7.   <style>
    8.     * {
    9.       padding: 0;
    10.       margin: 0;
    11.     }
    12.     .container {
    13.       /* 容器大小 */
    14.       width: 400px;
    15.       height: 400px;
    16.       background-color: wheat;
    17.       /* 创建Grid容器 */
    18.       display: grid;
    19.     }
    20.     .container {
    21.       grid-template-columns: repeat(3, 50px);
    22.       grid-template-rows: repeat(3, 50px);
    23.       justify-content: center;
    24.       align-content: center;
    25.       justify-content: space-between;
    26.       justify-content: space-around;
    27.       justify-content: space-evenly;
    28.       align-content: space-between;
    29.       align-content: space-around;
    30.       align-content: space-evenly;
    31.     }
    32.     .container {
    33.       /* justify-content: stretch;
    34.       grid-template-columns: repeat(3, auto);
    35.       align-content: stretch;
    36.       grid-template-rows: repeat(3, 1fr); */
    38.       /* 简写 */
    39.       place-content: center start;
    40.       place-content: center center;
    41.       place-content: center;
    42.     }
    43.     .item {
    44.       background-color: violet;
    45.       font-size: 2rem;
    46.     }
    47.   </style>
    48. </head>
    49. <body>
    50.   <div class="container">
    51.     <div class="item item1">1</div>
    52.     <div class="item item2">2</div>
    53.     <div class="item item3">3</div>
    54.     <div class="item item4">4</div>
    55.     <div class="item item5">5</div>
    56.     <div class="item item6">6</div>
    57.     <div class="item item7">7</div>
    58.     <div class="item item8">8</div>
    59.     <div class="item item9">9</div>
    60.   </div>
    61. </body>
    62. </html>

    2.10 设置项目在单元格的对齐方式

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

    看到items就是项目

2.11 设置某个项目在单元格的对齐方式

  • justify-self: 设置某个项目在单元格/网格区域中水平方向的对齐方式
  • align-self: 设置某个项目在单元格/网格区域中垂直方向的对齐方式

  • place-self: 上面二个属性的简写, place-self: 垂直对齐方式 水平对齐方式

  • 代码实例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>设置某个项目在单元格的对齐方式</title>
    7.   <style>
    8.     * {
    9.       padding: 0;
    10.       margin: 0;
    11.     }
    12.     .container {
    13.       /* 容器大小 */
    14.       width: 400px;
    15.       height: 400px;
    16.       background-color: wheat;
    17.       /* 创建Grid容器 */
    18.       display: grid;
    19.     }
    20.     .container {
    21.       grid-template-columns: repeat(3, 1fr);
    22.       grid-template-rows: repeat(3, 1fr);
    23.     }
    24.     .container {
    25.       justify-items: stretch;
    26.       align-items: stretch;
    28.       justify-items: center;
    29.       align-items: center;
    30.       place-items: start end;
    31.       place-items: center;
    32.     }
    33.     .item {
    34.       width: 50px;
    35.       height: 50px;
    36.       background-color: violet;
    37.       font-size: 2rem;
    38.     }
    39.     .item.item5 {
    40.       justify-self: end;
    41.       align-self: end;
    42.       place-self: start;
    43.       place-self: center;
    44.     }
    45.   </style>
    46. </head>
    47. <body>
    48.   <div class="container">
    49.     <div class="item item1">1</div>
    50.     <div class="item item2">2</div>
    51.     <div class="item item3">3</div>
    52.     <div class="item item4">4</div>
    53.     <div class="item item5">5</div>
    54.     <div class="item item6">6</div>
    55.     <div class="item item7">7</div>
    56.     <div class="item item8">8</div>
    57.     <div class="item item9">9</div>
    58.   </div>
    59. </body>
    60. </html>

2.12 行间距，列间距

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

3.学习总结

通过学习grid布局，对比之前学习的浮动元素，定位元素，以及flex布局，grid是一种全新的二维布局，比flex布局多了一维，不仅加速了前端的布局开发，还节省了代码。这对于维护一个项目来说是一个颠覆性的创新方法。

上一条：Grid 布局（网格布局）基础知识下一条：Go基本语法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多