Row gap is filling background color with first column

Question

I have started learning CSS Grid today and I have a doubt. When using gap property the second row is displaying the gaps perfectly but first row's gap are filled with the first column background color. I don't understand why.

div {
  height: 50px;
  text-align: center;
  font-weight: 600;
}

div:nth-child(1) {
  background-color: blueviolet;
}
div:nth-child(2) {
  background-color: coral;
}
div:nth-child(3) {
  background-color: darkgoldenrod;
}
div:nth-child(4) {
  background-color: darksalmon;
}
div:nth-child(5) {
  background-color: deeppink;
}
div:nth-child(6) {
  background-color: gold;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexbox</title>
    <link rel="stylesheet" href="./index.css" />

    <style>
      .container {
        display: grid;
        grid-template-columns: 100px auto 100px;
        grid-template-rows: 50px 50px;
        gap: 3px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

OUTPUT :

Temani Afif · Answer 1 · 2020-05-04T15:21:03.993

Because div:nth-child(6)¹ is also applying to your container element since it's the 6th child considering the other elements inside the body.

Make your selector more specific and target only the div inside .container to avoid such issue:

div {
  height: 50px;
  text-align: center;
  font-weight: 600;
}

.container > div:nth-child(1) {
  background-color: blueviolet;
}
.container > div:nth-child(2) {
  background-color: coral;
}
.container > div:nth-child(3) {
  background-color: darkgoldenrod;
}
.container > div:nth-child(4) {
  background-color: darksalmon;
}
.container > div:nth-child(5) {
  background-color: deeppink;
}
.container > div:nth-child(6) {
  background-color: gold;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexbox</title>
    <link rel="stylesheet" href="./index.css" />

    <style>
      .container {
        display: grid;
        grid-template-columns: 100px auto 100px;
        grid-template-rows: 50px 50px;
        gap: 3px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Note that it won't behave the same everywhere. Here in the snippet :nth-child(6) is applying but using a different tool another selector may apply depending on how the elements are generated.

¹In your output the nth-child(1) is applying because you are probably testing locally where the code won't change and your container will remain the first child.

Related: How can I select the first or the last child with CSS correct?

Row gap is filling background color with first column

1 Answers1