用Grid布局解决不同行、不确定宽度还要等宽

有页面如下

对应的HTML

      <div className="wrapper">
        <div className="item">
          <div className="type1">
            <Checkbox></Checkbox>
          </div>
          <div className="type2">1</div>
          <div className="type3">
            <Button>操作1</Button>
          </div>
          <div className="type4">
            <Button>操作2</Button>
          </div>
        </div>
      </div>

对应的CSS

    .wrapper {
      .item {
        display: flex;

        margin-bottom: 10px;

        align-items: center;

        .type1 {
          margin-right: 20px;
        }

        .type2 {
          width: 100px;
          margin-right: 30px;
        }

        .type3 {
          margin-right: 1em;
        }
      }
    }

文字部分是动态的 这里只是简单的设置了width: 100px;

用Grid布局后是这样的，可以不用item这一层包裹

      <div className="wrapper">
        <div className="type1">
          <Checkbox></Checkbox>
        </div>
        <div className="type2">1</div>
        <div className="type3">
          <Button>操作1</Button>
        </div>
        <div className="type4">
          <Button>操作2</Button>
        </div>

        <div className="type1">
          <Checkbox></Checkbox>
        </div>
        <div className="type2">12133232</div>
        <div className="type3">
          <Button>操作1</Button>
        </div>
        <div className="type4">
          <Button>操作2</Button>
        </div>
      </div>

对应的CSS