CSS 网格 - 根据相邻的兄弟姐妹拉伸和换行 DOM

Question

试图找出如何根据相邻兄弟姐妹的数量获得具有拉伸行的网格布局。在 SCSS 或 CSS.

中打开 grid/flexbox/（其他）解决方案

该列表是根据一些配置生成的。我不知道我可以收到这些物品多长时间、多少或以什么顺序。有一些规则，例如，item-type-a 始终是整行，item-type-b 应该拉伸以填充该行，每行最多 3 个。

这可能 纯 CSS?

  <div class="container">
    <div class="item item-type-a">Type A</div>
    <div class="item item-type-b">Type B</div>
    <div class="item item-type-b">Type B</div>
    <div class="item item-type-a">Type A</div>
    <div class="item item-type-b">Type B</div>
    <div class="item item-type-b">Type B</div>
    <div class="item item-type-b">Type B</div>
    <div class="item item-type-b">Type B</div>
    <div class="item item-type-a">Type A</div>
  </div>

为了制作图片我使用了这个 CSS 但需要一种方法来删除 item-type-c & item-type-d

<style>
  .container {
    background: white;
    border: dashed red 1px;
    padding: 24px;
    max-width: 1080px;
    display: grid;
    gap: 2rem 2rem;
    grid-template-columns: repeat(12, 1fr);
  }

  .item {
    background: lightgray;
    min-width: 200px;
    min-height: 100px;

    display: grid;
    place-items: center;
    text-align: center;

    font-size: 24px;
    font-family: 'Helvetica';
  }

  .item-type-a {
    grid-column: auto / span 12;
  }

  .item-type-b {
    grid-column: auto / span 6;
  }

  .item-type-c {
    grid-column: auto / span 4;
  }

  .item-type-d {
    grid-column: auto / span 12;
  }
</style>

Answer 1

.container {
  background: white;
  border: dashed red 1px;
  padding: 24px;
  max-width: 1080px;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2rem;
}

.item {
  background: lightgray;
  min-width: 200px;
  min-height: 100px;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 24px;
  font-family: 'Helvetica';
  flex: 1 0 calc(33% - 2rem);
}

.item-type-a {
  flex-basis: 100%;
}

<div class="container">
  <div class="item item-type-a">Type A</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-a">Type A</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-a">Type A</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-a">Type A</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-a">Type A</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-b">Type B</div>
  <div class="item item-type-a">Type A</div>
  <div class="item item-type-a">Type A</div>
</div>

CSS 网格 - 根据相邻的兄弟姐妹拉伸和换行 DOM

CSS Grid - Stretch & wrap row based on adjacent siblings with a flat DOM

css

sass

flexbox

css-grid