I'm currently facing an issue with some columns/rows on my website that are keeping content locked in the top left corner, reminiscent of early 00's web design. The site was originally designed for smaller screens like 1024x764, so when viewed on a larger screen, the column gaps automatically widen.
Is there a way to establish a maximum width for the column gap so that the content does not expand beyond that specified 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;
}