Question

我有一个两列的布局，使用浮点数或绝对放置的内容相对容易实现。主列宽65％，次列宽30％。为了简单起见，假设文章由标题和段落组成，并且可以在文章中的任意位置任意浮动一个大括号。这是一个示例：

我尝试使用CSS Grid布局完成类似的操作，但是当侧边栏内容比紧接的前一个主要内容高时，我会得到额外的空间。这是我的示例：

下面的屏幕截图说明了使用CSS Grid时的差距：

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

<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>

以下是使用浮点数完成此布局所需的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创建两列布局。必须将blockquote（或其他任意侧边栏内容）相对于主列中的内容放置。

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>

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

1 个答案: