css - 网格列不起作用？

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;
}

由于某种原因，网格列在这种情况下根本不起作用。 div与 download_desc类(class)仍然在第一列，而不是我想要的从第二列到第六列。

如果我直接将其应用到.download，它就会起作用。类(class)，但不是 child 。

为什么？

Answer 1

您的问题是您的网格是“main”元素，而“download_desc”位于“download”部分标记内。

尝试移动:

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

到“下载”类。