Question

我想使用CSS网格放置一些元素。但是由于页面的生成方式，我要放置的某些元素被包装在同一（否则为空）中间元素中。我放置这些元素的尝试没有成功；仅放置中间包装器元素。请参见下面的示例：

div#top {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}

div#one {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
}

div#two {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 3;
}

div#three {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
}

div#top, div#one, div#two, div#three {
  border: 1px solid red;
  border-radius: 10px;
  padding: 10px;
}

<div id="top">
  <div id="one">One</div>
  <div id="wrapper">
    <div id="two">Two</div>
    <div id="three">Three</div>
  </div>
</div>

有没有办法使包装器元素“透明”，以便将其中包含的元素放置在网格中？

Answer 1

我认为您正在使用CSS子网格，目前尚不支持该子网格，它在CSS网格2级规范中。

这里是一个链接，解释它是什么以及它如何工作。 https://www.smashingmagazine.com/2018/07/css-grid-2/

有没有办法在CSS网格上放置孙元素？

1 个答案: