0

I have a HTML document with following fragment

<main>
  <article>A</article>
  <article>B</article>
  <article>C</article>
  <article>D</article>
  <article>E</article>
  <article>F</article>
  <article>G</article>
  <article>H</article>
  <article>I</article>
  <article>J</article>
  <aside>Tall content</aside>
</main>

and I would like to put all the articles in left column and strech aside element as sidebar on the right.

I tried following CSS:

main
{
  display: grid;
  grid-template-columns: 1fr 15rem;
  grid-auto-rows: auto auto;
  gap: 1rem;
}

article
{
  grid-column: 1;
}

aside
{
  grid-column: 2;
  grid-row: 1 / -1;
}

However, this does not work. The reason is that the -1 in grid-row refers to end of explicit grid. How to refer to end of implicit or the whole grid?

The list of articles is dynamically generated and I'd prefer not to have to say grid-row: 1 / 11 which would make the example work correctly but requires changing the second number according to content. I'd highly prefer to keep CSS static for all content.

Mikko Rantalainen
  • 14,132
  • 10
  • 74
  • 112
  • related (probably a duplicate) https://stackoverflow.com/q/55958688/8620333 – Temani Afif Feb 18 '20 at 09:53
  • @TemaniAfif I think the referenced question is a special case of this question. – Mikko Rantalainen Feb 19 '20 at 07:10
  • This might be a good case of why CSS grid isn't always an all-encompassing panacea. IMHO this layout is better suited using flexbox, where articles are nested in a `
    ` and then the `
     – Terry Feb 21 '20 at 11:57
  • @Terry If I had an extra wrapper around all the articles, there would be multiple solutions including a two column grid layout and flexbox. However, I'm trying to figure if this layout is possible without any extra wrapper elements. – Mikko Rantalainen Feb 22 '20 at 09:01

2 Answers2

0

main {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 15em;
  grid-auto-rows: auto auto;
}

article {
  grid-auto-rows: 50px;
}

aside {
  grid-column: 2;
  grid-row: 1 / -1;
}

main>* {
  color: #fff;
  background: #777;
  padding: 1rem;
  border-radius: 0.5rem;
}
<main>
  <article>A</article>
  <article>B</article>
  <article>C</article>
  <article>D</article>
  <article>E</article>
  <article>F</article>
  <article>G</article>
  <article>H</article>
  <article>I</article>
  <article>J</article>
  <article>J</article>
  <article>J</article>
  <article>J</article>
  <article>J</article>
  <div>
    <aside>Tall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall
      contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall content contentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall
      contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall
      contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall
      contentTall contentTall content</aside>
  </div>
</main>
Terry
  • 63,248
  • 15
  • 96
  • 118
Priyanka Saini
  • 15
  • 7
0

As of October 2020, no known solution exists. Even if some browser did implement some new feature in near future, it cannot be safely used in years until the majority of all internet users have upgraded their browsers.

Mikko Rantalainen
  • 14,132
  • 10
  • 74
  • 112