Question

是否有一种更自动的方法来使数据在元素周围流动？我觉得我已经非常接近CSS Grid，但是Grid中有很多角落和缝隙我还没有发现，所以也许我只需要添加一些额外的规则即可。

这就是我想要做的：

在右侧显示元素
让其他元素围绕着它

这实际上与MS Word或Google文档中的相似，在MS Word或Google文档中，您在右上角有一个图像，所有文本都围绕它流动，但是元素而不是文本。

以下代码段中的内容主要是我要去的内容，但以下情况除外：

当第一个section短时，aside的第4部分还有足够的空间。使用当前方法，要使其正常工作，我需要将grid-row: 1 / 4更改为grid-row: 1 / 5，并将aside ~ section:nth-of-type(4)添加到窄sections的列表中。
当第一个section高时，它下面的section中的一个远远超过aside，因此它应该占据全部5个网格列。 / p>

在此代码段中，高度是静态的，但在现实世界中，高度将是动态的。有没有其他自动方法可以使用CSS Grid解决此问题？我唯一想到的另一种方法是使用javascript检测大小，并根据各种元素的高度添加类或内联CSS。

document.querySelector('button').addEventListener('click', () => {
  const aside = document.querySelector('aside');
  if (aside) {
    aside.remove();
  } else {
    document.querySelector('main').prepend(document.createElement('aside'));
  }
});

document.querySelector('a').addEventListener('click', (event) => {
  event.target.parentElement.classList.toggle('tall');
});

main {
  display: grid;
  padding: 5px;
  margin: 5px;
  grid-gap: 5px;
  background-color: gray;
  
  grid-template-columns: repeat(5, 1fr);
}

aside {
  height: 120px;
  background-color: green;
  
  grid-column: 4 / 6;
  grid-row: 1 / 4;
}

section {
  height: 20px;
  background-color: white;
  
  grid-column-end: span 5;
}

section.tall {
  height: 100px;
}

aside ~ section:nth-of-type(1),
aside ~ section:nth-of-type(2),
aside ~ section:nth-of-type(3) {
  grid-column-end: span 3;
}

<button>Toggle Aside</button>
<main>
  <aside></aside>
  <section><a href="javascript://">Toggle Height</a></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</main>

Answer 1

看来，解决此问题的最简单方法是使用良好的旧float属性，该属性会导致其他元素“立即可用”在给定元素周围流动。唯一需要添加的内容是使这些部分建立新的块格式设置上下文，以防止它们与浮动元素重叠（默认情况下像display: block元素一样）。 several ways可以做到这一点，包括标准的解决方案（但遗憾的是，还没有跨浏览器）— display: flow-root。

document.querySelector('button').addEventListener('click', () => {
  const aside = document.querySelector('aside');
  if (aside) {
    aside.remove();
  } else {
    document.querySelector('main').prepend(document.createElement('aside'));
  }
});

document.querySelector('a').addEventListener('click', (event) => {
  event.target.parentElement.classList.toggle('tall');
});

main {
  /* the display:flow-root alternative with the best balance
     between browser support and unwanted side effects (IMO).
     Other alternatives live comparison: https://codepen.io/SelenIT/pen/qrORXm */
  column-count: 1;

  padding: 5px 5px 0;
  margin: 5px;
  background-color: gray;
}

aside {
  height: 120px;
  width: calc((100% - 20px) * 0.4); /* 2/5 of (100% - 4 gaps of 5px each) */
  background-color: green;
  margin: 0 0 5px 5px;
  float: right;
}

section {
  column-count: 1;
  height: 20px;
  background-color: white;
  margin-bottom: 5px;
}

section.tall {
  height: 100px;
}

<button>Toggle Aside</button>
<main>
  <aside></aside>
  <section><a href="javascript://">Toggle Height</a></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</main>

Answer 2

注意：此答案实际上无效。我误认为自动放置与命名网格区域一起工作的方式。不过，我留作参考。

我会使用一个更简单的网格。看来您实际上并不需要统一的5列网格。像这样：

main {
  display: grid;
  padding: 5px;
  margin: 5px;
  grid-gap: 5px;
  background-color: gray;
  
  /*grid-template-columns: repeat(5, 1fr);*/
  grid-template: "a   aside"
                 "a   aside"
                 "a   aside"
                 "wide wide"
                 "wide wide"
                / 4fr 1fr;
}

aside {
  /* height: 120px; */
  background-color: green;
  
  /*grid-column: 4 / 6;*/
  /*grid-row: 1 / 4;*/
  
  grid-area: aside;
}

section {
  height: 20px;
  background-color: white;
  /* grid-column-end: span 5; */
}

<button>Toggle Aside</button>
<main>
  <aside></aside>
  <section><a href="javascript://">Toggle Height</a></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</main>

MDN grid-template文档：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template

CSS网格中相互流动的元素

2 个答案: