grid-column 不起作用？

Question

我有这个标记

<main>
<section class="download">
  <img src="media/icon.svg" alt="TOX chat icon" width="345" height="280">
  <div class="download_desc">
    <h1>A New Kind of Instant Messaging</h1>
    <p>
      Whether it's corporations or governments, digital surveillance today is widespread. Tox is easy-to-use software that connects
      you with friends and family without anyone else listening in. While other big-name services require you to pay
      for features, Tox is completely free and comes without advertising — forever.
    </p>
  </div>
</section>

和CSS应用：

    main {
  display: grid;
  grid-template-rows: 750px 500px 815px 815px 180px;
  grid-template-columns: repeat(6, 1fr);
}

.download {
  background-color: #414141;
  color: white;
}

.download_desc {
  grid-column: 2/6;
}

出于某种原因，grid-column 在这种情况下根本不起作用。 div 和 download_desc class 仍然在第一列，而不是我想要的从第 2 到第 6。

如果我将它直接应用于 .download class，它会起作用，但它不适用于 children。

为什么？

Answer 1

您的问题是您的网格是 'main' 元素，而 'download_desc' 在 'download' 部分标记内。

尝试移动：

display: grid;
grid-template-rows: 750px 500px 815px 815px 180px;
grid-template-columns: repeat(6, 1fr);

到'download'class。

Answer 2

您在 main 中应用了 grid css，这意味着 .download 是一个网格项...意味着在 [=16] 中应用了 grid-column =] 什么都不做...没用....grid-column 属性用于 grid-item 而不是 grid-item.

的内部元素

将 grid css 应用于 .download，这将生成 <img> 和 download_desc 网格项。

堆栈片段

.download {
  display: grid;
  grid-template-rows: 750px 500px 815px 815px 180px;
  grid-template-columns: repeat(6, 1fr);
}

.download {
  background-color: #414141;
  color: white;
}

.download_desc {
  grid-column: 2 / span 5;
}

<main>
  <section class="download">
    <img src="http://via.placeholder.com/350x150" alt="TOX chat icon">
    <div class="download_desc">
      <h1>A New Kind of Instant Messaging</h1>
      <p>
        Whether it's corporations or governments, digital surveillance today is widespread. Tox is easy-to-use software that connects you with friends and family without anyone else listening in. While other big-name services require you to pay for features,
        Tox is completely free and comes without advertising — forever.
      </p>
    </div>
  </section>
</main>

grid-column 不起作用？

grid-column doesn't work?

css

css-grid