Grid-Column Doesn't Work

grid-column doesn't work?

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.

CSS : grid-column and grid-row doesn't work

Okay, i have resolved my issue : if you look at my HTML, i use the class = 'AllScores' in the first div.
The issue was that then i have a form and then i was using my other div with the "element" of the grid.

What i mean is that, from what've learned, when you want to use a grid and then specify those column/row properties in a "sub grid class", this sub grid must be call directly in the grid container.

In my case i had :

<div class='AllScores'>
    <form>
        <div class='AllScores_text'>
            ...
        </div>
        <div class='AllScores_inputs'>
            ...
        </div>
    </form>
</div>

And so as the class of the sub grid (AllScores_inputs and AllScores_text) where inside the form, that is itself inside the .

I needed to have the call of class='AllScores_inputs' just under the call of class = AllScores.

So those 2 options work : putting the class='AllScores' in the form :

<div>
    <form class='AllScores'>
        <div class='AllScores_text'>
            ...
        </div>
        <div class='AllScores_inputs'>
            ...
        </div>
    </form>
</div>

or switching the form and the div :

<form>
    <div class='AllScores'>
        <div class='AllScores_text'>
            ...
        </div>
        <div class='AllScores_inputs'>
            ...
        </div>
    </div>
</form>

why my nest grid-template-column not working? HTML CSS

In your css you used the wrong selector.
In your html the class is .about___link but you have used .about__link as css selector.
I changed it and it works but try to use a cleaner html and selectors wich are more readable :)

.about__container {
    display: grid;
    position: relative;
    grid-template-columns: repeat(2, 1fr);
    height: 100vh;
    width: 100%;
    background-color:green;
    grid-gap: 30px;
}

.about___link{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    background-color: red;
    grid-gap: 30px;
}

<div class="about__container container-fluid grid">
                <div class="about__content">
                  <p class="link-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim!</p>
                </div>

                <div class="about___link container grid">
                    <div class="item link__youtube">
                        <p class="link-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim!</p>
                    </div>
                    <div class="item link__article">
                        <p class="link-detail">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum,
                            tempore!</p>
                    </div>
                    <div class="item link__addfriend">
                        <p class="link-detail">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis, quia?
                        </p>
                    </div>
                    <div class="item link__achievement">
                        <p class="link-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, amet!
                        </p>
                    </div>
                </div>
            </div>

Why does grid-column: span 2/3 does not work, but span 2/4 works?

From what I read, span 2/3 should be invalid, and not work

No it's valid and it's working fine.

span 2/3 means end at grid line 3 (and not column 3) and span 2 columns back. Same logic for span 2/4. It's the shorthand of:

grid-column-start: span 2;
grid-column-end: 3;

So in both cases your element will take exactly 2 columns and only the ending line with be different.

Worth to note that in your case you defined a 2 columns layout so you have 3 lines (from 1 to 3). The span 2/4 will force the creation of an extra implicit column to have a total of 3 columns and 4 lines. A third column having an auto width like you can notice.

Without the keyword span it would be a different story and still you cannot consider columns

2/4 means start at line 2 and end at line 4 (covering column 2 and column 3)

2/3 means start at line 2 and end at line 3 (covering only column 2)

Related questions if your are missing the concept of lines:

CSS Grids: Relation between grid gaps(gutters) and grid lines

Understanding grid negative values

css grid-column span doesn't work well with auto-fit or auto-fill

You need to add a media query to remove the span 2 which is forcing your grid to always have 2 columns with the second one empty

.grid {
  gap: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.box,
.special-box {
  height: 200px;
}

.box:nth-child(even) {
  background-color: pink;

}

.box:nth-child(odd) {
  background-color: orange;

}

.special-box {
  background-color: purple;
}

@media (min-width:650px) {
  .special-box {
   grid-column: span 2;
  }
}

<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
 <div class="special-box"></div>
</div>

Implicit grid-area doesn't work as expected

This isn't a completely different approach, but you could use grid-column and not use grid-template-areas entirely. This solution also uses grid-template-columns.

.parent { 
  display: grid;
  grid-gap: 3px;
  /* Defines two columns */
  grid-template-columns: 1fr 1fr;
}

.parent > div {
  /* Visibility and styling */
  background-color: black;
  color: white;
  padding: 1rem;
  text-align: center;
  font-family: sans-serif;
}

.third, .fourth {
  /* Sets the column that the item should span */
  grid-column: 1 / -1;
}

<div class="parent">
  <div class="first">1</div>
  <div class="second">2</div>
  <div class="third">3</div>
  <div class="fourth">4</div>
</div>

grid-template-columns is not working

You have used grid-template-columns and grid-template-rows properties on the child of the grid. These properties are used with display: grid on the container.

For direct child elements of the grid, use grid-column and grid-row.

.exclusive-content {  display: grid;  grid: 270px 270px / repeat(4, 270px);  justify-content: center;  grid-gap: 30px;  margin-top: 120px;}
.exclusive-content img {  background-size: cover;  background-position: center;}
.exclusive-content a:first-child {  width: 540px;  height: 540px;  grid-column: 1 / 3;  grid-row: 1 / 3}
.exclusive-content a:nth-child(2) {  grid-template-columns: 3;}

<div class="exclusive-content">  <a href="#"><img src="http://anti-naruto.ru/img/product-1-lg.jpg" alt="1"></a>  <a href="#"><img src="http://anti-naruto.ru/img/product-2-sm.jpg" alt="2"></a>  <a href="#"><img src="http://anti-naruto.ru/img/product-3-sm.jpg" alt="3"></a>  <a href="#"><img src="http://anti-naruto.ru/img/product-4-sm.jpg" alt="4"></a>  <a href="#"><img src="http://anti-naruto.ru/img/product-5-sm.jpg" alt="5"></a></div>

CSS Grid not fitting all columns

This usually happens when your source order doesn't match your visual / grid order.

Adding

.grid-parent { grid-auto-flow: column dense; }

should fix the problem.

See this example:

ul {
  display: grid;
  list-style-type: none;
  grid-gap: 10px;
  height: 200px;
  padding: 0;
}

li {
  margin: 0;
  border: 5px dashed #999;
  display: block;
  text-align: center;
  line-height: 170px;
  font-family: roboto, sans-serif;
  font-size: 80px;
  color: #999;
}

.dense {
  grid-auto-flow: column dense;
}

<ul id="sample">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li style="grid-column-start: 5;">5</li>
  <li style="grid-column-start: 4;">4</li>
</ul>

<button type="button" onclick="sample.classList.toggle('dense')">Toggle grid-auto-flow: column dense</button>

My css grid layout doesn't fill its container on chrome. What's causing the loss of a fraction of a pixel?

It seems that this is a rounding error in chrome. It is possible to recreate the problem with any layout which creates a recurring number sub-pixel fraction for column widths (like 3 or 12 column layouts with 980px), whereas numbers of columns which divide the width easily like 5 or 10 work without issues. The same issues can be caused by grid-column-gap numbers which don't divide nicely.

The simplest fix is to make sure the layout pixel width divides neatly into 12 (6 and 3 work too actually, since chrome can handle one or two decimal places)

body {
  width: 984px;
  background: #99c;
  margin: 0 auto;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 18px;
  background: white;
}

.content-wrap {
  grid-column: span 12;
  width: 100%
}

<div class="row">
  <div class="content-wrap">
    <p>Example paragraph which is fits the full width of the row it's within</p>
  </div>
</div>

Grid-Column Doesn't Work