改變內容數量的網格佈局自動高度

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使用：

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

注意，值10將取決於列表中的項目的預期數量。請參見下面的演示：

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>