0

I am making a list of items (cards) using grid, and the subgrid overflows into the next element element. Now, In Firefox, I don't have this problem. here is the code for the grid parent adn subgrid:

  .grid-parent{
     display: grid;
        margin-top: 2rem;
        grid-template-columns: 26rem [main-start]repeat(5, 1fr[main-end]);
        grid-template-rows: min-content 1fr min-content max-content;
    }

    grid-child{
      grid-column: 2/-1;
            grid-row: 1/-1;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min-content, 30rem));
            grid-template-rows: repeat(auto-fit, 1fr);
            justify-content: center;
            align-items: start;
            padding: 0 3%;
            grid-gap: 2%;
        }

    .big-btn{
       grid-column: 1/-1;
        width: 40%;
        padding: 1rem 0;
        font-size: 2.6rem;
        @extend .fw-700;
}

This, exactly

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Jesús Bohorquez
  • 65
  • 1
  • 7
  • tow issue related to the precentage used with grid-gap and also padding – Temani Afif Jun 03 '20 at 21:23
  • realated (probably a duplicate) https://stackoverflow.com/q/53563613/8620333 / https://stackoverflow.com/q/53536266/8620333 – Temani Afif Jun 03 '20 at 21:24
  • not my case, as that case is with ULs and Flex, this is with grid :/ – Jesús Bohorquez Jun 03 '20 at 21:34
  • 1
    I linked to 2 questions, one with grid and percentage gap and another with percentage padding where it doesn't matter if it's flexbox or CSS grid because the behavior is the same. By the way you need to share you full code so we can see the issue – Temani Afif Jun 03 '20 at 21:38
  • Thabk you so much, dude, the percentage Gap was the problem, now, the issue is that I don't understand why, but it solved my problem! – Jesús Bohorquez Jun 03 '20 at 21:57
  • read the link I have shared to understand why. I have closed the question as duplicate with that link – Temani Afif Jun 03 '20 at 21:58

1 Answers1

-1

Try to put a margin-bottom on the big-btn?

Rebecca Seiron
  • 68
  • 3
  • Not working, and there is another problem, I need a fluid solution, as I don't kow how many items will the server show, and if I solve it for only n number of cards, if the number changes, it will break the design again :/ – Jesús Bohorquez Jun 03 '20 at 21:27
  • This is more of a comment, than an answer. – Rainbow Jun 04 '20 at 00:56