grid使用

grid布局实现了同行等高，外部盒子需设置宽度，图片随文字内容缩放

<style type="text/css">
    .list-grid{
      width:300px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 10px;/*间距*/
      border:1px solid #333333;
    }
    .boxx{
      width:100%;
      background: #ff9900;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 0;  /* 关键 */
    }
    .img1{
      width:100%;
      display:flex;
      justify-content: center;/*图片居中*/
      flex:1;
      min-height: 0;  /* 关键 */
      overflow: hidden;
    }
    .img1 img{
      width:100%;height:100%;
      flex:1;
      display:block;
      object-fit: cover;    /* 保持比例填充 */
    }
</style>

<div class="list-grid">
  <div class="boxx">
    <ul>
      <li>qwer</li>
      <li>asdf</li>
      <li>zxcv</li>
    </ul>
    <ul>
      <li>qwer</li>
      <li>asdf</li>
      <li>zxcv</li>
    </ul>
    <ul>
      <li>qwer</li>
      <li>asdf</li>
      <li>zxcv</li>
    </ul>
    <ul>
      <li>qwer</li>
      <li>asdf</li>
      <li>zxcv</li>
    </ul>
  </div>
  <div class="boxx">
    <div class="img1">
      <img src="123.png"/>
    </div>
  </div>
</div>