css - 折叠 CSS Grid 两列布局中未使用的空间

Question

我有一个两列布局，使用 float 或绝对放置的内容相对容易实现。主列宽 65%，辅助列宽 30%。为简单起见，假设一篇文章由标题和段落以及可以任意 float 到文章中任意位置右侧的 block 引用组成。这是一个例子:

https://codepen.io/dalton/pen/MzyXmX

我尝试使用 CSS 网格布局来完成类似的事情，但是当侧边栏内容比前面的主要内容高时，我得到了额外的空间。这是我的例子:

https://codepen.io/dalton/pen/aQNGga

这是一张截图，说明了使用 CSS 网格时的差距:

这是一个相关的标记示例:

<main>
  <h1>Article Title</h1>
  <p>Aliquam lobortis. Maecenas nec odio et ante tincidunt tempus. Etiam ut purus mattis mauris sodales aliquam. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor.Etiam vitae tortor. Sed aliquam ultrices mauris.</p>
  <blockquote>Suspendisse non nisl sit amet velit hendrerit rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</blockquote>
  <p>Vivamus in erat ut urna cursus vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci.</p>
</main>

这是使用 float 完成此布局所需的 CSS:

h1, h2, p {
  width: 65%;
}

blockquote {
  float: right;
  width: 30%;
}

这是我尝试使用 CSS Grid 完成布局的 CSS:

main {
  display: grid;
  grid-template-columns: 65% 30%;
  justify-content: space-between;
}

h1, h2, p {
  grid-column-start: 1;
}

blockquote {
  grid-column-start: 2;
}

需要说明的是，我不想创建带有 DIV 的两列布局。 block 引用(或其他任意侧边栏内容)必须相对于主栏中的内容放置。

Answer 1

您可以将元素配置为跨越不同的行，而不是只跨越一行:

main {
  display: grid;
  grid-template-columns: 65% 30%;
  justify-content: space-between;
  font-family: helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

p, h1, h2, h2 {
  grid-column-start: 1;
}

blockquote {
  grid-column-start: 2;
  grid-row: span 6; /*added this*/
  font-family: georgia, serif;
  font-size: 30px;
  font-weight: bold;
  margin: 0;
}

<main>
  <h1>Article Title</h1>
  
  <p>Aliquam lobortis. Maecenas nec odio et ante tincidunt tempus. Etiam ut purus mattis mauris sodales aliquam. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor.Etiam vitae tortor. Sed aliquam ultrices mauris.</p>

  <p>Vivamus in erat ut urna cursus vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci.</p>
  
   <p>Aliquam lobortis. Maecenas nec odio et ante tincidunt tempus. Etiam ut purus mattis mauris sodales aliquam. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor.Etiam vitae tortor. Sed aliquam ultrices mauris.</p>
  <blockquote>
Suspendisse non nisl sit amet velit hendrerit rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.
</blockquote>
  <p>Vivamus in erat ut urna cursus vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci.</p>
<p>Aliquam lobortis. Maecenas nec odio et ante tincidunt tempus. Etiam ut purus mattis mauris sodales aliquam. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor.Etiam vitae tortor. Sed aliquam ultrices mauris.</p>
<p>Vivamus in erat ut urna cursus vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci.</p>
<h2>Another Headline</h2>
<p>Vivamus in erat ut urna cursus vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci.</p>
<p>Vivamus in erat ut urna cursus vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci.</p>

</main>