• CSS 布局案例： 2行、多行每行格数不定，最后一列对齐

    布局期望的效果如下：

    第二行最后一格与第一行最后一格对齐。每行格数不定。自动拉伸填充整个宽度

    实现：

    一开始打算用display:flex， 自动分散，但是第二行对齐第一行最后一格控制不了。

    使用grid fr均分单位控制。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Title</title>
    6.   <style>
    7.     .container {
    8.       /*
    9.        * 1.grid: column、float、clear、vertical-align 属性失效
    10.        * 2. grid-template-columns 属性来指定网格容器中所需的列数以及每列的宽度。
    11.        * 3.grid-template-rows 属性来指定网格容器中每一行的高度。与 grid-template-columns 属性不同，它并没有指定网格容器的行数，
    12.        而只用来设置每行的高度。这是因为每当网格项换行时，网格容器都会隐式创建一个新行
    13.        4.column-gap 和 row-gap 属性来分隔列和行, 间距
    14.        5.justify-items: space-around：在网格项之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
    15.        6. align-items: stretch：将拉伸所有网格项目以填充其单元格的整个高度（默认值）
    16.       */
    17.       display: grid;
    18.       column-gap: 10px;
    19.       grid-template-columns:0.75fr 0.25fr;
    20.       justify-items: stretch;
    21.     }
    22.  
    23.     /**/
    24.     .item {
    25.       background-color: #bfc;
    26.     }
    27.     .row1-inner {
    28.       display: grid;
    29.       column-gap: 10px;
    30.       grid-template-columns:1fr 1fr 1fr;
    31.       justify-items: stretch;
    32.       row-gap: 10px;
    33.     }
    34.  
    35.     .container2 {
    36.       display: grid;
    37.       margin-top: 5px;
    38.       column-gap: 10px;
    39.       /*row-gap: 10px;*/
    40.       grid-template-columns:0.75fr 0.25fr;
    41.       justify-items: stretch;
    42.     }
    43.  
    44.  
    45.   </style>
    46. </head>
    47. <body>
    48. <div>
    49.  
    50.   <div class="container">
    51.     <!--  行1-->
    52.     <div class="row1-inner">
    53.       <div class="item">1</div>
    54.       <div class="item">2</div>
    55.       <div class="item">3</div>
    56.     </div>
    57.     <div class="item">4</div>
    58.   </div>
    59.  
    60.   <div class="container2">
    61.   <!--  行2-->
    62.     <div class="item">201</div>
    63.     <div class="item">202</div>
    64.   </div>
    65.  
    66. </div>
    67.  
    68. </body>
    69. </html>

     运行效果：

  • 相关阅读:
    项目部署测试之内网穿透
    1024 特别企划｜揭秘 StarRocks 社区背后的神秘力量（内涵福利）
    详解SPI
    JAVA电费管理系统计算机毕业设计Mybatis+系统+数据库+调试部署
    locust 权重
    【飞桨PaddleSpeech语音技术课程】— 语音识别-流式服务
    css3 选择器
    什么是DevOps？探索持续交付与协作的新范式
    JS多个HTTP请求限制最大并发数
    基于Zookeeper实现的分布式可重入锁
  • 原文地址：https://blog.csdn.net/LlanyW/article/details/133696326