Свертывание неиспользуемого пространства в CSS-сетке с двумя столбцами

Question

У меня есть макет с двумя столбцами, который относительно легко достичь с помощью плавающих или абсолютно размещенного контента. Основной столбец имеет ширину 65%, а дополнительный столбец имеет ширину 30%. Для простоты, скажем, статья состоит из заголовков и абзацев, а также кавычки, которые могут быть произвольно перемещены вправо в любом месте статьи. Вот пример:

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

Я пытался сделать что-то подобное, используя CSS Grid layout, но я получаю дополнительные пробелы, когда содержимое боковой панели выше, чем непосредственно предшествующее основное содержимое. Вот мой пример:

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

Вот скриншот, иллюстрирующий разрыв при использовании 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, необходимый для выполнения этого макета с помощью float:

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

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

А вот CSS, который я пытался выполнить с помощью CSS Grid:

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. Цитата (или другое произвольное содержимое боковой панели) должна быть размещена относительно содержимого в главном столбце.

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>