使用柔性或网格在浮动右方列出广告卡。

Question

我想实现这个html结构。我试过使用flex，但不工作，因为最后的广告列是不一样的高度，并可以采取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;
}

/* example for screens less than 460 */
@media (max-width: 460px) {
  .main-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .main-grid>div.ads-grid {
    grid-area: 1 / 3 / 4 / 5;
  }  
}

<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.orgen-USdocsWebCSSgrid-area。

而且没有一个 flex 当天就得到了。