A Sticky element wont scroll all the ways - html
html,body{
height: 100%;
}
.Page{
display: grid;
grid-template-columns:1fr 12fr 2fr ;
grid-template-rows: 3fr 9fr 1fr;
margin: 0;
background-color: #1C1F1F;
}
header{
grid-column-start: 2;
grid-column-end: 3;
background-color: #1C1F1F;
grid-row: 1/2;
align-items: center;
align-content: center;
display: inline;
}
.HeaderM{
font-size: 95%;
}
.LeftBar{
grid-column-start: 1;
grid-column-end: 2;
top:0;
position: sticky;
background-color: #292E2E;
}
.Navigation{
display: flex;
flex-direction: column;
align-items: center;
width: 80%;
margin-left: 10%;
margin-right: 10%;
background-color: #1a52519f;
}
.RightBar{
grid-column-start: 3;
grid-column-end: 4;
grid-row: 1/3;
background-color: #292E2E;
position:sticky;
top: 0;
height: 100%;
}
.Content{
grid-column-start: 2;
grid-column-end: 3;
margin: 0%;
background-color: #3D4242;
padding: 5%;
margin: 5%;
}
.foot{
grid-column: 1/4;
background-color: #565C5C;
padding: 0;
grid-row: 3/4;
}
.btnnav{
width:75% ;
aspect-ratio: 1/1;
border: 0;
background-color: #3D4242;
border: 5px solid #3D4242;
border-radius: 50%;
transition-duration: 0.3s;
z-index: 2;
}
.btnnav:hover
{
width: 120%;
background-color: #2F9594;
}
#historybtn{
background-image: url("img/history.png");
background-repeat: no-repeat;
background-position: center;
background-size: 150%;
}
#keyframes logo {
0%{background-image: url("img/grass.png");}
25% {background-image: url("img/dia.png");}
50%{background-image: url("img/spawner1.png");}
75%{background-image: url("img/oak1.png");}
100%{background-image: url("img/grass.png");}
}
.logo{
background-image: url("grass.png");
background-repeat: no-repeat;
width: 200px;
height: 200px;
animation-name:logo;
animation-duration: 10s;
animation-play-state:paused ;
animation-iteration-count:infinite ;
align-items: center;
align-content: center;
margin: auto;
}
.logo:hover{
animation-play-state:running ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Project.css"/>
<title>Document</title>
</head>
<body class="Page">
<header>
<div class="logo"></div>
</header>
<section class="LeftBar">
<nav>
<div class="Navigation" >
<button class="btnnav" id="historybtn"></button>
<button class="btnnav">Test</button>
<button class="btnnav">Test</button>
<button class="btnnav">Test</button>
<p>xd</p>
</div>
</nav>
</section>
<section class="Content">
<p>Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?</p>
</section>
<section class="RightBar">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae facilis itaque eum. Necessitatibus, esse voluptatum quas facilis repellat repudiandae labore fuga vitae, assumenda id voluptatem. Corrupti cum dignissimos velit assumenda.</p>
</section>
<footer class="foot">
<p style="margin: 0;"> © Vojtěch Charouz 2023</p>
</footer>
</body>
</html>
I am attempting to make my "Left bar" stick to the top of the screen, however at some point in the document, it just stops.
I think it is because the document is formated using the grid, even though the element itself doesnt have Grid rows set.
Is there any way i can make this work, ideally without having to give up the grid?
My html:
(i removed the placeholder text in order to make it more readable)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Project.css"/>
<title>Document</title>
</head>
<body class="Page">
<header>
<div class="logo"></div>
</header>
<section class="LeftBar">
<nav>
<div class="Navigation" >
<button class="btnnav" id="historybtn"></button>
<button class="btnnav">Test</button>
<button class="btnnav">Test</button>
<button class="btnnav">Test</button>
<p>xd</p>
</div>
</nav>
</section>
<section class="Content">
<p> A lot of placeholder text in order to make the page scrollable</p>
</section>
<section class="RightBar">
<p>placeholder</p>
</section>
<footer class="foot">
<p style="margin: 0;"> placeholder</p>
</footer>
</body>
</html>
My Css:
html,body{
height: 100%;
}
.Page{
display: grid;
grid-template-columns:1fr 12fr 2fr ;
grid-template-rows: 3fr 9fr 1fr;
margin: 0;
background-color: #1C1F1F;
}
header{
grid-column-start: 2;
grid-column-end: 3;
background-color: #1C1F1F;
grid-row: 1/2;
align-items: center;
align-content: center;
display: inline;
}
.HeaderM{
font-size: 95%;
}
.LeftBar{
grid-column-start: 1;
grid-column-end: 2;
top:0;
position: sticky;
background-color: #292E2E;
}
.Navigation{
display: flex;
flex-direction: column;
align-items: center;
width: 80%;
margin-left: 10%;
margin-right: 10%;
background-color: #1a52519f;
}
.RightBar{
grid-column-start: 3;
grid-column-end: 4;
grid-row: 1/3;
background-color: #292E2E;
position:sticky;
top: 0;
height: 100%;
}
.Content{
grid-column-start: 2;
grid-column-end: 3;
margin: 0%;
background-color: #3D4242;
padding: 5%;
margin: 5%;
}
.foot{
grid-column: 1/4;
background-color: #565C5C;
padding: 0;
grid-row: 3/4;
}
.btnnav{
width:75% ;
aspect-ratio: 1/1;
border: 0;
background-color: #3D4242;
border: 5px solid #3D4242;
border-radius: 50%;
transition-duration: 0.3s;
z-index: 2;
}
.btnnav:hover
{
width: 120%;
background-color: #2F9594;
}
#historybtn{
background-image: url("img/history.png");
background-repeat: no-repeat;
background-position: center;
background-size: 150%;
}
#keyframes logo {
0%{background-image: url("img/grass.png");}
25% {background-image: url("img/dia.png");}
50%{background-image: url("img/spawner1.png");}
75%{background-image: url("img/oak1.png");}
100%{background-image: url("img/grass.png");}
}
.logo{
background-image: url("grass.png");
background-repeat: no-repeat;
width: 200px;
height: 200px;
animation-name:logo;
animation-duration: 10s;
animation-play-state:paused ;
animation-iteration-count:infinite ;
align-items: center;
align-content: center;
margin: auto;
}
.logo:hover{
animation-play-state:running ;
}
Thanks
I tried:
Changing heights of the element and its parents
Removing the Grid-row property from the element
Related
I am trying to copy google notes layout [duplicate]
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 7 months ago.
I don't Know , if there is a solution, using css-grid?,
i have tried giving a max width to note-card but i dont want to remove height:max-content; this is because what if note has more than 30 words. thanks
.flex-container{
justify-content: flex-start;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
}
here is my code
body{
background-color:black;
}
.flex-container div {
display: inline-block;
min-height: 1em;
height: max-content;
width: 12em;
padding: 5px;
border: 1px solid white;
border-radius: .5em;
margin: 4px;
color:white;
}
.flex-container{
justify-content: flex-start;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
}
<div class="flex-container">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, enim?</div>
<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem animi similique placeat voluptatibus
nihil cupiditate!</div>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At quis odit tenetur adipisci?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, ab.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam distinctio dolores fuga sit culpa provident
modi ex ipsa aspernatur maiores?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus exercitationem ex inventore
vel, quo natus esse quos veritatis deserunt hic commodi architecto suscipit ad, ipsa, nulla sapiente totam
dicta.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur dolorum similique dolores, est sequi
autem?</div>
</div>
So CSS has a columns property that let's you achieve this very simply, see solution below. Compatible with everything, even Internet Explorer. More info on MDN
:root { --gap: .5rem }
.columnLayout {
columns: 2;
column-gap: var(--gap);
padding: var(--gap) var(--gap) 0 var(--gap);
}
.columnLayout div {
display: inline-block;
margin-bottom: var(--gap);
}
/* BELOW STYLES FOR STYLING ONLY -- NOT RELEVANT TO ANSWER */
* { box-sizing: border-box } body{ background-color: black; color: white; font: 16px sans-serif; margin: 0 } .columnLayout div { border: 1px solid currentColor; border-radius: .5rem; padding: .5rem }
<div class="columnLayout">
<div>1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, enim?</div>
<div>2. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem animi similique placeat voluptatibus nihil cupiditate!</div>
<div>3. Lorem ipsum dolor sit amet consectetur, adipisicing elit. At quis odit tenetur adipisci?</div>
<div>4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, ab.</div>
<div>5. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam distinctio dolores fuga sit culpa provident modi ex ipsa aspernatur maiores?</div>
<div>6. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus exercitationem ex inventore vel, quo natus esse quos veritatis deserunt hic commodi architecto suscipit ad, ipsa, nulla sapiente totam dicta.
</div>
<div>7. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur dolorum similique dolores, est sequi autem?
</div>
</div>
Alternatively, if you want to keep the left-right flow then you will need JavaScript for a "masonry" layout, if you can't / don't want to write the JS yourself there is a widely used library for this called Masonry JS
Css display property not working perfectly in my practice website
I don't understand why 2nd div is not up of 1st div. I want they 2 div perfectly set as like my image direction. already i try display block but not working. i don't know why main problem. already i have many research, but all fail. so please help me to solution my problem. advanced thanks and love from my top heart.
`
.testimonial .content{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.testimonial .content .testimonialBx{
max-width: calc(50% - 40px);
padding: 60px 40px;
margin: 20px;
background: #2196f3;
}
<section class="testimonial">
<div class="heading">
<h2>Testimonial</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure!</p>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
</section>
`
Wrap those 2 divs in 1 div and make it as flex.
Updated Code
.testimonial .content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.testimonial .content .testimonialBx {
max-width: calc(50% - 40px);
padding: 60px 40px;
margin: 20px;
background: #2196f3;
}
.container {
display: flex;
}
<!DOCTYPE html>
<html>
<head> </head>
<body>
<section class="testimonial">
<div class="heading">
<h2>Testimonial</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure!</p>
</div>
<div class="container">
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
</div>
</section>
</body>
</html>
Answer from #nagendraNag is ideal. I would just remove the max-width max-width: calc(50% - 40px);
Fixed height table irrespective of the available space. Table become scrollable
I want my table to have a fixed dynamic height, so I can scroll and it does not expand. So I have this bootstrap row & 2 columns. I want the table or the left column to have the height of the height needed for the right column. <div class="row"> <div class="col"> <table class="table table-sm table-light table-striped"> <tbody> <tr> <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td> </tr> <tr> <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td> </tr> <tr> <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td> </tr> <tr> <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td> </tr> <tr> <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td> </tr> <tr> <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td> </tr> <tr> <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td> </tr> <tr> <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td> </tr> <tr> <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td> </tr> <tr> <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td> </tr> <tr> <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td> </tr> <tr> <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td> </tr> </tbody> </table> </div> <div class="col"> <h3>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur earum labore molestiae? Amet facilis minima nobis saepe ut voluptatem voluptates! Alias autem error explicabo hic molestiae non pariatur qui repellendus?</h3> <p>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam expedita id illum ipsam molestiae quam, qui recusandae sed sint voluptate. Accusantium amet atque, cumque error est facere harum libero magnam molestias nam nemo, nobis omnis perspiciatis suscipit tenetur ullam veritatis voluptates voluptatibus? Amet blanditiis, consequatur cupiditate, ea earum eius fugiat illo in ipsa itaque magni nemo nihil quaerat quia ratione saepe, sunt ullam vel. Accusamus ad adipisci architecto blanditiis cupiditate debitis doloribus dolorum error facere hic laboriosam, laudantium magni maxime, molestias mollitia necessitatibus, nisi quibusdam quis quos veritatis. Assumenda cum cumque facere nobis quaerat sed, sequi voluptatem! Ab, dolores odit.</p> </div> In this example the table just expands downwards if I add more rows. But I want the table to skip expanding when the height is at the height of the right column and scroll in stead. I use bootstrap for styling. Thanks in advance!
Since you want the table to respect the height of the smaller column, we need JavaScript...
We take the height of the right column and applies it to the table, letting a scrollbar to help with viewing the contents
working snippet below:
$(window).on("resize", function() {
$(".col:nth-child(1)").css('height', $(".actualContents").height());
$(".col:nth-child(1)").css('display', 'block');
$(".col:nth-child(1)").css('overflow-y', 'scroll');
}).resize();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col">
<table class="table table-sm table-light table-striped">
<tbody>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<div class="actualContents">
<h3>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur earum labore molestiae? Amet facilis minima nobis saepe ut voluptatem voluptates! Alias autem error explicabo hic molestiae non pariatur qui repellendus?</h3>
<p>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam expedita id illum ipsam molestiae quam, qui recusandae sed sint voluptate. Accusantium amet atque, cumque error est facere harum libero magnam molestias nam nemo, nobis omnis perspiciatis
suscipit tenetur ullam veritatis voluptates voluptatibus? Amet blanditiis, consequatur cupiditate, ea earum eius fugiat illo in ipsa itaque magni nemo nihil quaerat quia ratione saepe, sunt ullam vel. Accusamus ad adipisci architecto blanditiis
cupiditate debitis doloribus dolorum error facere hic laboriosam, laudantium magni maxime, molestias mollitia necessitatibus, nisi quibusdam quis quos veritatis. Assumenda cum cumque facere nobis quaerat sed, sequi voluptatem! Ab, dolores odit.</p>
</div>
</div>
</div>
As the previous one is in jQuery (wich I don't use) I shall answer in JS:
const rightColumn = document.getElementById("rightColumn").firstElementChild;
const table = document.getElementById("actualContents");
window.addEventListener("resize", (evt) => {
resize();
});
function resize() {
table.style.height = rightColumn.clientHeight;
table.style.overflowY = "scroll";
}
resize();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col">
<table class="table table-sm table-light table-striped">
<tbody>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<div id="actualContents">
<h3>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur earum labore molestiae? Amet facilis minima nobis saepe ut voluptatem voluptates! Alias autem error explicabo hic molestiae non pariatur qui repellendus?</h3>
<p>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam expedita id illum ipsam molestiae quam, qui recusandae sed sint voluptate. Accusantium amet atque, cumque error est facere harum libero magnam molestias nam nemo, nobis omnis perspiciatis
suscipit tenetur ullam veritatis voluptates voluptatibus? Amet blanditiis, consequatur cupiditate, ea earum eius fugiat illo in ipsa itaque magni nemo nihil quaerat quia ratione saepe, sunt ullam vel. Accusamus ad adipisci architecto blanditiis
cupiditate debitis doloribus dolorum error facere hic laboriosam, laudantium magni maxime, molestias mollitia necessitatibus, nisi quibusdam quis quos veritatis. Assumenda cum cumque facere nobis quaerat sed, sequi voluptatem! Ab, dolores odit.</p>
</div>
</div>
</div>
Same height for row in box
I have free box and content in it, but I need to do same height for row in it. Now is same height only box, but I need to do same height for row in box. In example which is bellow I have blue row, which is row where I need to do same height for it and keep them on the same line with the same height.
.container {
display:flex;
}
.box {
background:red;
}
.row {
background:blue;
}
<div class="container">
<div class="box">
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore explicabo quam aut cum pariatur blanditiis possimus</p></div>
<div class="row"><p>Lorem ipsum dolor sit amet</p></div>
</div>
<div class="box">
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore explicabo quam aut cum pariatur blanditiis possimus</p></div>
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque dolorem ut fuga impedit, obcaecati aut est inventore voluptatibus eligendi iusto dignissimos consequatur pariatur tenetur vero. Eum aspernatur ad porro a.</p></div>
</div>
<div class="box">
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt inventore, facilis error, tempore nisi optio quasi</div>
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p></div>
</div>
</div>
Have a read of this http://www.lottejackson.com/learning/an-equal-height-grid-using-flexbox You need to make the rows display:flex
CSS Grid space-between not working as expected when content reaches a certain limit
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>
Link 1
<article class="active">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
</article>
Link 2
<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>
Link 3
<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>
Link 4
<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 (i.e. there is no more space between them):
https://codepen.io/rbournissent/pen/qyJLwy
<div>
Link 1
<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>
Link 2
<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>
Link 3
<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>
Link 4
<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?
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"
"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">
Link 1
<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>
Link 2
<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>
Link 3
<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>
Link 4
<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>
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>
Link 1
<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>
Link 2
<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>
Link 3
<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>
Link 4
<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.