Css网格动态布局

k2fxgqgv 于 2023-01-10 发布在其他

关注(0)|答案(1)|浏览(157)

我正在尝试制作一个包含1-4个元素的动态网格布局。他们实现了一些接近我在https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/的“动态布局”部分下寻找的东西。但略有不同。

此布局的CSS：

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

我试图做一些相似但不同的事情，但我不能得到它。这是我想达到的目标的图片：

css

来源：https://stackoverflow.com/questions/75027072/css-grid-dynamic-layouts

1条答案

按热度按时间

ctzwtxfj1#

您可以使用CSS第n个最后一个子级选择器来确定第一个子级何时是三个子级中的第一个。

.grid {
  display: grid;
}

.grid :nth-child(2) {
  grid-column-start: 2;
}

.grid :nth-child(1):nth-last-child(3) {
  grid-row-start: span 2;
}

/**/

.grid {
  width: 300px;
  aspect-ratio: 1;
  grid-gap: 5px;
  outline: 2px solid red;
  vertical-align: top;
  margin: 10px;
  counter-reset: num;
}

.grid * {
  border: 2px solid;
  font-size: 30px;
  box-sizing: border-box;
  font-family: sans-serif;
  display: grid;
  place-content: center;
}

.grid *:before {
  content: counter(num);
  counter-increment: num;
}

<div class="grid">
  <div></div>
</div>
<div class="grid">
  <div></div>
  <div></div>
</div>
<div class="grid">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

赞(0）回复(0）举报 2023-01-10

我来回答

Css网格动态布局

1条答案

相关问题

热门标签

最新问答