0

I have bunch of div elements inside #jedan main div. For some reason my first child which is marked as grid box 1 wont stretch to next 3 boxes even though I used grid-column-start and end;

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  background: #333;
}
#jedan {
  background: #4caaaa;
  color: #333;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(4, auto);
}

.a2 {
  border: solid 1px black;

  padding: 40px;
}
#jedan:first-child {
  grid-column-start: 1;
  grid-column-end: 4;
}
    <div id="jedan">
      <div class="q, a2">1</div>
      <div class="b, a2">2</div>
      <div class="x, a2">3</div>
      <div class="a, a2">4</div>
      <div class="f, a2">4</div>
      <div class="as, a2">4</div>
      <div class="aa, a2">4</div>
      <div class="asd, a2">4</div>
      <div class="dsa, a2">4</div>
      <div class="vcs, a2">4</div>
      <div class="fcx, a2">4</div>
      <div class="bc, a2">4</div>
      <div class="sada, a2">4</div>
    </div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Boban BoBo Banjevic
  • 53
  • 8

1 Answers1

1

You just did a typo. You have to set space after ID identifier and then write :first-child. Also, gird column end should be 5, cause it's where it ends.

   #jedan :first-child {
      grid-column-start: 1;
      grid-column-end: 5;
    }


* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  background: #333;
}
#jedan {
  background: #4caaaa;
  color: #333;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(4, auto);
}

.a2 {
  border: solid 1px black;

  padding: 40px;
}
#jedan :first-child {
  grid-column-start: 1;
  grid-column-end: 5;
}
    <div id="jedan">
      <div class="q, a2">1</div>
      <div class="b, a2">2</div>
      <div class="x, a2">3</div>
      <div class="a, a2">4</div>
      <div class="f, a2">4</div>
      <div class="as, a2">4</div>
      <div class="aa, a2">4</div>
      <div class="asd, a2">4</div>
      <div class="dsa, a2">4</div>
      <div class="vcs, a2">4</div>
      <div class="fcx, a2">4</div>
      <div class="bc, a2">4</div>
      <div class="sada, a2">4</div>
    </div>
empeK
  • 121
  • 4