简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >html基础知识学习利用grid网格布局简短代码实现圣杯布局

html基础知识学习利用grid网格布局简短代码实现圣杯布局

῀℡῀ᵒᵐᵍᵎᵎᵎ
῀℡῀ᵒᵐᵍᵎᵎᵎ原创
2020年04月14日 18:16:49921浏览

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>

演示截图

学习总结

  • 革命还未成功
  • 同志仍需努力
上一条：CSS - grid 布局图解下一条：grid布局及简写
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多