grid布局的应用

4 阅读1分钟

分三列,每列固定宽度,每行的布局为space-between

.upload-img-wrap {
    display: grid;
    grid-template-columns: repeat(3, 224rpx); // 分成3列,每列宽224rpx
    grid-row-gap: 28rpx; // 行间距28rpx
    justify-content: space-between; // 每行的布局为space-between
}

.upload-item {
    width: 224rpx;
}

固定行间距、列间距和每列宽度,每行元素自动平铺

.grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  row-gap: 32px;
  column-gap: 24px;
  justify-content: center;
  width: 100%;
}