search

博客列表 >grid栅格布局学习

grid栅格布局学习

麦穗
麦穗原创
2020年04月14日 22:11:08687浏览

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、未来很远，光阴很快；抓紧当下，展望未来

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

相关文章

查看更多