css网格项目定位

Question

我正在学习CSS网格并试图了解它是如何工作的。我已经像这样定义了网格模板区域：

grid-template-areas:
  "header header"
  "about contact"
  "latest status";
grid-template-columns: 70% 30%;

如何设置网格模板行值以填充空格？

Answer 1

您需要使区域跨越多行和多列，以使此工作有效。网格不允许对象仅向上流动（除非您将要使用javascript），但是使用您要使用的静态布局，此解决方案应该很好：

* {
  box-sizing: border-box;
}

body {
  margin: 20px;
 }

.grid {
  display: grid;
  grid-template-areas:
    "header header"
    "about contact"
    "about status"
    "latest status";
  grid-template-columns: 70% 30%;
  grid-template-rows: 200px auto auto 200px;
  grid-gap: 20px;
}

.grid > div:not(.status) {
  background-color: #DDD;
  padding: 20px;
}

.header {
  grid-area: header;
}

.about {
  grid-area: about;
}

.contact {
  grid-area: contact;
}

.latest {
  grid-area: latest;
}

.status {
  grid-area: status;
}

.status-box {
  background-color: #DDD;
  padding: 20px;
}

h3 {
  margin: 0;
}

<div class="grid">
  <div class="header"><h3>header<h3></div>
  <div class="about"><h3>about</h3><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in vulputate eros, vitae rhoncus odio. Nunc a justo eget odio aliquam hendrerit. Duis tristique, tellus nec cursus semper, risus turpis pretium mauris, ac venenatis elit massa vel ante. Etiam laoreet quam non nisl imperdiet ultricies. Donec vel suscipit erat. Phasellus id cursus ante. Sed lacinia, nisl in tincidunt molestie, nunc tortor scelerisque magna, sed imperdiet odio nunc in est.</div>
  <div class="contact">
    <h3>contact</h3><br>
    location<br>
    email<br>
    phone number<br>
   </div>
  <div class="latest"><h3>latest</h3></div>
  <div class="status">
    <div class="status-box">
      <h3>status</h3><br>
      current job<br>
      open for consultation
    </div>
  </div>
</div>

有两点需要注意：

（1）.about跨越两行，两行均为高度auto。这允许右列中可能较小的块共享大约部分的高度。如果出于某种原因.contact比.about高，则此布局开始显得有些螺丝钉。因此，我将默认高度应用于.about，以防止这种情况发生。

（2）.status看起来很高兴地漂浮到contact的底部。 .status实际上需要跨越.about和.latest行，因为.contact和.status的组合高度很有可能大于{{1} }。因此，为了防止.about看起来过高，我只是将“真实的” .status块嵌套了一层，以改变块的视觉尺寸，即使网格的高度已经拉长了到达.status底部的方式。

希望这会有所帮助。

Answer 2

我认为您不能使用CSS Grid来完成所需的工作。 在CSS Grid中，您必须想到的是具有行和列。一行可以具有不同高度内容的单元格，但该行将具有其最大单元格的高度。这就是为什么您的“状态”开始低于“联系”内容的结束的原因。

也许对于您想做的事，使用两列将是一个更好的主意。