Question

蓝色嵌套块位于div（.card-container）内，描述了：

＆＃13;

body {
  margin: 0; }

header, footer, .slideshow, .card-container {
  background-color: gray;
  border: solid 1px black;
  text-align: center;
  border-radius: 10px; }

.card {
  border: solid 3px red;
  border-radius: 10px;
  margin: 10px;
  background-color: #4286f4;
  height: 450px; }

.card-container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, 340px);
  grid-auto-columns: 450px;
  grid-auto-rows: 450px;
  justify-content: center; }

header {
  grid-area: header; }

.slideshow {
  grid-area: slideshow; }

.card-container {
  grid-area: card-container; }

footer {
  grid-area: footer; }

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-areas: "header" "slideshow" "card-container" "footer";
  grid-auto-rows: auto; }

/*# sourceMappingURL=style-main-grid.css.map */

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>grid-main</title>
    <link rel="stylesheet" href="style-main-grid.css">
  </head>
  <body>
    <div class="grid">
      <header>
        Header
      </header>
      <div class="slideshow">
        Slideshow
      </div>
      <div class="card-container">
        <div class="card">
          <h2>.card</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="card">
          <h2>.card</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="card">
          <h2>.card</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="card">
          <h2>.card</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="card">
          <h2>.card</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="card">
          <h2>.card</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>

      <footer>
        Footer
      </footer>

    </div>
  </body>
</html>

＆＃13;

.card-container的高度是常数，并确定.card的总和。如何根据嵌套块的当前列调整.card-container的高度。

Answer 1

为什么你不这样做：

.card-container {
    grid-area: card-container;
    float: left;
    width: 100%;
    display: block;
}

Answer 2

从height删除.card媒体资源。你强迫一定的规模，以便它有多大。

css网格布局中的嵌套块

2 个答案: