CSS Grid generating more columns than existing

Question

I have a grid that for large screens (@media (min-width: 800px)) uses a grid of 12 columns with the next directive:

grid-template-columns: repeat(12, [col-start] 1fr);

But for mobile devices I use instead:

grid-template-columns: repeat(4, [col-start] 1fr);

Until here everything is fine, no clear problem. But if I add grid-gap: 1rem; the problem becomes obvious for the small screens since it seems that even though I specified 4 columns, it takes it as 12 columns 4 of them with 25% width and the rest with 0px so there is a bad behaviour of css.

I cannot reproduce it in a JSFiddle by the moment but I have some image of the problem.

For 12 columns on big screen:

Applied styles: (Other computed values)

 @media (min-width: 800px) {
   .my-grid {
     display: grid;
     padding: 2.5rem 4.875rem 0 4.875rem;
     grid-template-columns: repeat(12,[col-start] 1fr);
   }
 }

For 4 columns:

Applied styles: (Other computed values)

   .my-grid {
     display: grid;
     grid-template-columns: repeat(4,[col-start] 1fr);
     padding: 1rem;
   }

As you can see the computed values for the 4 columns grid has 4 columns set and the rest with 0px width...

In the element inspection there are only the lines I wrote above.

Any idea of why do we have this behaviour?

On an additional note, I am using styled-components and it is a div.

Codepen with the error

Quenchless

I cannot reproduce this either (codepen). Could you show what styles are applied to your grid-container on small screens? – Suckow

Just editted the questions with the styles and also saying that I am using styled-components – Quenchless

Can you also show what styles are really applied? You can find it in Styles and Computed tab in DevTools – Suckow

just updated the question with 2 links:pastebin.com/BEqD9CJq and pastebin.com/AYhhea7C – Quenchless

Please post enough code in the question to reproduce the problem. – Ezmeralda

You are not posting enough code for us to solve it. – Hampshire

Hello, as I state, I did not have a way of reproducing this error and one of the needs was to recreate the error (then it is easier to debug), but I answered the question since I found the underneath reason for this to happen – Quenchless

Answer 1

The element that is underneath had an span of:

grid-column: 1 / span 12;

This was forcing the CSS Grid to have 12 columns.

If we delete that element underneath, the CSS Grid behaves normally

Quenchless

Answer 2

This also happens when one of your grid elements has a grid-area entry that isn't part of your grid.

.about_me{
  max-width: 900px;
  margin: 0 1.75rem 0;
}

.about_me__body {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 20px;
  align-items: center;
  margin: 1.75rem 14% 0.75rem;
  width: 100%;
  row-gap:30px;
}

.about_me__p4 {
    grid-area: image;
}

<div class="about_me">
    <article class="about_me__body">
        <h1 class="about_me__title">
            {{ .Description }}
        </h1>
        <div class="about_me__p1">
            {{ .Content }}
        </div>
        <div class="about_me__p2">
            {{ .Content }}
        </div>
        <div class="about_me__p3">
            
            {{ .Content }}
            
        </div>
        <div class="about_me__p4">
            
            {{ .Content }}
            
        </div>
        <div  class="about_me__p5">
            
            {{ .Content }}
            
        </div>
    </article>
</div>

Here, about_me__p4 has a grid area that doesn't exist, hence breaking the whole layout.

Christiansen

Hej, thanks for the addition, The question was still related to the code in the answer but it is good to document that this is a possibility too :D – Quenchless

Yeah, this was at the top of the search engine hits so figured I'd add on to it :) – Christiansen