CSS Grid space-between not working as expected when content reaches a certain limit

Question

I'm facing this unexpected behavior in a new website I'm building.

I want to create a section with tabs that becomes an "accordion" in small screens, so instead of defining the tabs bar first and then the content of each tab I'm placing the link to the tab and the content of that tab right after the link and then using CSS Grid I'm positioning the active tab after all the links in the tab bar to have the links in the first row and the active tab in the second row.

You can see that working here:

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> 

The problem is what happens when the content of the article grows . The links get stretched to fill the whole row and space-between is no longer working (ie there is no more space between them):

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>

The only difference is the amount of text (content) in the active article (tab).

Can somebody help me with this? I don't understand why this happens and how to solve it.

Thanks in advance!

Answer 1

I think this will work for you:

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> 

This issue occurred as you are using display: grid; the width of the content in article is effecting the a even the if the text in the article it affects the a so, in my opinion, it's better to go with my solution.

Hope this was helpfull for you.

Answer 2

If you're allowed to use grid-template-areas, you can try this out:

 .accordion { display: grid; grid-template-columns: 25% 25% 25% 25%; grid-template-rows: 30% 70%; grid-template-areas: "l1 l2 l3 l4" "aaaa"; } 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>