Set max grid-column-gap and prevent expanding

user_18305379 0
Viewed 34

I have a few columns/rows that keep content stuck in the top left corner (it's a recreation of an early 00's website). The website was made to use small screens (e.g 1024x764). When developing with a large screen, the column gaps expand automatically.

How do I set a max column gap width where the content won't expand any further than the set value?

.index {
   display: grid;
   grid-template-columns: .30fr 500px;
   grid-template-rows: .2fr 1fr;
   grid-column-gap: 40px;
   grid-row-gap: 40px;

   min-height: 0;
   max-height: 0;
}
css-grid css html
1 Answers

Okay I just asked this but I just found a dirty hack. I just added a 10000px column to the grid. It'll work until they release 10k pixel monitors lol. I'm sure someone will answer with a clean and proper answer but this works in the meantime

.index {
   display: grid;
   grid-template-columns: .30fr 500px 10000px;
   grid-template-rows: .2fr 1fr;
   grid-column-gap: 40px;
   grid-row-gap: 40px;

   min-height: 0;
   max-height: 0;
}
user_183053790
Related