仿微信群头像css布局

css

ul,li{
      list-style: none;
      margin: 0;
      padding: 0;
      background-color: #eee;
    }
    ul{
      width: 240px; height: 240px;
    }
    .li{
      outline: 1px solid #fff;
      display: flex;
    }
    /* 只有一个图片 */
    .li:only-child{
      height: 100%;
      align-items: center;
    }
    /* 2个图片 */
    .li:first-child:nth-last-child(2), .li:first-child:nth-last-child(2) + li{
      width: 50%; height: 50%;
    }
    .li:first-child:nth-last-child(2) + li{
      margin-left: auto;
    }
    /* 3个图片 */
    .li:first-child:nth-last-child(3), .li:first-child:nth-last-child(3) ~ li{
      width: 50%;
    }
    .li:first-child:nth-last-child(3){
      margin: auto;
    }
    .li:first-child:nth-last-child(3) ~ li{
      float: left;
    }
    /* 4个图片 */
    .li:first-child:nth-last-child(4), .li:first-child:nth-last-child(4) ~ li{
      width: 50%;
      float: left;
    }
    /* 5个或8个图片 */
    .li:first-child:nth-last-child(5), .li:first-child:nth-last-child(5) ~ li, .li:first-child:nth-last-child(8), .li:first-child:nth-last-child(8) ~ li{
      width: 33%;
      float: left;
    }
    .li:first-child:nth-last-child(5),.li:first-child:nth-last-child(5)+li{
      margin-top: 16%;
    }
    .li:first-child:nth-last-child(5), .li:first-child:nth-last-child(8){
      margin-left: 15%;
    }
    /* 6个图片 */
    .li:first-child:nth-last-child(6), .li:first-child:nth-last-child(6) ~ li{
      width: 33%;
      float: left;
    }
    .li:first-child:nth-last-child(6), .li:first-child:nth-last-child(6) + li, .li:first-child:nth-last-child(6) + li + li{
      margin-top: 16%;
    }
    /* 7个图片 */
    .li:first-child:nth-last-child(7), .li:first-child:nth-last-child(9), .li:first-child:nth-last-child(7) ~ li, .li:first-child:nth-last-child(9) ~ li{
      width: 33%;
      float: left;
    }
    .li:first-child:nth-last-child(7){
      float: none;
      margin: auto;
    }

html

<ul>
    <li class="li">
      <img src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2436725631,1649710694&fm=58" alt="" title="1">
    </li>
    <li class="li">
      <img src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2436725631,1649710694&fm=58" alt="" title="1">
    </li>
    <li class="li">
      <img src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2436725631,1649710694&fm=58" alt="" title="1">
    </li>
    <li class="li">
      <img src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2436725631,1649710694&fm=58" alt="" title="1">
    </li>
    <li class="li">
      <img src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2436725631,1649710694&fm=58" alt="" title="1">
    </li>
    
  </ul>

部分效果图：

参考：
伪类匹配列表数目实现微信群头像CSS布局的技巧