网格项未按预期对齐

Question

我试图将item的内容放在中间列中，但它似乎没有移动。

＆＃13;

＆＃13;

.home-grid-container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 0.10fr 0.98fr auto;
  height: 100vh;
}

.home-header {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
  background: #3f51b5;
}

.home-main {
  grid-column: 1 / span 3;
  grid-row: 2 / span 3;
  background: #81d4fa;
}

.item {
  grid-column: 2 / span 1;
  grid-row: 2 / span 3;
}

.home-footer {
  grid-column: 1 / span 3;
  grid-row: 5 / span 1;
  background: #3f51b5;
  div {
    text-align: center;
    margin: 2vh;
  }
}

＆＃13;

<div class="home-grid-container">
  <div class="home-header">
    <h1>
      <img src="/src/imgs/sitelogo.png" />
    </h1>
  </div>
  <div class="home-main">
    <div class="item">
      Simple, Fast, Powerful
      <input type="button" value="100% Free" />
    </div>
  </div>
  <div class="home-footer">
    <div>All Rights Reserved</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

https://css-tricks.com/snippets/css/complete-guide-grid/

Answer 1

您想要居中的元素是网格容器的后代，而不是子元素。

由于网格布局仅在父元素和子元素之间延伸，因此.item元素超出范围且不接受网格属性。

但是这些元素是块容器的内联级子元素，这意味着text-align: center将起作用。

＆＃13;

＆＃13;

.home-grid-container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 0.10fr 0.98fr auto;
  height: 100vh;
}

.home-header {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
  background: #3f51b5;
}

.home-main {
  grid-column: 1 / span 3;
  grid-row: 2 / span 3;
  background: #81d4fa;
}

.item {
  grid-column: 2 / span 1;
  grid-row: 2 / span 3;
  text-align: center;    /* NEW */
}

.home-footer {
  grid-column: 1 / span 3;
  grid-row: 5 / span 1;
  background: #3f51b5;
}

＆＃13;

<div class="home-grid-container">
  <div class="home-header">
    <h1>
      <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    </h1>
  </div>
  <div class="home-main">
    <div class="item">
      Simple, Fast, Powerful
      <input type="button" value="100% Free" />
    </div>
  </div>
  <div class="home-footer">
    <div>All Rights Reserved</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

jsFiddle demo

Answer 2

如果要将网格用于容器的子容器，则始终可以继承相同的属性。

＆＃13;

＆＃13;

.home-grid-container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 0.10fr 0.98fr auto;
  height: 100vh;
}

.home-header {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
  background: #3f51b5;
}

.home-main {
  grid-column: 1 / span 3;
  grid-row: 2 / span 3;
  background: #81d4fa;
  
  /* inherit the container-grid setup */
  display: grid;
  grid-template-columns: inherit;
  grid-template-rows: inherit;
}

.item {
  grid-column: 2 / span 1;
  grid-row: 2 / span 3;
}

.home-footer {
  grid-column: 1 / span 3;
  grid-row: 5 / span 1;
  background: #3f51b5;
  div {
    text-align: center;
    margin: 2vh;
  }
}

＆＃13;

<div class="home-grid-container">
  <div class="home-header">
    <h1>
      <img src="https://dummyimage.com/200x50/cccccc/ffffff.png" />
    </h1>
  </div>
  <div class="home-main">
    <div class="item">
      Simple, Fast, Powerful
      <input type="button" value="100% Free" />
    </div>
  </div>
  <div class="home-footer">
    <div>All Rights Reserved</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

正如其他人所指出的那样，由于item元素不是网格容器的直接子元素 - 您不能将网格属性应用于它。

显然，为了解决这个问题，你可以将物品拉出家庭主体div并使其成为网格的直接孩子 - 但我猜测这不是一个可行的解决方案:)

网格布局模块2级 - Subgrids应该可以解决这个问题。

Subgrid目前只是一个草案规范，但是fwiw，在你的情况下你会做类似的事情：

.home-main {
  display: subgrid;
  grid-column: span 3;
}

然而，实际上有办法解决这个问题：

display: contents （caniuse）

来自Caniuse：

  

display: contents会导致元素的子项显示为好像   是元素父母的直接孩子，忽略了元素   本身。当应该忽略包装元素时，这可能很有用   使用CSS网格或类似的布局技术时。

因此，为了使网格放置属性能够处理该项目，您只需将display: contents;添加到home-main（目前在 Firefox 中工作）

（注意：这显然会使家庭主要的网格属性无用 - 但是再次 - 他们没有必要放置项目）

.home-main {
  display: contents;
  ...
}

＆＃13;

＆＃13;

.home-grid-container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 0.10fr 0.98fr auto;
  height: 100vh;
}

.home-header {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
  background: #3f51b5;
}

.home-main {
  /*grid-column: 1 / span 3;
  grid-row: 2 / span 3; */
  display: contents;
  background: #81d4fa;
}

.item {
  grid-column: 2 / span 1;
  grid-row: 2 / span 3;
  background: salmon;
}

.home-footer {
  grid-column: 1 / span 3;
  grid-row: 5 / span 1;
  background: #3f51b5;
}

.home-footer div {
    text-align: center;
    margin: 2vh;
  }

＆＃13;

<div class="home-grid-container">
  <div class="home-header">
    <h1>
      <img src="/src/imgs/sitelogo.png" />
    </h1>
  </div>
  <div class="home-main">
    <div class="item">
      Simple, Fast, Powerful
      <input type="button" value="100% Free" />
    </div>
  </div>
  <div class="home-footer">
    <div>All Rights Reserved</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;