1

I am learning CSS grids. So far I love it. But I am facing an issue with the line number. I have defined my inline-grid by this:

grid-template-columns: repeat(7, 60px);
grid-template-rows: repeat(4, 60px);

=> There are 7 columns, so the final line number should be 8. But it's showing 10.

=> There are 4 rows, so the final row line number should be 5. It's showing 7

(In -ve numbers, it showing correctly for both rows & columns, -1/-8 & -1/-5 respectively)

Trying to fix this since yesterday evening. Please help me

Firefox:
chrome dev tool screenshot

Chrome:
firefox dev tool screenshot

.container {
    margin: 110px 270px;
    display: inline-grid;
    grid-template-columns: repeat(7, 60px);
    grid-template-rows: repeat(4, 60px);
    background-color: violet;

    grid-template-areas: "header header header header header header header";
}

.header {
    grid-area: header;
    background-color: brown;
}

.main {
    grid-area: main;
}

.sidebar {
    grid-area: sidebar;
}

.footer {
    grid-area: footer;
}
<body>
    <div class="container">
        <div class="header"></div>
        <div class="main"></div>
        <div class="sidebar"></div>
        <div class="footer"></div>
    </div>
</body>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Tapan Das
  • 21
  • 5
  • 1
    Please share your HTML as well as your CSS. It looks like you have additional content that is getting collapsed for column borders 8 9 and 10. Same for your rows. – TylerH Aug 03 '22 at 04:15
  • I have added the full code now. Please take a look – Tapan Das Aug 03 '22 at 04:27
  • I'm not familiar enough with grid anymore to explain exactly what's going on via an answer, but if you change your grid to be `display: grid` and look at the grid inspector you will see what I mean. In short, the numbers are just collapsed extra because of the `display: inline-grid` property. – TylerH Aug 03 '22 at 04:40
  • I have changed it into `display: grid`. I can see the change. But the weird part is, this `display: inline-grid` works fine in two other cases – Tapan Das Aug 03 '22 at 04:53
  • If I don't include `grid-template-area`, the problem still exists. But if I remove the `class selectors` which have only `grid-area` defined then line numbers are in order – Tapan Das Aug 03 '22 at 05:02
  • @TylerH it's due to the grid-area used with any template defined. Each one is creating an extra row/column (added a relevant duplicate) – Temani Afif Aug 03 '22 at 14:03

0 Answers0