html - 当内容达到一定限制时，CSS Grid space-between 无法按预期工作

Question

我想创建一个带有标签的部分，在小屏幕上变成“ Accordion ”，所以我不是先定义标签栏，然后定义每个标签的内容，而是放置标签的链接及其内容选项卡紧跟在链接之后，然后使用 CSS Grid 我将事件选项卡定位在选项卡栏中所有链接之后，以使链接位于第一行，事件选项卡位于第二行。

你可以看到这里的工作:

https://codepen.io/rbournissent/pen/PByXxM

div {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-row-gap: 80px;
  grid-template-rows: 40px 1fr;
  justify-content: space-between;
}

a {
  border: 1px solid black;
}

article {
  display: none;
  grid-column: 1 / 5;
  grid-row: 2 / 3;
  border: 1px solid black;
}

article.active {
  display: block;
}

<div>
  <a href="#">Link 1</a>
  <article class="active">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
  </article>

  <a href="#">Link 2</a>
  <article>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam tempore ipsum ipsa assumenda id rerum a voluptate ipsam nemo, repellat, quisquam nulla, ullam minima cumque obcaecati molestias veritatis cum iusto!
  </article>

  <a href="#">Link 3</a>
  <article>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum nesciunt facilis temporibus quaerat maiores aut, voluptates recusandae voluptatem corporis adipisci quia, nisi mollitia! Cum delectus earum sapiente distinctio tenetur iusto?
  </article>

  <a href="#">Link 4</a>
  <article>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit culpa optio accusamus soluta nemo, porro repellendus! Quisquam corrupti, hic praesentium ipsa, voluptate, non laudantium quae sit eum dolorum illo sed.
  </article>
</div>

问题是当文章的内容增长时会发生什么。 链接被拉伸(stretch)以填满整行并且 space-between 不再有效(即它们之间没有更多空间):

https://codepen.io/rbournissent/pen/qyJLwy

<div>
    <a href="#">Link 1</a>
    <article class="active">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus ab beatae sed maxime. Amet quam, error atque alias velit dicta officia et optio. Quidem tempora officiis minus laudantium! Beatae, eveniet!
    </article>
  
    <a href="#">Link 2</a>
    <article>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam tempore ipsum ipsa assumenda id rerum a voluptate ipsam nemo, repellat, quisquam nulla, ullam minima cumque obcaecati molestias veritatis cum iusto!
    </article>
  
    <a href="#">Link 3</a>
    <article>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum nesciunt facilis temporibus quaerat maiores aut, voluptates recusandae voluptatem corporis adipisci quia, nisi mollitia! Cum delectus earum sapiente distinctio tenetur iusto?
    </article>
  
    <a href="#">Link 4</a>
    <article>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit culpa optio accusamus soluta nemo, porro repellendus! Quisquam corrupti, hic praesentium ipsa, voluptate, non laudantium quae sit eum dolorum illo sed.
    </article>
</div>

唯一的区别是事件文章(选项卡)中的文本(内容)数量。

有人可以帮我解决这个问题吗？

Answer 1

如果你被允许使用 grid-template-areas，你可以试试这个:

.accordion {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 30% 70%;
  grid-template-areas:
    "l1 l2 l3 l4"
    "a a a a";
}

a {
  margin: 20px;
  border: 1px solid red;
  text-align: center;
}

a:nth-of-type(1) {
  grid-area: l1;
}

a:nth-of-type(2) {
  grid-area: l2;
}

a:nth-of-type(3) {
  grid-area: l3;
}

a:nth-of-type(4) {
  grid-area: l4;
}

article {
  display: none;
}

article.active {
  text-align: justify;
  padding: 0 20px 0 20px;
  display: block;
  grid-area: a;
}

<div class="accordion">
  
  <a href="#">Link 1</a>
  <article class="active">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat. Lorem ipsum, dolor sit amet     consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
  </article>
  
  <a href="#">Link 2</a>
  <article>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
  </article>
  
  <a href="#">Link 3</a>
  <article>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
  </article>
  
  <a href="#">Link 4</a>
  <article>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
  </article>
  
</div>