网格列 B 项从网格列 A 项的最后一行开始答案

【问题标题】：Grid column B items start on the last row of grid column A items网格列 B 项从网格列 A 项的最后一行开始
【发布时间】：2021-01-20 12:30:06
【问题描述】：

所以我创建了一个两列的网格，使左边的项目与右边的项目对齐，并编写了以下代码：

article {
  display: grid;
  grid-template-areas:
        'reading wt'
        'reading wt'
        'reading wt'
        'reading wt'
        'reading wt'
        'reading wt';
}

文章包含 12 个 div 元素，前六个有这个 css：

.reading {
  grid-column: reading;
}

对于最后六个，grid-column 设置为 wt。

问题是，结果看起来不像我预期的那样：the items of the wt column start on the sixth row and keep going down, extending the grid.

将 grid-row 设置为 1 / 6 可以预见地使它们都位于第一行。我猜你可以为每个 div 写一个单独的规则来明确告诉它应该放在哪里，但必须有更好的解决方案，对吧？

JSFiddle

【问题讨论】：

请添加一个 sn-p 或 fiddle 链接以及您的问题的工作示例，以便我们更好地帮助您
试试这个grid-template-rows: auto;和/或grid-template-columns: 50% 50%;
@Kyojimaru 完成
@RaRaRitalin 不幸没有工作

标签： css

【解决方案1】：

这是因为您将模板设置为reading wt，但是您的结构首先显示reading 6 次，然后是所有翻译后跟

你需要改变你的结构以跟随你的template-area，即reading wt，所以你的div应该像这样改变

body,
html {
  margin: 0;
  font-size: 5px;
  font-family: sans-serif;
  background-image: url('../test-bg.jpg');
}

p {
  margin: 0;
  padding: 0;
}

.back {
  position: absolute;
  top: 0;
  padding: 2rem 0 2rem 0;
  display: grid;
  grid-template-columns: 29rem 56rem;
  grid-template-rows: 23rem 6rem;
  grid-template-areas: 'header article' 'header footer';
  grid-gap: 0;
  background-color: white;
  border-radius: 2rem;
}

header {
  grid-area: header;
  display: grid;
  grid-template-rows: 22rem 6rem;
  grid-row-gap: 0.5rem;
  padding: 0.5rem 0 0 3rem;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.upper-border {
  border-right: 0.5rem black solid;
  display: flex;
  flex-flow: column;
}

.upper-border .kunyomi {
  font-size: 5rem;
}

.upper-border h1 {
  margin: 0;
  font-weight: normal;
  font-size: 4rem;
  margin-bottom: 3rem;
}

.onyomi {
  border-right: .5rem #c4c4c4 solid;
  font-size: 5rem;
  line-height: 5rem;
  column-count: 2;
  column-gap: 2.3rem;
  column-rule: .3rem black solid;
  padding: 0 1rem;
}

article {
  padding: 0 6rem 0 2rem;
  font-size: 3rem;
  display: grid;
  grid-template-areas: 'reading wt';
}

.reading {
  grid-column: reading;
}

.word-translation {
  grid-column: wt;
}

footer {
  display: flex;
  line-height: 6rem;
  font-size: 2rem;
  padding: 0 14.5rem 0 2rem;
  align-items: center;
}

<!DOCTYPE html>
<html>

<head>
  <title>Kanji back</title>
  <meta charset='utf-8'>
  <link rel='stylesheet' href='kanji-back.css'>
</head>

<body>
  <div class='back'>
    <header>
      <div class='upper-border'>
        <p class='kunyomi'>つき</p>
        <h1>moon, flesh</h1>
      </div>
      <div class='onyomi'>
        <p>ガツ</p>
        <p>ゲツ</p>
      </div>
    </header>
    <article>
      <div class='reading'>しがつ</div>
      <div class='word-translation'>April</div>
      <div class='reading'>よんかげつ</div>
      <div class='word-translation'>four months</div>
      <div class='reading'>こんげつ</div>
      <div class='word-translation'>this month</div>
      <div class='reading'>げっすいきん</div>
      <div class='word-translation'>Mon, Wed, Fri</div>
      <div class='reading'>せんげつ</div>
      <div class='word-translation'>last month</div>
      <div class='reading'>つきので</div>
      <div class='word-translation'>moonrise</div>
    </article>
    <footer>
      <div class='footnote'>Oracle bone script glyph</div>
      <svg class='historical' viewbox='0 0 230 230' xmlns="http://www.w3.org/2000/svg" height="4rem" width="4rem"><path d="M97.598489 279.86984c18.470591-12.05575 34.869881-28.99451 45.735361-43.74757l-.23979-172.196944c-12.75611-13.741368-39.2702-38.56405-36.16076-48.075754 1.61246-4.932486 26.56669 12.561429 41.73246 27.983663 28.32037 30.808336 54.3638 59.724885 54.46678 101.960485.0799 32.77286-7.64686 53.08722-24.79786 75.88713-19.27645 25.62541-35.68315 42.25953-59.35493 56.99981-8.54389 5.32024-10.93345 5.68329-16.1172 6.28719-3.671224.4277-7.672204-3.52621-5.264061-5.09801zm86.695241-125.71177c3.71219-28.69758-6.78039-48.12146-24.62215-71.000623l2.89844 127.626043c10.47269-17.56216 19.39959-38.65853 21.72371-56.62542z"/></svg>
    </footer>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

这是您可以修复它的一种方法。我将 2 篇文章包装在一个容器中，并将容器设置为 display: grid，然后简单地将每篇文章分配给一个网格列。

.container {
  display: grid;
}
article.left {
  grid-column:1;
}
article.right {
  grid-column:2;
}

  <div class="container">
    <article class="left">
        <div>left</div>
        <div>left2</div>
        <div>left3</div>
        <div>left4</div>
        <div>left5</div>
        <div>left6</div>
    </article>
    <article class="right">
        <div>right</div>
        <div>right2</div>
        <div>right3</div>
        <div>right4</div>
        <div>right5</div>
        <div>right6</div>
    </article>
</div>

【讨论】：