내용 수를 변경하기위한 눈금 레이아웃 자동 높이

Question

.button 높이가 증가 할 때 항목의 수가 다릅니다. grid-template-areas 방법 이외의 격자 레이아웃에 다른 해결책이 있습니까?

.my-wrap { 
 
    display: grid; 
 
    grid-template-columns: 25% 1fr; 
 
    grid-gap: 0.5rem; 
 
    width: 90%; 
 
    margin: 50px auto; 
 
    color: #fff; 
 
    grid-template-areas: " link-one details " 
 
         " link-two details " 
 
         " link-three details " 
 
         " ....  details "; 
 
} 
 

 
.wrap-one { 
 
    background-color: tomato; 
 
} 
 

 
.wrap-two { 
 
    background-color: blue; 
 
} 
 

 
.wrap-three { 
 
    background-color: green; 
 
} 
 

 
.button { 
 
    text-decoration: none; 
 
    background-color: #333; 
 
    color: #fff; 
 
    padding: 0.5rem 1rem; 
 
    transition: all 0.25s; 
 
} 
 

 
.button:hover { 
 
    background-color: #000; 
 
} 
 

 
.details { 
 
    grid-area: details; 
 
    display: none; 
 
    border: 1px solid #333; 
 
    color: #333; 
 
} 
 

 
.wrap-button-one { 
 
    grid-area: link-one; 
 
} 
 

 
.wrap-button-two { 
 
    grid-area: link-two; 
 
} 
 

 
.wrap-button-three { 
 
    grid-area: link-three; 
 
} 
 

 
div:target { 
 
    display: block; 
 
} 
 

 
p { 
 
    margin: 10px; 
 
}

<div class="my-wrap"> 
 
    <a href="#one" class="wrap-button-one button">Link One</a> 
 
    <div id="one" class="wrap-one one details"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam repudiandae, dolor unde laudantium ducimus explicabo necessitatibus doloribus. Repellendus quasi necessitatibus omnis culpa sint dolore, error sapiente magni sequi, harum eveniet!</p> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio est, deserunt autem laboriosam quis culpa ex animi soluta tenetur quo eius illo necessitatibus. Minima deleniti recusandae commodi? Ipsa, laudantium architecto?</p> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ipsam, necessitatibus excepturi obcaecati quis consequatur autem, eos incidunt, accusantium esse dolorum? Reprehenderit, dicta pariatur a eligendi placeat optio praesentium architecto.</p> 
 
    </div> 
 
    <a href="#two" class="wrap-button-two button">Link Two</a> 
 
    <div id="two" class="wrap-two two details"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p> 
 
    </div> 
 
    <a href="#three" class="wrap-button-three button">Link Three</a> 
 
    <div id="three" class="wrap-three three details"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p> 
 
    </div> 
 
    <a href="#four" class="wrap-button-four button">Link Four</a> 
 
    <div id="four" class="wrap-four four details"> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores debitis ducimus optio magnam ratione voluptatem voluptatum repellendus facilis. Repellat velit facilis reiciendis ratione recusandae delectus iure doloribus inventore, dolorum porro?</p> 
 
    </div> 
 
    <a href="#five" class="wrap-button-five button">Link five</a> 
 
    <div id="five" class="wrap-five five details"> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit nam ab, iusto corrupti quos molestiae tempora sapiente eos unde debitis sint exercitationem aperiam hic inventore veniam, in est labore vitae! Lorem ipsum dolor, sit amet consectetur 
 
     adipisicing elit. Tempora, vel maxime! Autem ullam, quidem, ipsum obcaecati vitae alias, omnis dolores amet doloremque accusamus fugiat? Dolor iure ipsa minus nostrum sapiente.</p> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus voluptatum harum nulla placeat, hic nesciunt consequuntur laborum officia quos eos et id veritatis quibusdam aliquam exercitationem dolores, reiciendis voluptate modi.</p> 
 
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non voluptas explicabo dolorum at officia deserunt quaerat nam debitis incidunt est, ut pariatur modi ipsa velit laborum, dolorem doloribus dicta consequuntur!</p> 
 
    </div> 
 
</div>

Answer 1

당신은 grid-template-area를 제거하고 div:target이 사용할 수 있습니다 : 값 10이 목록에있는 항목의 예상 수에 따라 달라질 수 있음을

가

grid-row: 1/10; /* span all the rows */ 
grid-column: 2/2; /* second column */ 

참고.

window.location = '#one';

.my-wrap { 
 
    display: grid; 
 
    grid-template-columns: 25% 1fr; 
 
    grid-gap: 0.5rem; 
 
    width: 90%; 
 
    margin: 50px auto; 
 
    color: #fff; 
 
} 
 

 
.wrap-one { 
 
    background-color: tomato; 
 
} 
 

 
.wrap-two { 
 
    background-color: blue; 
 
} 
 

 
.wrap-three { 
 
    background-color: green; 
 
} 
 

 
.button { 
 
    text-decoration: none; 
 
    background-color: #333; 
 
    color: #fff; 
 
    padding: 0.5rem 1rem; 
 
    transition: all 0.25s; 
 
} 
 

 
.button:hover { 
 
    background-color: #000; 
 
} 
 

 
.details { 
 
    display: none; 
 
    border: 1px solid #333; 
 
    color: #333; 
 
} 
 

 
div:target { 
 
    display: block; 
 
    grid-row: 1/10; /* ADDED */ 
 
    grid-column: 2/2; /* ADDED */ 
 
    align-self: flex-start; /* ADDED */ 
 
} 
 

 
p { 
 
    margin: 10px; 
 
}

<div class="my-wrap"> 
 
    <a href="#one" class="wrap-button-one button">Link One</a> 
 
    <div id="one" class="wrap-one one details"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam repudiandae, dolor unde laudantium ducimus explicabo necessitatibus doloribus. Repellendus quasi necessitatibus omnis culpa sint dolore, error sapiente magni sequi, harum eveniet!</p> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio est, deserunt autem laboriosam quis culpa ex animi soluta tenetur quo eius illo necessitatibus. Minima deleniti recusandae commodi? Ipsa, laudantium architecto?</p> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ipsam, necessitatibus excepturi obcaecati quis consequatur autem, eos incidunt, accusantium esse dolorum? Reprehenderit, dicta pariatur a eligendi placeat optio praesentium architecto.</p> 
 
    </div> 
 
    <a href="#two" class="wrap-button-two button">Link Two</a> 
 
    <div id="two" class="wrap-two two details"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p> 
 
    </div> 
 
    <a href="#three" class="wrap-button-three button">Link Three</a> 
 
    <div id="three" class="wrap-three three details"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p> 
 
    </div> 
 
    <a href="#four" class="wrap-button-four button">Link Four</a> 
 
    <div id="four" class="wrap-four four details"> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores debitis ducimus optio magnam ratione voluptatem voluptatum repellendus facilis. Repellat velit facilis reiciendis ratione recusandae delectus iure doloribus inventore, dolorum porro?</p> 
 
    </div> 
 
    <a href="#five" class="wrap-button-five button">Link five</a> 
 
    <div id="five" class="wrap-five five details"> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit nam ab, iusto corrupti quos molestiae tempora sapiente eos unde debitis sint exercitationem aperiam hic inventore veniam, in est labore vitae! Lorem ipsum dolor, sit amet consectetur 
 
     adipisicing elit. Tempora, vel maxime! Autem ullam, quidem, ipsum obcaecati vitae alias, omnis dolores amet doloremque accusamus fugiat? Dolor iure ipsa minus nostrum sapiente.</p> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus voluptatum harum nulla placeat, hic nesciunt consequuntur laborum officia quos eos et id veritatis quibusdam aliquam exercitationem dolores, reiciendis voluptate modi.</p> 
 
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non voluptas explicabo dolorum at officia deserunt quaerat nam debitis incidunt est, ut pariatur modi ipsa velit laborum, dolorem doloribus dicta consequuntur!</p> 
 
    </div> 
 
</div>