html - 打破 flexbox 并从同一行的下一列开始

Question

我正在尝试制作一个css布局，在某个元素之后假设:nth-child(6)元素应该中断并在同一行中形成一个单独的列。父元素应该在同一行中的每 6 个元素之后分成 2 列，一旦所有 12 个元素都完成，它应该转到下一行并形成相同的上述规则。使用 div 可以做到这一点，但我需要使其动态化，因此应该使用 flexblox 和 grid 来实现。

HTML：

  <div class="home__content">
    <!-- sub cards -->
    <div class="sub__card">
      <div class="home__subcardContainer">
        <h4>একটা যুগের অবসান, চলে গেলেন সকলের প্রিয় ফেলুদা সকলের প্রিয় ফেলুদা</h4>
      </div>
      <img class="subcard__image"
        src="https://sambadkolkata.in/uploads/post_main_image/1605424509_image_IMG-20201114-WA0230.jpg" alt="Avatar"
        style="width:100%">
    </div>
    
    <div class="sub__card">
      <div class="home__subcardContainer">
        <h4>একটা যুগের অবসান, চলে গেলেন সকলের প্রিয় ফেলুদা সকলের প্রিয় ফেলুদা</h4>
      </div>
      <img class="subcard__image"
        src="https://sambadkolkata.in/uploads/post_main_image/1605424509_image_IMG-20201114-WA0230.jpg" alt="Avatar"
        style="width:100%">
    </div>

  </div>

CSS：

.sub__card {
  display: flex;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 90%;
  border-radius: 5px;
  margin: 2%;
}

.sub__card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.home__subcardContainer {
  padding: 10px 10px;
}

.subcard__image {
  border-radius: 0 5px 5px 0;
  max-width: 30%;
}

.home__content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 5% 0%;
}

.home__contentLeft {
  flex: 0.5;
}

.home__contentRight {
  flex: 0.5;
}

.sub__card:nth-child(1) {
  flex-direction: column-reverse;
}

.sub__card:nth-child(1) > .subcard__image {
  border-radius: 5px 5px 0 0;
  max-width: 100%;
}

.sub__card:nth-child(7) {
  flex-direction: column-reverse;
}

.sub__card:nth-child(7) > .subcard__image {
  border-radius: 5px 5px 0 0;
  max-width: 100%;
}

.sub__card:nth-child(6) {
  break-after: always;
}

标签： htmlcssangular

Answer 1

可以使用 css 网格轻松实现。

.container {
  display: grid;
  grid-template-columns: repeat(6, 6em);
  grid-gap: 1em;
}

.item {
  background-color: dodgerblue;
  height: 4em;
  border-radius: 0.5em;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

这是codepen链接。您可以编辑代码并查看它的运行情况。