带有浮动广告的卡片列表

Question

我想实现我尝试使用flex的html结构，但由于最后一个广告列的高度不同，因此无法使用，并且最多需要2-4行。而且我也想使其具有响应性，因此如果找不到足够的空间，那么调整大小的卡将在下一行上显示。

.ads {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    grid-column: 6 / span 2;
    grid-row: 1 / span 3;
    margin: 0;
    float: none;
}
.container {
    display: grid;
    grid-gap: 22px;
    justify-content: space-between;
}
.card {
    margin:0;
}

Answer 1

好消息是-我们可以在3行高的父容器中添加广告。在这里，你去

.main-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* determines 7 columns with same width */
  grid-auto-rows: minmax(100px, auto); /* determines the height of the row */
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.main-grid>div {
  background: #eee;
}

.main-grid>div.ads-grid {
  background: none;
  grid-area: 1 / 6 / 4 / 8; /* row-start / column-start / row-end / column end */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.main-grid>div.ads-grid>div {
  background: #000;
}

<div class="main-grid">
  <div class="ads-grid">
    <div></div>
    <div></div>
  </div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

对于小屏幕，请不要忘记更改.main-grid {grid-template-columns: repeat(7, 1fr)}宽度来校正.main-grid>div.ads-grid {grid-area: 1 / 6 / 4 / 8;}和@media。有关grid-area的更多信息，请点击https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area