CODEWITHSUNDEEP
htmlcsscss-grid
user2371684
user2371684

Reputation: 1565

CSS grid grid-column span issue

I am working on the span size of a grid-column.

I have this code for my grid-columns:

.main_comp:nth-child(n+3) {
  //background-color: yellow;
  grid-template-columns: repeat(6, 1fr);
}

.main_comp:nth-child(n+3) .bigimg {
  grid-row: 1;
  grid-column: auto / span 3;
}

.main_comp:nth-childn+(n+3) .blog_art {
  grid-row: 2;
  grid-column: auto / span 2;
  background-color: green;
}

The result I am getting is not quite what I want. I thought that:

grid-column: auto / span 2;

would span each blogart div 2 columns and three of blogart divs would span over all the 6 columns.

enter image description here

What I would like is something like this for all the divs from number three and onwards:

enter image description here

I have setup a codepen on my example and the issue I have mentioned here starts on line 66.

Upvotes: 2

Views: 9100

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106058

you need to span 2 cols. (edit similar answer as Naga Sai A, but with a different approach/selector)

you may overide your previous rule .blog_art:not(:nth-child(2)) with:

.bigimg  + .bigimg ~ .blog_art { 
  grid-column: auto / span 2;
  background: tomato;/* see us */
}

http://codepen.io/gc-nomade/pen/KmzXgx?editors=1100#0

Upvotes: 2

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, use below option

Add below class to the blog_art

<div class="main_comp">
      <div class="bigimg">image</div>
      <div class="bigimg">image</div>
      <div class="blog_art new">blog art</div>    
      <div class="blog_art new">blog art</div>
      <div class="blog_art new">blog art</div>     
    </div>

.new:not(:nth-child(2)) {
  grid-column: auto / span 2;
  grid-row: 2;
  background: orange;

}

Codepen URL: http://codepen.io/nagasai/pen/NjNaPX?editors=1100

Upvotes: 1

Related Questions