Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html基础知识学习利用grid网格布局简短代码实现圣杯布局
Blogger Information
Blog 19
fans 0
comment 0
visits 16184
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html基础知识学习利用grid网格布局简短代码实现圣杯布局
῀℡῀ᵒᵐᵍᵎᵎᵎ
Original
925 people have browsed it

html基础知识学习利用grid网格布局

1.利用grid画格子，定义一个网格

  • 可以给父容器的display属性设置为grid来定义一个网格。这样你就可以使用grid-template-columns和grid-template-rows属性来创建一个网格。
  • 格子的比例如下面的100px可以用百分比或者用单位fr来表示，均能达到同样的效果

    1.1代码演示

    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>Document</title>
    7. </head>
    8. <style>
    9.   body {
    10.     padding: 10px;
    11.   }
    12.   .container {
    13.     display: grid;
    14.    /* 这下面的100px可以用百分比或者1fr来表示，也是同样的效果 */
    15.     grid-template-columns: 100px 100px 100px;
    16.     grid-template-rows: 100px 100px 100px;
    17.   }
    18.   .box {
    19.     background-color: #444;
    20.     color: #fff;
    21.     font-size: 150%;
    22.     padding: 20px;
    23.   }
    24.   .container :nth-of-type(2n) {
    25.     background-color: red;
    26.   }
    27. </style>
    28. <body>
    29.   <div class="container">
    30.     <div class="box box1">1</div>
    31.     <div class="box box2">2</div>
    32.     <div class="box box3">3</div>
    33.     <div class="box box4">4</div>
    34.     <div class="box box5">5</div>
    35.     <div class="box box6">6</div>
    36.     <div class="box box7">7</div>
    37.     <div class="box box8">8</div>
    38.     <div class="box box9">9</div>
    39.     <!-- <div class="box box10">10</div> -->
    40.   </div>
    41. </body>
    42. </html>

    1.2演示截图

2.基于网格线的占位区

  • 对于网格线，在网格布局中有两种，一种是列线,另一种是行线。对应的个网格单元格都有列线起始线grid-column-start、列线终止线grid-column-end和行线起始线grid-row-start、行线终止线grid-row-end
  • 可以更具网格线的编号来定位网格的位置，如下面的box1、box9

2.1代码演示

  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>Document</title>
  7.   </head>
  8.   <style>
  9.     body {
  10.       padding: 10px;
  11.     }
  12.     .container {
  13.       display: grid;
  14.       grid-template-columns: 100px 100px 100px;
  15.       grid-template-rows: 100px 100px 100px;
  16.     }
  17.     .box {
  18.       background-color: #444;
  19.       color: #fff;
  20.       font-size: 150%;
  21.       padding: 20px;
  22.     }
  23.     .container :nth-of-type(2n) {
  24.       background-color: red;
  25.     }
  27.     /* 可以更具网格线的编号来定位网格的位置 */
  28.     .box1 {
  29.       grid-column-start: 1;
  30.       grid-column-end: 2;
  31.       grid-row-start: 1;
  32.       grid-row-end: 2;
  33.       background-color: lawngreen;
  34.     }
  36.     .box9 {
  37.       grid-column-start: 3;
  38.       grid-column-end: 4;
  39.       grid-row-start: -2;
  40.       grid-row-end: -1;
  41.       background-color: rgb(202, 122, 255);
  42.     }
  43.   </style>
  44.   <body>
  45.     <div class="container">
  46.       <div class="box box1">1</div>
  47.       <div class="box box2">2</div>
  48.       <div class="box box3">3</div>
  49.       <div class="box box4">4</div>
  50.       <div class="box box5">5</div>
  51.       <div class="box box6">6</div>
  52.       <div class="box box7">7</div>
  53.       <div class="box box8">8</div>
  54.       <div class="box box9">9</div>
  55.       <!-- <div class="box box10">10</div> -->
  56.     </div>
  57.   </body>
  58. </html>

2.2演示截图

3.基于网格线的占位区（定位网格的位置）

  • 定位网格的位置，使网格交换位置

    3.1代码演示

    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>Document</title>
    7. </head>
    8. <style>
    9.   body {
    10.     padding: 10px;
    11.   }
    12.   .container {
    13.     display: grid;
    14.     grid-template-columns: 100px 100px 100px;
    15.     grid-template-rows: 100px 100px 100px;
    16.   }
    17.   .box {
    18.     background-color: #444;
    19.     color: #fff;
    20.     font-size: 150%;
    21.     padding: 20px;
    22.   }
    23.   .container :nth-of-type(2n) {
    24.     background-color: red;
    25.   }
    27.   /* 可以更具网格线的编号来定位网格的位置 */
    28.   .box9 {
    29.     grid-column-start: 1;
    30.     grid-column-end: 2;
    31.     grid-row-start: 1;
    32.     grid-row-end: 2;
    33.     background-color: lawngreen;
    34.   }
    36.   .box1 {
    37.     grid-column-start: 3;
    38.     grid-column-end: 4;
    39.     grid-row-start: -2;
    40.     grid-row-end: -1;
    41.     background-color: rgb(202, 122, 255);
    42.   }
    43. </style>
    44. <body>
    45.   <div class="container">
    46.     <div class="box box1">1</div>
    47.     <div class="box box2">2</div>
    48.     <div class="box box3">3</div>
    49.     <div class="box box4">4</div>
    50.     <div class="box box5">5</div>
    51.     <div class="box box6">6</div>
    52.     <div class="box box7">7</div>
    53.     <div class="box box8">8</div>
    54.     <div class="box box9">9</div>
    55.     <!-- <div class="box box10">10</div> -->
    56.   </div>
    57. </body>
    58. </html>

    3.2 演示截图

4.网格线的简写

  • 网格线的简写方式，其实就是grid-column和grid-row的start与end值合并在一起，两者之间用/来分隔

4.1代码演示

  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>Document</title>
  7.   </head>
  8.   <style>
  9.     body {
  10.       padding: 10px;
  11.     }
  12.     .container {
  13.       display: grid;
  14.       grid-template-columns: 100px 100px 100px;
  15.       grid-template-rows: 100px 100px 100px;
  16.     }
  17.     .box {
  18.       background-color: #444;
  19.       color: #fff;
  20.       font-size: 150%;
  21.       padding: 20px;
  22.     }
  23.     .container :nth-of-type(2n) {
  24.       background-color: red;
  25.     }
  27.     /* 可以更具网格线的编号来定位网格的位置 */
  28.     /* 定义网格位置的简写方式 */
  29.     .box1 {
  30.       grid-column: 1/2;
  31.       grid-row: 1/2;
  32.       background-color: lawngreen;
  33.     }
  35.     .box9 {
  36.       grid-column: 3/4;
  37.       grid-row: -2/-1;
  38.       background-color: rgb(202, 122, 255);
  39.     }
  40.   </style>
  41.   <body>
  42.     <div class="container">
  43.       <div class="box box1">1</div>
  44.       <div class="box box2">2</div>
  45.       <div class="box box3">3</div>
  46.       <div class="box box4">4</div>
  47.       <div class="box box5">5</div>
  48.       <div class="box box6">6</div>
  49.       <div class="box box7">7</div>
  50.       <div class="box box8">8</div>
  51.       <div class="box box9">9</div>
  52.       <!-- <div class="box box10">10</div> -->
  53.     </div>
  54.   </body>
  55. </html>

4.2演示截图

5.网格区域实现元素占位区

  • 网格区域grid-area,网格区域他是由四条网格线组成的一个空间，简单点说，一个网格单元格也是一个网格区域（因为他也是有四条网格线组成的一个空间），多个单元格合并在一起也是一个网格区域。这样一来，要实现上例的效果，还可以使用网格区域grid-area来完成。
  • 组成网格区域的网格线顺序是row-start/column-start/row-end/column-end

  • 现在我们要获取到box5这个有两种写法grid-area: 2/2/3/3``grid-area: 2/2/-2/-2,意思就是正负数都可以获取这个区域

    5.1演示代码

    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>Document</title>
    7. </head>
    8. <style>
    9.   body {
    10.     padding: 10px;
    11.   }
    12.   .container {
    13.     display: grid;
    14.     grid-template-columns: 100px 100px 100px;
    15.     grid-template-rows: 100px 100px 100px;
    16.   }
    17.   .box {
    18.     background-color: #444;
    19.     color: #fff;
    20.     font-size: 150%;
    21.     padding: 20px;
    22.   }
    23.   .container :nth-of-type(2n) {
    24.     background-color: red;
    25.   }
    27.   /* 可以更具网格线的编号来定位网格的位置 */
    28.   /* 定义网格位置的简写方式 */
    29.   .box1 {
    30.     grid-column: 1/2;
    31.     grid-row: 1/2;
    32.     background-color: lawngreen;
    33.   }
    35.   .box9 {
    36.     grid-column: 3/4;
    37.     grid-row: -2/-1;
    38.     background-color: rgb(202, 122, 255);
    39.   }
    41.   /* 使用网格区域我们来获取一下box5 */
    42.   .box5 {
    43.     /* 这个获取区域可以写两种均可以获取到box5号这个 */
    44.     grid-area: 2/2/3/3;
    45.     /* grid-area: 2/2/-2/-2; */
    46.     background-color: mediumturquoise;
    47.   }
    48. </style>
    49. <body>
    50.   <div class="container">
    51.     <div class="box box1">1</div>
    52.     <div class="box box2">2</div>
    53.     <div class="box box3">3</div>
    54.     <div class="box box4">4</div>
    55.     <div class="box box5">5</div>
    56.     <div class="box box6">6</div>
    57.     <div class="box box7">7</div>
    58.     <div class="box box8">8</div>
    59.     <div class="box box9">9</div>
    60.     <!-- <div class="box box10">10</div> -->
    61.   </div>
    62. </body>
    63. </html>

    5.2演示截图

6.网格间距

  • 网格间距用gap来表示
  • 网格间距是网格轨道之间的间距，可以通过 grid-column-gap ， grid-row-gap 在grid布局中创建
  • grid-gap: 10px 5px 同样可以简写为这样的格式，但这前面个为横后面个数为纵

6.1代码演示

  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>Document</title>
  7.   </head>
  8.   <style>
  9.     body {
  10.       padding: 10px;
  11.     }
  12.     .container {
  13.       display: grid;
  14.       /* 这下面的100px可以用百分比或者1fr来表示，也是同样的效果 */
  15.       grid-template-columns: 100px 100px 100px;
  16.       grid-template-rows: 100px 100px 100px;
  17.       /* 表示的是网格的间距 */
  18.       grid-column-gap: 10px; /*这个是表示纵方向*/
  19.       grid-row-gap: 10px; /*这个是表示横方向*/
  20.       grid-gap: 10px 5px; /*同样可以简写为这样的格式，但这前面个为横后面个数为纵*/
  21.     }
  22.     .box {
  23.       background-color: #444;
  24.       color: #fff;
  25.       font-size: 150%;
  26.       padding: 20px;
  27.     }
  28.     .container :nth-of-type(2n) {
  29.       background-color: red;
  30.     }
  32.     /* 可以更具网格线的编号来定位网格的位置 */
  33.     /* 定义网格位置的简写方式 */
  34.     .box1 {
  35.       grid-column: 1/2;
  36.       grid-row: 1/2;
  37.       background-color: lawngreen;
  38.     }
  40.     .box9 {
  41.       grid-column: 3/4;
  42.       grid-row: -2/-1;
  43.       background-color: rgb(202, 122, 255);
  44.     }
  46.     /* 使用网格区域我们来获取一下box5 */
  47.     .box5 {
  48.       /* 这个获取区域可以写两种均可以获取到box5号这个 */
  49.       grid-area: 2/2/3/3;
  50.       /* grid-area: 2/2/-2/-2; */
  51.       background-color: mediumturquoise;
  52.     }
  53.   </style>
  54.   <body>
  55.     <div class="container">
  56.       <div class="box box1">1</div>
  57.       <div class="box box2">2</div>
  58.       <div class="box box3">3</div>
  59.       <div class="box box4">4</div>
  60.       <div class="box box5">5</div>
  61.       <div class="box box6">6</div>
  62.       <div class="box box7">7</div>
  63.       <div class="box box8">8</div>
  64.       <div class="box box9">9</div>
  65.       <!-- <div class="box box10">10</div> -->
  66.     </div>
  67.   </body>
  68. </html>

6.2演示截图

7.grid 中可以使用的函数

  • 大概的可以理解为有三种repeat()、minmax()、fit-content()

    7.1grid中repeat()函数

  • repeat 函数可以以一种更简洁的方式去表示大量而且重复行的表达式

  • 比如上面 grid-template-columns: 100px 100px 100px 我们可以写成 repeat(3, 100px)、还可以写成repeat(3, 1fr)、还可以写成repeat(3, 百分比的形式) 它的第一个参数是重复的次数

    7.1.1代码演示

    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>Document</title>
    7. </head>
    8. <style>
    9.   body {
    10.     padding: 10px;
    11.   }
    12.   .container {
    13.     width: 300px;
    14.     height: 300px;
    15.     display: grid;
    16.     /* 这下面的100px可以用百分比或者1fr来表示，也是同样的效果 */
    17.     /* grid-template-columns: 100px 100px 100px;
    18.     grid-template-rows: 100px 100px 100px; */
    19.     grid-template-rows: repeat(3, 100px);
    20.     grid-template-columns: repeat(3, 100px);
    22.     /* 表示的是网格的间距 */
    23.     grid-column-gap: 10px; /*这个是表示纵方向*/
    24.     grid-row-gap: 10px; /*这个是表示横方向*/
    25.     grid-gap: 10px 5px; /*同样可以简写为这样的格式，但这前面个为横后面个数为纵*/
    26.   }
    27.   .box {
    28.     background-color: #444;
    29.     color: #fff;
    30.     font-size: 150%;
    31.     padding: 20px;
    32.   }
    33.   .container :nth-of-type(2n) {
    34.     background-color: red;
    35.   }
    37.   /* 可以更具网格线的编号来定位网格的位置 */
    38.   /* 定义网格位置的简写方式 */
    39.   .box1 {
    40.     grid-column: 1/2;
    41.     grid-row: 1/2;
    42.     background-color: lawngreen;
    43.   }
    45.   .box9 {
    46.     grid-column: 3/4;
    47.     grid-row: -2/-1;
    48.     background-color: rgb(202, 122, 255);
    49.   }
    51.   /* 使用网格区域我们来获取一下box5 */
    52.   .box5 {
    53.     /* 这个获取区域可以写两种均可以获取到box5号这个 */
    54.     grid-area: 2/2/3/3;
    55.     grid-area: 2/2/-2/-2;
    56.     background-color: mediumturquoise;
    57.   }
    58. </style>
    59. <body>
    60.   <div class="container">
    61.     <div class="box box1">1</div>
    62.     <div class="box box2">2</div>
    63.     <div class="box box3">3</div>
    64.     <div class="box box4">4</div>
    65.     <div class="box box5">5</div>
    66.     <div class="box box6">6</div>
    67.     <div class="box box7">7</div>
    68.     <div class="box box8">8</div>
    69.     <div class="box box9">9</div>
    70.     <!-- <div class="box box10">10</div> -->
    71.   </div>
    72. </body>
    73. </html>

    7.1.2演示截图

7.2minmax()函数

  • 定义了一个长宽范围的闭区间。它接受两个参数，最小值 和 最大值。它返回这个区间中的值。
  • 如 minmax(max-content, 300px) ，最大不能大于 300px
  • minmax(200px, 1fr) 最小不能小于 200px

7.3fit-content()函数

  • 它相当于min(maximum size, max(minimum size, argument)) 参数可以是长度值和百分比。
  • 它在内容的最小值和参数中去一个最大值，然后再在内容的最大值中取一个最小值。
  • 也就是当内容少时，它取内容的长度，如果内容多，内容长度大于参数长度时，它取参数长度。

8.网格内的内容对齐方式

justify-items: center | end | center | stretch(默认); //水平方向对齐
左对齐|右对齐|居中|填满表格

align-items: start | end | center | stretch;//垂直方向对齐
顶部对齐|底部对齐|居中|填满表格

8.1代码演示

  • 这里只针对了box4去设置了，只演示一个居中的值，其它的值自己去测试

  • 重要的一点是这些都必须在网格中才能体现

    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>Document</title>
    7. </head>
    8. <style>
    9.   body {
    10.     padding: 10px;
    11.   }
    12.   .container {
    13.     display: grid;
    14.     /* 这下面的100px可以用百分比或者1fr来表示，也是同样的效果 */
    15.     /* grid-template-columns: 100px 100px 100px;
    16.     grid-template-rows: 100px 100px 100px; */
    17.     grid-template-rows: repeat(3, 100px);
    18.     grid-template-columns: repeat(3, 100px);
    20.     /* 表示的是网格的间距 */
    21.     grid-column-gap: 10px; /*这个是表示纵方向*/
    22.     grid-row-gap: 10px; /*这个是表示横方向*/
    23.     grid-gap: 10px 5px; /*同样可以简写为这样的格式，但这前面个为横后面个数为纵*/
    24.   }
    25.   .box {
    26.     background-color: #444;
    27.     color: #fff;
    28.     font-size: 150%;
    29.     padding: 20px;
    30.   }
    31.   /* .container :nth-of-type(2n) {
    32.     background-color: red;
    33.   } */
    35.   /* 可以更具网格线的编号来定位网格的位置 */
    36.   /* 定义网格位置的简写方式 */
    37.   .box1 {
    38.     grid-column: 1/2;
    39.     grid-row: 1/2;
    40.     background-color: lawngreen;
    41.   }
    43.   .box9 {
    44.     grid-column: 3/4;
    45.     grid-row: -2/-1;
    46.     background-color: rgb(202, 122, 255);
    47.   }
    49.   /* 使用网格区域我们来获取一下box5 */
    50.   .box5 {
    51.     /* 这个获取区域可以写两种均可以获取到box5号这个 */
    52.     grid-area: 2/2/3/3;
    53.     grid-area: 2/2/-2/-2;
    54.     background-color: mediumturquoise;
    55.   }
    56. /* 这个是让网格中的元素对齐方式 */
    57.   .box4 {
    58.     display: grid;
    59.     justify-items: center;
    60.     align-items: center;
    61.     background-color: olivedrab;
    62.   }
    63. </style>
    64. <body>
    65.   <div class="container">
    66.     <div class="box box1">1</div>
    67.     <div class="box box2">2</div>
    68.     <div class="box box3">3</div>
    69.     <div class="box box4">4</div>
    70.     <div class="box box5">5</div>
    71.     <div class="box box6">6</div>
    72.     <div class="box box7">7</div>
    73.     <div class="box box8">8</div>
    74.     <div class="box box9">9</div>
    75.     <!-- <div class="box box10">10</div> -->
    76.   </div>
    77. </body>
    78. </html>

    8.2演示截图

9.利用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>圣杯布局</title>
  7.   </head>
  8.   <style type="text/css">
  9.     .header {
  10.       grid-area: header;
  11.       background-color: olivedrab;
  12.     }
  13.     .footer {
  14.       grid-area: footer;
  15.       background-color: orange;
  16.     }
  17.     .main {
  18.       grid-area: main;
  19.       background-color: orangered;
  20.     }
  21.     .left {
  22.       grid-area: left;
  23.       background-color: orchid;
  24.     }
  25.     .right {
  26.       grid-area: right;
  27.       background-color: powderblue;
  28.     }
  29.     .container {
  30.       display: grid;
  31.       grid-template-areas:
  32.         "header header header"
  33.         "left main right"
  34.         "footer footer footer";
  35.       grid-template-columns: 150px 1fr 150px;
  36.       grid-template-rows:
  37.         100px
  38.         1fr
  39.         30px;
  40.       min-height: 100vh;
  41.     }
  42.     @media screen and (max-width: 600px) {
  43.       .container {
  44.         grid-template-areas:
  45.           "header"
  46.           "left"
  47.           "main"
  48.           "right"
  49.           "footer";
  50.         grid-template-columns: 100%;
  51.         grid-template-rows:
  52.           100px
  53.           50px
  54.           1fr
  55.           50px
  56.           30px;
  57.       }
  58.     }
  59.   </style>
  61.   <body>
  62.     <body class="container">
  63.       <header class="header">header</header>
  64.       <main class="main">main</main>
  65.       <aside class="left">left</aside>
  66.       <aside class="right">right</aside>
  67.       <footer class="footer">footer</footer>
  68.     </body>
  69.   </body>
  70. </html>

演示截图

学习总结

  • 革命还未成功
  • 同志仍需努力
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：grid有毒, 用了就回不去了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post