网格列不起作用？ [复制]答案

【问题标题】：grid-column doesn't work? [duplicate]网格列不起作用？ [复制]
【发布时间】：2018-07-19 02:01:30
【问题描述】：

我有这个标记

<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 类仍然在第一列，而不是我想要的从第 2 到第 6。

如果我将它直接应用到 .download 类，它会起作用，但它不是子类。

为什么？

【问题讨论】：

注意：我目前正在尝试复制TOX聊天主页（tox.chat）进行练习，所以不要介意内容。这一切都归功于他们。
“不起作用”不是一个技术术语。什么不起作用？而且，在您的标题中，您为什么要问我们它是否有效？
@Rob 它没有做它必须做的事情。在这种情况下，“download_desc”类的 div 不会放在网格的第 2 到第 6 列。这一切都还在第一个。
将这些信息放在您的问题中，而不是在 cmets 中，但“不做它必须做的事情”与“不工作”一样糟糕。

标签： css css-grid

【解决方案1】：

您在main 中应用了grid css，这意味着.download 是一个网格项...意味着在download_desc 中应用grid-column 将无济于事...无用...@987654326 @ 属性适用于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>

【讨论】：

【解决方案2】：

您的问题是您的网格是“主”元素，而“download_desc”在“下载”部分标签内。

尝试移动：

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

到“下载”类。

【讨论】：

这是否意味着，如果我想在整个页面中使用网格，我必须将display: grid 应用于每个部分？
您可以将页面排列成网格和子网格。对于要在网格中定位的元素，其父元素必须是网格。
例如，您可以使用网格对部分进行布局，然后在部分中创建子网格以对齐其内容。