• 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>

     运行效果：

  • 相关阅读:
    开源推荐｜简洁且强大的开源堡垒机OneTerm
    网游服务器怎么选择
    利用Openssl写一个简陋的https劫持
    详解Java的static关键字
    Google Earth Engine（GEE）——计算不同美国州的气温折线图和散点图
    React如何命令式调用自定义的Antd-Modal组件
    iOS - 多线程-atomic
    Docker 哲学 - 容器操作
    系统集成|第十三章(笔记)
    vue3搭建Arco design UI框架
  • 原文地址：https://blog.csdn.net/LlanyW/article/details/133696326