grid-column doesn't work? [duplicate]

问题

I have this markup

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

and CSS applied:

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

For some reason, grid-column at this case doesn't work at all. div with download_desc class is still in the first column, not from 2nd to 6th as I wanted.

It works if i apply it directly to the .download class, but not it's children.

Why?

回答1:

Your problem is that your grid is the 'main' element and 'download_desc' is within the 'download' section tag.

Try moving:

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

to the 'download' class.

回答2:

You have applied grid css in the main which means .download is a grid item...means applying grid-column in download_desc will do nothing...it useless....grid-column property is for the grid-item not for the inner elements of grid-item.

Apply grid css to the .download which will make the <img> and the download_desc grid item.

Stack Snippet

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

来源：https://stackoverflow.com/questions/48686526/grid-column-doesnt-work

标签

css

css-grid