CSS Grid space-между не работает должным образом, когда содержание достигает определенного предела

Я столкнулся с этим неожиданным поведением на новом веб-сайте, который я создаю.

Я хочу создать раздел с вкладками, который становится "аккордеоном" на маленьких экранах, поэтому вместо определения панели вкладок, а затем содержимого каждой вкладки я размещаю ссылку на вкладку и содержимое этой вкладки сразу после ссылка, а затем с помощью 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>

Проблема в том, что происходит, когда содержание статьи растет. Ссылки растягиваются, чтобы заполнить весь ряд, и пробел между ними больше не работает (т.е. между ними больше нет места):

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>

Разница лишь в количестве текста (контента) в активной статье (вкладке).

Может ли кто-нибудь помочь мне с этим? Я не понимаю, почему это происходит и как это решить.

Заранее спасибо!

Источник

2 ответа

Я думаю, что это будет работать для вас:

Исправление было просто добавлено width:15vw; к <a> поэтому ширина не меняется.

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;
  width:15vw;
  margin-right: 11.2vw;
}
a:nth-last-child(2){ margin-right:0;}
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.
    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. 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>

Эта проблема возникла при использовании display: grid; ширина содержимого в article оказывает влияние на a даже если текст в article это влияет на a так что, на мой взгляд, лучше пойти с моим решением.

Надеюсь, это было полезно для вас.

Источник

Если вам разрешено использовать grid-template-area, вы можете попробовать это:

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

Источник
Другие вопросы по тегам