CSS grid-item not spanning across set columns when resizing

Question

I'm trying to make a grid responsive. It's working so far but on thing still bothers me. If I'm setting a grid item's span property to start at the second column from the left, the grid breaks on window resize.

The expected and the actual result:

So there are two grid containers with almost the same CSS properties. The top grid's items should be at the very right of the grid container and the bottom grid's items should be at the very left of the grid container.

The bottom grid and its items scale as expected into a single column, however the top grid shows two (even different sized) columns instead of the expected single column. So its item spans only over one column.

The two grid containers and grid items have almost the same CSS properties:

.-has-columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
}

// top item
.-column-item--right {
  grid-column: 2 / -1;
  background: green;
}

// bottom item
.-column-item--left {
  grid-column: 1 / -2;
  background: lightblue;
}    

article,
figure,
img {
  width: 100%;
}

The HTML:

// top container

<article class="-has-columns">
  <div class="-column-item--right">
    <figure>
      <img>
    </figure>
  </div>
</article>

// bottom container

<article class="-has-columns">
  <div class="-column-item--left">
    <p>
    <p>
    <p>
  </div>
</article>

Thanks for any tips!

do you want the span side by side ? I mean to say like rows of columns ? — Vinay Kashyap, Jul 22 '20 at 14:43
The second container should be beneath the first container. Both are separate grids. — , Jul 22 '20 at 14:51
Hey, thanks but I think you misunderstand. The issue is not the vertical positioning of the containers but that in the first container instead of 1 grid cell, it displays 2 grid cells. Although it's almost the same CSS properties. Thanks though! — , Jul 22 '20 at 15:04
I just posted the code below , i think i was able to meet your expected output . do check ? — Vinay Kashyap, Jul 22 '20 at 15:10
How would the container know to switch from a 2-column to a 1-column display? You need a media query. — Michael Benjamin, Jul 22 '20 at 15:32
@MichaelBenjamin because of the auto-fill and minmax property https://css-tricks.com/snippets/css/complete-guide-grid/ — , Jul 22 '20 at 15:36
With the addition of the `grid-column` rules, you're disrupting the `auto-fill` and `minmax` functions. How does the container know that `grid-column: 2 / -1` no longer applies. Again, you need a media query. — Michael Benjamin, Jul 22 '20 at 15:44
What's weird is that it works from the left side though. Without a media query I mean. — , Jul 22 '20 at 15:51

score 0 · Answer 1 · answered Jul 22 '20 at 15:09

0

 This is my html file  
  `
      <body>
        <article class="-has-columns">
          <div class="-column-item--right">
            <span>
              <p>abc</p>
              <p>xyz</p>
              <p>abb</p>
            </span>
          </div>
        </article>
    
        <article class="-has-columns">
          <div class="-column-item--left">
            <p>Xyz</p>
            <p>Bzg</p>
            <p>asd</p>
          </div>
        </article>
      </body>
 
My css

.-has-columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
}

.-column-item--right {
  grid-column: 2 / -1;
  background: green;
}

.-column-item--left {
  grid-column: 1 / -2;
  background: lightblue;
}

article,
figure,
img {
  width: 100%;
}
body {
  position: relative;
  padding-bottom: 45%;
}
@media only screen and (max-width: 600px) {
  body {
    position: relative;
    padding-bottom: 45%;
  }
  .-column-item--right {
    grid-column: 1 / -1;
    background: green;
  }
}

answered Jul 22 '20 at 15:09

Vinay Kashyap

101
9

Thanks, that works well! I thought I could work without media queries (just the responsiveness of the grid), but maybe that's not possible here. – Jul 22 '20 at 15:23
.-column-item--right { grid-column: 4 / -2; background: green; } – Vinay Kashyap Jul 22 '20 at 15:29
I think this will work well for you without media queries – Vinay Kashyap Jul 22 '20 at 15:29
Thanks Vinay, I will try that! – Jul 22 '20 at 15:49
1

No problem . it worked as exepcted so i dont think you will face any difficulties . – Vinay Kashyap Jul 22 '20 at 15:51

score 0 · Answer 2 · answered Jul 22 '20 at 15:10

0

Try

.-column-item--right {
  grid-column: 2 / -2;
}

answered Jul 22 '20 at 15:10

Kerri

445
4
10

Thanks for your answer, unfortunately when using `2/-2` the layout is a centred single column layout. `grid-column: -2 / -1` seems to work on small screens but on large screens it's a single column layout then. – Jul 22 '20 at 15:24

CSS grid-item not spanning across set columns when resizing

2 Answers2