Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid栅格布局学习
Blogger Information
Blog 11
fans 0
comment 0
visits 7763
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
grid栅格布局学习
麦穗
Original
684 people have browsed it

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.       width: 100vw;
    10.       height: 100vh;
    11.       background-color: lightblue;
    12.     }
    13.     .item {
    14.       font-size: 1.5rem;
    15.       width: 100px;
    16.       height: 100px;
    17.       background-color: navajowhite;
    18.     }
    19.   </style>
    20. </head>
    21. <body>
    22.   <div class="container">
    23.     <div class="item item1">1</div>
    24.     <div class="item item2">2</div>
    25.     <div class="item item3">3</div>
    26.     <div class="item item4">4</div>
    27.     <div class="item item5">5</div>
    28.     <div class="item item6">6</div>
    29.     <div class="item item7">7</div>
    30.     <div class="item item8">8</div>
    31.     <div class="item item9">9</div>
    32.   </div>
    33. </body>
    34. </html>

  • 显示效果

  • 在style样式中添加如下源码：

    1. .container {
    2. display: grid;
    3.       /* grid网格布局默认以行布局 */
    4.       grid-auto-flow: row;
    5.       /* grid网格布局改为以列布局 */
    6.       grid-auto-flow: column;
    7.       }

  • 显示效果

  • 在style样式中添加如下源码：

    1. .container {
    2.    /* grid网格布局 固定值 */
    3.       grid-template-rows: 200px 200px 200px;
    4.       grid-template-columns: 200px 200px 200px;
    5.       }

  • 显示效果

  • 在style样式中添加如下源码：

    1. .container {
    2. /* grid网格布局 百分比 */
    3.       grid-template-rows: 20% 40% auto;
    4.       grid-template-columns: 40% 20% auto;
    5.       }

  • 显示效果

  • 在style样式中添加如下源码：

    1. .container {
    2. /* grid网格布局 比例 */
    3.       grid-template-rows: 2fr 1fr 1fr;
    4.       grid-template-columns: 1fr 1fr 2fr;
    5.       }

  • 显示效果

  • 在style样式中添加如下源码：

    1. .container {
    2. /* grid网格布局 重复设置*/
    3.       grid-template-rows: repeat(3,150px);
    4.       grid-template-columns: repeat(3,200px);
    5.       }

  • 显示效果

  • 在style样式中添加如下源码：

    1. .container {
    2. /* grid网格布局 分组设置  */
    3.       grid-template-rows: repeat(2, 100px 150px);
    4.       grid-template-columns: repeat(2, 100px 200px);
    5.       }

  • 显示效果

  • 在style样式中添加如下源码：

    1. .container {
    2. /* grid网格布局 弹性  */
    3.       grid-template-rows: repeat(2, minmax(100px, 200px));
    4.       grid-template-columns: repeat(2,minmax(200px,250px));
    5.       }

  • 显示效果

  • 在style样式中添加如下源码：

    1. .container {
    2. /* grid网格布局 自动填充  */
    3.       grid-template-rows: repeat(auto-fill,200px);
    4.       grid-template-columns: repeat(auto-fill,200px);
    5.       }
  • 显示效果
  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.         width: 50vw;
  10.         height: 100vh;
  11.         background-color: lightblue;
  13.         display: grid;
  14.         grid-template-rows: repeat(3, 1fr);
  15.         grid-template-columns: repeat(3, 1fr);
  16.       }
  18.       .item {
  19.         font-size: 1.5rem;
  20.         width: 100px;
  21.         height: 100px;
  22.         background-color: navajowhite;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div class="container">
  28.       <div class="item item1">1</div>
  29.       <div class="item item2">2</div>
  30.       <div class="item item3">3</div>
  31.       <div class="item item4">4</div>
  32.       <div class="item item5">5</div>
  33.       <div class="item item6">6</div>
  34.       <div class="item item7">7</div>
  35.       <div class="item item8">8</div>
  36.       <div class="item item9">9</div>
  37.     </div>
  38.   </body>
  39. </html>

  • 在style样式中添加如下源码：
    1. /* 使用默认的网格线来划分单元格 */
    2.     .item1 {
    3.       background-color: lightgreen;
    4.       grid-row-start: 3;
    5.       grid-row-end: 4;
    6.       grid-column-start: 3;
    7.       grid-column-end: 4;
    8.     }

  • 显示效果

  • 在style样式中添加如下源码：

    1. /* 使用默认的网格线来划分单元格 */
    2.     .item1 {
    3.       background-color: lightgreen;
    4.       /*简写*/
    5.       grid-row: 3 /4;
    6.       grid-column: 3/4;
    7.     }

  • 显示效果

  • 在style样式中添加如下源码：

    1. /* 使用默认的网格线来划分单元格 */
    2.     .item1 {
    3.       background-color: lightgreen;
    4.      /* 使用偏移量来简化*/
    5.       grid-row: 3 / span 2;
    6.       grid-column: 3 / span 2;
    7.     }

  • 显示效果

  • 在style样式中添加如下源码：

    1. .container {
    2.   /* 设置项目在单元格中的对齐方式 */
    3.         place-items: center center;
    4.     }

  • 显示效果

  • 在style样式中添加如下源码：

    1. .item2 {
    2.       /* grid-area: aside; */
    3.       background-color: lightpink;
    4.       place-self: end end;
    5.     }
    6.     }

  • 显示效果

  • 在style样式中添加如下源码：

    1. .item1 {
    2.       background-color: lightgreen;
    3.       /* 默认网格区域 ,是从当前位置开始的填充 */
    4.       grid-area: span 2 / span 2;
    5.     }

  • 显示效果

  • 在style样式中添加如下源码：

    1. .container {
    2.       grid-template-areas:
    3.         "header header header"
    4.         "aside main main"
    5.         "footer footer footer";
    6.     }
    8.     .item {
    9.       /* width: 100px;
    10.       height: 100px; */
    11.       }
    12.     .item1 {
    13.       background-color: lightgreen;
    14.       grid-area: header;
    15.     }
    16.     .item2 {
    17.       grid-area: aside;
    18.       background-color: lightpink;
    19.     }
    20.     .item3 {
    21.       grid-area: main;
    22.       background-color: lime;
    23.     }
    24.     .item4 {
    25.       grid-area: footer;
    26.       background-color: lightseagreen;
    27.     }
  • 显示效果
  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.         width: 50vw;
  10.         height: 100vh;
  11.         background-color: lightblue;
  13.         display: grid;
  14.         grid-template-rows: repeat(3, 50px);
  15.         grid-template-columns: repeat(3, 50px);
  16. }
  17.       .item {
  18.         background-color: lightseagreen;
  19.         font-size: 1.5rem;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <div class="container">
  25.       <div class="item item1">1</div>
  26.       <div class="item item2">2</div>
  27.       <div class="item item3">3</div>
  28.       <div class="item item4">4</div>
  29.       <div class="item item5">5</div>
  30.       <div class="item item6">6</div>
  31.       <div class="item item7">7</div>
  32.       <div class="item item8">8</div>
  33.       <div class="item item9">9</div>
  34.     </div>
  35.   </body>
  36. </html>

  • 在style样式中添加如下源码：
    1. .container {
    2. /* 设置单元格在容器中的对齐方式 */
    3.       place-content: center center;}

  • 显示效果

  • 在style样式中添加如下源码：

    1. .container {
    2.       /* 设置单元格之间的间距 */
    3.       gap: 10px 20px;
    4.     }
  • 显示效果

学习总结：

1、grid栅格布局很多与flex布局的属性相同，记忆有点吃力，但是grid似乎很有用
2、缺少实战经验，多写源码是当下最重要的事情，这样对属性也会得到实际的应用
3、未来很远，光阴很快；抓紧当下，展望未来

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：实战项目你可以自己找一些页面来模仿
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