Question

我有一系列的卡片，卡片可以占用25％的屏幕宽度或50％的屏幕宽度。所以它的对象是这样的：{名称：1，大小：25％}。通过js过滤数组后，即时通讯获得了新的纸牌阵列，我需要在网格中以宽100％的行放置布局卡。因此，可能需要25 50 25、50 50、25 25 50 ... ect。所以我认为可以通过grid-auto-flow属性实现。但是我对网格还不太好。

.cards {
  display: grid;
  width: 100%;
  grid-auto-flow: row dense;
}
.card {
  border: 1px solid #d1d1d1;
  width: 25%;
}
.card-wide {
  width: 50%;
}

https://codesandbox.io/s/23moj6z09y

Answer 1

您可以使用grid-template-columns: repeat(4, 1fr)进行4列布局，而card-wide元素可以使用grid-column: span 2占据两列-请参见下面的演示

.cards {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px; /* set a row height for illustration */
  grid-auto-flow: row dense; /* not compulsory here */
}

.card {
  border: 1px solid #d1d1d1;
}

.card-wide {
  grid-column: span 2; /* occupy two columns*/
}

<div class="cards">
  <div class="card"></div>
  <div class="card card-wide"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card card-wide"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card card-wide"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card card-wide"></div>
  <div class="card"></div>
  <div class="card card-wide"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card card-wide"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card card-wide"></div>
  <div class="card"></div>
</div>

Answer 2

您可以考虑使用1fr作为单位，然后判断一个元素是否跨越一两列：

.cards {
  display: grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-flow:dense;
}
/*will take one column by default*/
.card {
  background:red;
}
.card-wide {
  grid-column:span 2; /*two column*/
  background:green;
}

.cards  > div {
  min-height:50px;
  border:1px solid;
}

<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card-wide"></div>
<div class="card"></div>
<div class="card-wide"></div>
<div class="card"></div>
<div class="card-wide"></div>
<div class="card"></div>
<div class="card-wide"></div>
<div class="card"></div>
<div class="card"></div>
</div>

如何自适应设置行中的项目

2 个答案: