对齐网格列答案

【问题标题】：Aligning grid columns对齐网格列
【发布时间】：2018-12-29 00:42:49
【问题描述】：

我正在尝试创建博客模板。 section#header 是使用 flexbox 创建的。 section.main 是用 css grid 制作的。

问题在于div.most-read（我已将它的 bg 更改为红色）。我期待它在div.ad 下是 20px(grid-gap)，但是，它出现在预期位置的下方。怎么了？对整体代码改进有什么想法吗？附言由于缺少文字无法发布，所以 Lorem ipsum dolor sit amet, consectetur adipisicing elit。 Molestiae, saepe。

请看下面的代码：

:root {
  --light-dark: #333;
  --dark: #303030;
  --grey: #ccc;
  --main-bg: #ededed;
  --section-bg: #e2e2e2;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Arimo', sans-serif;
}

a {
  text-decoration: none !important;
}

body {
  background-color: var(--main-bg);
}

ul {
  list-style: none;
  display: flex;
}

header {
  width: 80%;
  height: 5em;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav a {
  font-size: 1.5em;
  color: var(--light-dark);
}

.nav li {
  padding-right: 1em;
}

.nav li:last-child {
  padding-right: 0;
}

.tags {
  width: 100%;
  height: 4em;
  background-color: var(--dark);
}

.tags ul {
  width: 80%;
  height: 100%;
  background-color: var(--dark);
  margin: 0 auto;
  padding: 0;
  align-items: center;
}

.tags li {
  padding-right: 10px;
}

.tags a {
  font-size: 1.2em;
  padding: 2px 0;
  color: var(--grey);
}

.tags a:hover {
  transition: .1s;
  border-top: 2px solid var(--grey);
  border-bottom: 2px solid var(--grey);
}

#main {
  width: 80%;
  margin: 1em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

#main>* {
  background-color: var(--section-bg);
}

.latest {
  height: 80em;
  grid-column: 1 /4;
}

.ad {
  height: 25em;
  grid-column: 4 / 5;
}

.most-read {
  height: 55em;
  grid-column: 4 / 5;
  background-color: red !important;
}

<!--Header-->
<section id="header">
  <header>
    <h1>Blog</h1>
    <ul class="nav">
      <li><a href="#">anchor</a></li>
      <li><a href="#">anchor</a></li>
      <li><a href="#">anchor</a></li>
    </ul>
  </header>
  <div class="tags">
    <ul>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
    </ul>
  </div>
</section>
<!--Main-->
<section id="main">
  <div class="latest">
  </div>
  <div class="ad"></div>
  <div class="most-read"></div>
</section>

【问题讨论】：

标签： html css css-grid

【解决方案1】：

网格是逐行和逐列绘制的，为了让.most-read 向上爬，您实际上需要.latest 跨越至少 2 行以包含 2 个元素旁边（2 行）。

您可以添加： grid-row: 1 / span 2; 或 grid-row: auto / span 2; 到 .latest

:root{
  --light-dark:#333;
  --dark: #303030;
  --grey: #ccc;
  --main-bg: #ededed;
  --section-bg: #e2e2e2;
}
*{
  margin: 0;
  padding: 0;
  font-family: 'Arimo', sans-serif;
}
a{
  text-decoration: none !important;
}
body{
  background-color: var(--main-bg);
}
ul{
  list-style: none;
  display: flex;
}
header{
  width: 80%;
  height: 5em;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav a{
  font-size: 1.5em;
  color: var(--light-dark);
}
.nav li{
    padding-right: 1em;
}
.nav li:last-child{
  padding-right: 0;
}
.tags{
  width: 100%;
  height: 4em;
  background-color: var(--dark);
}
.tags ul{
  width: 80%;
  height: 100%;
  background-color: var(--dark);
  margin: 0 auto;
  padding: 0;
  align-items: center;
}
.tags li{
  padding-right: 10px;
}
.tags a{
  font-size: 1.2em;
  padding: 2px 0;
  color: var(--grey);
}
.tags a:hover{
  transition: .1s;
  border-top: 2px solid var(--grey);
  border-bottom: 2px solid var(--grey);
}
#main{
  width: 80%;
  margin: 1em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}
#main > *{
  background-color: var(--section-bg);
}
.latest{
  height: 80em;
  grid-column: 1 /4;
  grid-row: 1 / span 2;
}
.ad{
  height: 25em;
  grid-column: 4 / 5;
}
.most-read{
  height: 55em;
  grid-column: 4 / 5;
  background-color: red !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--CSS-->
  <link rel="stylesheet" href="/style.css">
  <!--Google Fonts-->
  <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
  <title>Document</title>
</head>
<body>
  <!--Header-->
  <section id="header">
    <header>
      <h1>Blog</h1>
      <ul class="nav">
        <li><a href="#">anchor</a></li>
        <li><a href="#">anchor</a></li>
        <li><a href="#">anchor</a></li>
      </ul>
    </header>
  <div class="tags">
    <ul>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
    </ul>
  </div>
</section>
<!--Main-->
<section id="main">
  <div class="latest">
  </div>
  <div class="ad"></div>
  <div class="most-read"></div>
</section>
</body>
</html>

关于网格的简单提醒https://css-tricks.com/snippets/css/complete-guide-grid/

【讨论】：

效果很好，但我发现grid-template-areas 也可以，而且我更容易理解。使用网格模板区域是一种不好的做法吗？
@patlatka 一点也不，最重要的是以最有效的方式使用事物，假设我的答案确实不是：如果您使用的是@987654330，那么这里的方法就是 grid-area @

【解决方案2】：

您忽略了 CSS Grid 的一大优势：可以在容器级别定义网格项的宽度和高度。您不需要在项目级别设置高度（例如使用 flexbox）。

您的最高项目设置为 80em。在另一列中，一项设置为 25em，另一项设置为 55em。

所以创建一个 20 行，每行 5em 高的网格。然后设置您的网格区域。

看起来像这样：

（使用Firefox overlay tool进行可视化。）

这是调整后的 CSS：

#main {
  width: 80%;
  margin: 1em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(20, 5em); /* new */
  grid-gap: 20px;
}
.latest {
  /* height: 80em; */
  grid-row: 1 / 21;      /* new */
  grid-column: 1 / 4;
}
.ad{
  /* height: 25em; */
  grid-row: 1 / 6;       /* new */
  grid-column: 4 / 5;
}
.most-read{
  /* height: 55em; */
  grid-row: 6 / 21;      /* new */
  grid-column: 4 / 5;
  background-color: red !important;
}

jsFiddle demo

:root{
  --light-dark:#333;
  --dark: #303030;
  --grey: #ccc;
  --main-bg: #ededed;
  --section-bg: #e2e2e2;
}
*{
  margin: 0;
  padding: 0;
  font-family: 'Arimo', sans-serif;
}
a{
  text-decoration: none !important;
}
body{
  background-color: var(--main-bg);
}
ul{
  list-style: none;
  display: flex;
}
header{
  width: 80%;
  height: 5em;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav a{
  font-size: 1.5em;
  color: var(--light-dark);
}
.nav li{
    padding-right: 1em;
}
.nav li:last-child{
  padding-right: 0;
}
.tags{
  width: 100%;
  height: 4em;
  background-color: var(--dark);
}
.tags ul{
  width: 80%;
  height: 100%;
  background-color: var(--dark);
  margin: 0 auto;
  padding: 0;
  align-items: center;
}
.tags li{
  padding-right: 10px;
}
.tags a{
  font-size: 1.2em;
  padding: 2px 0;
  color: var(--grey);
}
.tags a:hover{
  transition: .1s;
  border-top: 2px solid var(--grey);
  border-bottom: 2px solid var(--grey);
}
#main{
  width: 80%;
  margin: 1em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(20, 5em); /* new */
  grid-gap: 20px;
}
#main > * {
  background-color: var(--section-bg);
}
.latest {
  /* height: 80em; */
  grid-row: 1 / 21;
  grid-column: 1 / 4;
}
.ad{
  /* height: 25em; */
  grid-row: 1 / 6;
  grid-column: 4 / 5;
}
.most-read{
  /* height: 55em; */
  grid-row: 6 / 21;
  grid-column: 4 / 5;
  background-color: red !important;
}

<section id="header">
    <header>
      <h1>Blog</h1>
      <ul class="nav">
        <li><a href="#">anchor</a></li>
        <li><a href="#">anchor</a></li>
        <li><a href="#">anchor</a></li>
      </ul>
    </header>
  <div class="tags">
    <ul>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
    </ul>
  </div>
</section>
<!--Main-->
<section id="main">
  <div class="latest">
  </div>
  <div class="ad"></div>
  <div class="most-read"></div>
</section>

【讨论】：

这样做的真正好处是什么？
集中控制。更容易维护。更高的精度和灵活性。可能会有更多好处，尤其是在处理大量项目时。