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仍在第一列，而不是我想要的第二列到第六列。

如果我直接将它应用于.download课程，但不是它的孩子，那么它是有效的。

为什么？

Answer 1

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

尝试移动：

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

到'下载'课程。

Answer 2

您已在grid中应用了main css，这意味着.download是一个网格项...意味着在grid-column中应用download_desc将无能为力。 ..无用的.... grid-column属性适用于grid-item，不属于grid-item的内部元素。

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

Stack Snippet

＆＃13;

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

＆＃13;

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

＆＃13;

网格列不起作用？

2 个答案: