Question

我是网格新手，但是“网格行”问题不起作用，应该怎么办？我的“内容” div似乎没有覆盖我设置行的位置，并且没有一直向下延伸。如果我删除-1并将其设置为13的最后一行，它下面仍有空格？！

我还需要获得每节的身高吗？那么.header和.main是否需要固定高度？

这是一个CodePen：https://codepen.io/anon/pen/Zdjvmd?editors=1100

.header {
  background-color: pink;
}

.main {
  background-color: pink;
  height: 250px;
}


.grid {
  min-width: 1280px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-row: repeat(12, 1fr);
  grid-gap: 1em;
}

.header-logo {
  background-color: hotpink;
  grid-column: 2 / 8;
}

.header-navigation {
  background-color: hotpink;
  grid-column: 8 / -1;
  grid-row: 2 / 13;
}

.sidebar{
  background-color: hotpink;
  grid-column: 2 / 4;
}

.content {
  background-color: red;
  grid-column: 4 / -1;
  grid-row: 4 / -1; /* <-- This is my issue */
}

<header class="header">
  <div class="grid">
    <div class="header-logo">Logo</div>
    <div class="header-navigation">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Products</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </div>
  </div>
</header>

<main class="main">
  <section class="section">
    <div class="grid">
      <div class="sidebar">
        Sidebar
      </div>
      <div class="content">
        <p>Content here</p>
        <p>Content here</p>
        <p>Content here</p>
      </div>
    </div>
  </section>
</main>

Answer 1

我认为您可能会遇到问题，因为您使用的是两个单独的网格，例如他们彼此不认识。不确定以下内容在您的情况下是否有用，但是我个人想使用grid-template-areas属性比尝试使用grid-column或grid-row控制网格要好得多，因为这样很容易对网格的布局有所了解。似乎有些重复，但是grid-template-areas属性要求您指定每列（您可以使用.而不是区域名称来包含空单元格！），因此我们有12列另一方面，您可能会注意到=）...，您可能会注意到：所需的标记更加简洁，css也是如此。

.grid {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
	"l l n n n n n n n n n n"
	"s s s s m m m m m m m m";
}

.main.grid {
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
	"ml ml mr mr mr mr"
	"mb mb mb mb mb mb";
}

.header-logo {
  background-color: pink;
  grid-area: l;
}

.header-navigation {
  background-color: coral;
  grid-area: n;
}

.header-navigation-list {
  background: tomato;
  display: flex;
  list-style: none;
  padding: 0; margin: 0;
}
  .header-navigation-list a {
    padding: 0 0.5em 0 0.5em;
  }

.sidebar {
  background-color: hotpink;
  grid-area: s;
}

.main {
  background-color: red;
  grid-area: m;
}
.main-right {
  background: teal;
  grid-area: mr;
}
.main-left {
  background: lightseagreen;
  grid-area: ml;
}
.main-bottom {
  background: gold;
  grid-area: mb;
}

<div class="grid">
  <div class="header-logo">Logo</div>
  <nav class="header-navigation">
    <ul class="header-navigation-list">
      <li><a href="">Home</a></li>
      <li><a href="">Products</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>

  <aside class="sidebar">
    Sidebar
  </aside>

  <main class="main grid">
    <div class="main-left">
      <p>Content left here</p>
    </div>
    <div class="main-right">
      <p>Content right here</p>
    </div>
    <div class="main-bottom">
      <p>Content bottom here</p>
    </div>
  </main>
<div>

编辑：修改示例以显示嵌套的网格，并删除了最大宽度宽度控件，因为它引起混乱=）

CSS网格行不动？

1 个答案: