如何使用CSS拆分动态组件？

Question

如何使用 CSS 在动态组件中对照片进行这种划分？

第一项一定要写满，其余的在下面的区域，如果你有2或3张照片，请正确划分空间

我正在尝试使用网格组件来执行此操作，例如：

  display: grid;
  grid-template-columns: 2fr 1fr;

并结合

&:first-of-type

但我没有成功

具有相同组件的另一个示例：

• 我可以使用样式组件来做到这一点

Answer 1

使用 flexbox 的动态示例，如果你不知道元素的数量：

html,
body,
section {
  margin: 0;
  height: 100%;
}

section {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  margin: 1rem 1rem 4rem;
}

article {
  flex: 1 1 1px;
  display: grid;
  place-content: center;
  background-color: plum;
}

article:first-child {
  flex: 100%;
}

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
</section>
<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>
<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
</section>

这是一个更简单的 3 元素示例，您可以在其中

grid-column: span 2

:first-child

：

html,
body,
section {
  margin: 0;
  height: 100%;
}

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

article {
  display: grid;
  place-content: center;
  background-color: plum;
}

article:first-child {
  grid-column: span 2;
}

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
</section>

您可以将其调整为 4 个元素：

html,
body,
section {
  margin: 0;
  height: 100%;
}

section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

article {
  display: grid;
  place-content: center;
  background-color: plum;
}

article:first-child {
  grid-column: span 3;
}

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>