用于更改内容数量的网格布局自动高度

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>

用于更改内容数量的网格布局自动高度

Grid layout auto height for changing number of contents

html

css

css-grid