grid-column doesn't work?

Question

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?

Note: i'm currently trying to copy homepage of TOX chat (tox.chat) for practice, so don't mind the content. All credit for that goes to them. — , Feb 08 '18 at 13:23
"Doesn't work" is not a technical term. What doesn't work? And, in your title, why are you asking us if it works or not? — Rob, Feb 08 '18 at 13:24
@Rob it doesn't do what it has to. In this case, div with class "download_desc" is not placed from 2nd to 6th column of the grid. It's all still in the first one. — , Feb 08 '18 at 13:26
Put that information in your question, not here in the comments, but "doesn't do what it has to" is just as bad as "doesn't work". — Rob, Feb 08 '18 at 13:28

score 1 · Accepted Answer · answered Feb 08 '18 at 13:47

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.

answered Feb 08 '18 at 13:47

C Prince

136
1
10

Does that mean, that if i want to use grid through all of the page, i have to apply `display: grid` to each section? – Feb 08 '18 at 13:49
1

You can arrange your page into grids and sub-grids. For an element to be positioned within a grid its parent must be a grid. – C Prince Feb 08 '18 at 13:53
You could for example layout your sections using grids and then create sub-grids in the sections to align their content. – C Prince Feb 08 '18 at 13:53

score 1 · Answer 2 · answered Feb 08 '18 at 13:52

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>

grid-column doesn't work?

2 Answers2

Linked