Question

如果我在2列布局中使用以下HTML，如何使用CSS Grid将它们彼此对齐？

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 1.25em;
}

aside {
  grid-column: 1;
  grid-row: 1;
  text-align: left;
}

article {
  grid-column: 1;
  grid-row: 2;
  text-align: left;
}

<article class="content">
  <h2>{{ page.title }}</h2>
  <p>{{ content }}</p>
</article>

<aside class="sidebar">
  <h3>{{ page.date | date: '%B %-d, %Y' }}</h3>
  <p>{{ page.tags | array_to_sentence_string }}</p>
</aside>

Answer 1

第一个问题是你使用网格定义了一个类，但是后来却没有在你的HTML中使用它，但这可能只是你MCVE中的一个错字。

第二个问题是，如果要在grid-template-columns中设置宽度，则需要为每列提供宽度，使用重复或两者的混合。您尝试使用两列但只指定了一列的宽度。

第三个问题是您对这两个元素都使用了grid-column: 1;。根据{{3}}：

网格列CSS属性是MDN web docs和grid-column-start的简写属性，通过提供内容在网格行中指定网格项的大小和位置* 一条线，一个跨度或任何（自动）到它的网格放置，从而指定其网格区域的内联开始和内联结束边缘。

^{*强调添加}

通过将它们都设置为1，您可以将它们放在同一列中。在下面的代码段中，我将网格模板更改为1fr，重复次数为2，并将aside设置为第二列而不是第一列。

＆＃13;

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 1.25em;
}

aside {
  grid-column: 2;
  text-align: left;
}

article {
  grid-column: 1;
  text-align: left;
}

＆＃13;

<main class="grid">

  <article class="content">
    <h2>{{ page.title }}</h2>
    <p>{{ content }}</p>
  </article>

  <aside class="sidebar">
    <h3>{{ page.date | date: '%B %-d, %Y' }}</h3>
    <p>{{ page.tags | array_to_sentence_string }}</p>
  </aside>

</main>

＆＃13;

并排排列CSS列

1 个答案: