CODEWITHSUNDEEP
htmlcsscss-grid
Chlebqowy
Chlebqowy

Reputation: 23

Row Overflow in CSS grid with overflow: scroll;

My grid looks like this instead of having all columns be equal with this

  grid-template-columns: repeat(10, minmax(0,1fr));
  grid-template-rows: repeat(var(--rowNumber),minmax(0,1fr));

With another element under it, it's shorter and there is also row 2 but it's still too long.

I tried https://css-tricks.com/preventing-a-grid-blowout/ and Prevent content from expanding grid items but they didn't help.

Using minmax(0, 1fr) or minmax(0,10vh) instead of just 1fr in the grid row and column "declaration" but it didn't do anything either.

I was expecting to just have a normal grid with rows and columns of equal size. Also, an AI didn't help. It's also way longer of an extension than the padding and gaps could cause.

I think it's because of scroll so I included it in the title but I don't know how to fix it and google didn't help. I came upon stuff like How to get scrolling in a CSS grid? but I already tried it all.

I'm also unsure if it's even the problem, it's just a theory.

:root {
  --boxW: 80vw;
  --boxH: 300vh;
  --rowNumber: 30;
  --boxMargin: calc(calc(100vw - var(--boxW)) /2);
}

.parent {
  background-color: #CC55AA;
  height: var(--boxH);
  width: calc(var(--boxW)-6vw);
  margin-inline: var(--boxMargin);
  margin-block: 10vh;
  padding-block: 7vh;
  padding-inline: 3vw;

  display: grid;
  gap: 10vw;

  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(var(--rowNumber), minmax(0, 1fr));
  gap: 3vh;
}

.child {
  background-color:#FCF0F7;
  padding-inline: 6vw;
  padding-block: 6vh;
  overflow: scroll;

  min-width: 0;
  min-height: 0;
  max-height: 2fr;

}

.child1 {
  grid-column-start: 1;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 2;

}
<body>
  <div class="parent">
    <div class="child child1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut vestibulum magna. Vestibulum ullamcorper enim molestie, elementum massa id, vulputate. </div>
  </div>
</body>

Upvotes: 1

Views: 55

Answers (1)

Brett Donald
Brett Donald

Reputation: 14340

If you want a grid where the row heights are equal to the column widths, you’ll need to set (for a fixed layout) or calculate (for a responsive layout) a cell size which you can use for styling both the columns and the rows.

:root {
  --bodyMargin: 1em;
  --gridPadding: 1em;
  --gridGap: 1em;
  --gridSize: 10;
  --cellSize: calc((100vw - var(--bodyMargin)*2 - var(--gridPadding)*2 - var(--gridGap)*(var(--gridSize) - 1)) / 10);
}

body {
  margin: var(--bodyMargin);
}

.parent {
  padding: var(--gridPadding);
  display: grid;
  grid-template-columns: repeat(var(--gridSize), var(--cellSize));
  grid-template-rows: repeat(var(--gridSize), var(--cellSize));
  gap: var(--gridGap);
}

enter image description here

Here is the full working example code which produced the image above. After running it, use the full page link to test the responsive behaviour.

:root {
  --bodyMargin: 1em;
  --gridPadding: 1em;
  --gridGap: 1em;
  --gridSize: 10;
  --cellSize: calc((100vw - var(--bodyMargin)*2 - var(--gridPadding)*2 - var(--gridGap)*(var(--gridSize) - 1)) / 10);
}

body {
  margin: var(--bodyMargin);
}

.parent {
  background-color: #CC55AA;
  padding: var(--gridPadding);
  display: grid;
  grid-template-columns: repeat(var(--gridSize), var(--cellSize));
  grid-template-rows: repeat(var(--gridSize), var(--cellSize));
  gap: var(--gridGap);
}

.parent > * {
  background-color: #FCF0F7;
  overflow: auto;
  padding: 0.5em;
}

.parent > *:nth-child(1) {
  grid-column: 1 / span 3;
  grid-row: 1 / span 4;
}

.parent > *:nth-child(2) {
  grid-column: 4 / span 4;
}

.parent > *:nth-child(3) {
  grid-column: 8 / span 3;
  grid-row: 1 / span 3;
}

.parent > *:nth-child(4) {
  grid-column: 4 / span 3;
  grid-row: 2 / span 3;
}

.parent > *:nth-child(5) {
  grid-column: 7;
  grid-row: 2 / span 4;
}

.parent > *:nth-child(6) {
  grid-column: 8 / span 3;
  grid-row: 4 / span 2;
}
<div class="parent">
  <div>
    ITEM 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut vestibulum magna. Vestibulum ullamcorper enim molestie, elementum massa id, vulputate.
  </div>
  <div>
    ITEM 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut vestibulum magna. Vestibulum ullamcorper enim molestie, elementum massa id, vulputate.
  </div>
  <div>
    ITEM 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut vestibulum magna. Vestibulum ullamcorper enim molestie, elementum massa id, vulputate.
  </div>
  <div>
    ITEM 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut vestibulum magna. Vestibulum ullamcorper enim molestie, elementum massa id, vulputate.
  </div>
  <div>
    ITEM 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut vestibulum magna. Vestibulum ullamcorper enim molestie, elementum massa id, vulputate.
  </div>
  <div>
    ITEM 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut vestibulum magna. Vestibulum ullamcorper enim molestie, elementum massa id, vulputate.
  </div>
  <div>
    ITEM 7. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut vestibulum magna. Vestibulum ullamcorper enim molestie, elementum massa id, vulputate.
  </div>
  <div>
    ITEM 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut vestibulum magna. Vestibulum ullamcorper enim molestie, elementum massa id, vulputate.
  </div>
  <div>
    ITEM 9. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut vestibulum magna. Vestibulum ullamcorper enim molestie, elementum massa id, vulputate.
  </div>
  <div>
    ITEM 10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut vestibulum magna. Vestibulum ullamcorper enim molestie, elementum massa id, vulputate.
  </div>
  <div>ITEM 11.</div>
  <div>ITEM 12.</div>
  <div>ITEM 13.</div>
  <div>ITEM 14.</div>
  <div>ITEM 15.</div>
  <div>ITEM 16.</div>
  <div>ITEM 17.</div>
  <div>ITEM 18.</div>
  <div>ITEM 19.</div>
  <div>ITEM 20.</div>
  <div>ITEM 21.</div>
  <div>ITEM 22.</div>
  <div>ITEM 23.</div>
  <div>ITEM 24.</div>
  <div>ITEM 25.</div>
  <div>ITEM 26.</div>
  <div>ITEM 27.</div>
  <div>ITEM 28.</div>
  <div>ITEM 29.</div>
  <div>ITEM 30.</div>
</div>

My cell size calculation is based on the viewport width (100vw), because in my example the grid is almost the full width of the screen. You will need to develop your own cell size calculation based on the width of your grid in your layout. Note that CSS grid does not currently provide any other way to make row heights equal to column widths.

Upvotes: 0

Related Questions