CSS Grid space-between не работает должным образом, когда контент достигает определенного предела
Я столкнулся с таким неожиданным поведением на новом веб-сайте, который я создаю.
Я хочу создать раздел с вкладками, который становится «гармошкой» на маленьких экранах, поэтому вместо определения сначала панели вкладок, а затем содержимого каждой вкладки, я помещаю ссылку на вкладку и содержимое этой вкладки сразу после ссылку, а затем с помощью 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>
Единственное отличие - это количество текста (контента) в активной статье (вкладке).
Кто-нибудь может мне с этим помочь? Я не понимаю, почему это происходит и как это решить.
Заранее спасибо!
Да, но это не увеличивает пространство между ячейками: codepen.io/rbournissent/pen/VBERrP (см. Разницу в правильной работе space-between: codepen.io/rbournissent/pen/PByXxM, где ссылки равномерно распределены с правильным промежутком между ними)
Ой, извини. Я пытаюсь избежать этого, потому что затем с помощью медиа-запросов я хочу преобразовать его в «аккордеон», где вы можете развернуть / свернуть вкладки. Вот реализация с медиа-запросом: codepen.io/rbournissent/pen/BPqgRY
Я не понял. Чего вы пытаетесь избежать?
Перед удалением был комментарий. Я стараюсь не заключать все ссылки в div, потому что тогда мне нужны «ссылки, вкладка, ссылки, вкладка, ссылки, вкладка, ...»
Ответы 2
Я думаю, это сработает для вас:
The fix was simple just added
width:15vw;to the<a>so the width dont get changed.
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, поэтому, на мой взгляд, лучше пойти с моим решением.
Надеюсь, это было полезно для вас.
Спасибо за ваш ответ. У этого подхода все еще есть проблема, когда ячейки используют все пространство для заполнения строки. Посмотрите, как с этим решением у вас остается пустое место после 4-й ссылки. При использовании пробела между ними последняя ссылка должна быть в самом конце строки (и расстояние между ссылками должно быть таким же).
@RodrigoBournissent обновил мой ответ, пожалуйста, проверьте.
Если вам разрешено использовать сетку-шаблон-области, вы можете попробовать это:
.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>Спасибо за ответ, но у этого подхода все еще есть проблема, когда вы используете justify-content: space-between; (и внутри активной статьи / вкладки много контента)
Кажется, я тебя не понимаю. Вот ручка, в которой я использовал и justify-content: space-between;, и много содержимого внутри. И я все еще не могу определить проблему. codepen.io/devnathjoydeep/pen/QBZXeP
Может, проще это увидеть, если убрать поля (margin: 20px;) с ссылок. Между ссылками нет пробела, «элементы сетки» используют все пространство, даже если вы используете grid-template-columns: repeat(4, auto); вместо grid-template-columns: repeat(4, 25%);. Я хочу, чтобы ссылки использовали только пространство, необходимое каждой из них, и при этом были одинаково отделены друг от друга (это то, что делает пространство между).
Чтобы увидеть разницу между это и это, возможно, вам нужно добавить больше контента в активную статью второй ссылки (контент должен использовать как минимум до строк внутри статьи, чтобы воспроизвести проблему, когда ссылки внезапно начинают использовать все доступное пространство )
Можно ли обернуть
<a>внутрьdiv?