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

     运行效果：

  • 相关阅读:
    shell脚本学习
    排序算法（一）
    linux KVM的网络设置方法（bridge和nat）
    APS生产排产在包装行业的应用
    [Git] 系列三随意修改提交记录以及一些技巧
    使用电力系统稳定器 （PSS） 和静态 VAR 补偿器 （SVC） 提高瞬态稳定性（Matlab代码实现）
    Rust-FFI复杂参数传递处理方式1--数组类型
    React面试题总结（二）
    【扩散生成模型】Diffusion Generative Models
    【大屏项目】SpringBoot + Vue 实现的可视化拖拽编辑的
  • 原文地址：https://blog.csdn.net/LlanyW/article/details/133696326