ZyPA Posts - Answer Overflow

ZyPA

•Created by ZyPA on 12/18/2023 in #front-end

Make 2 grid columns share the same size.

Hey guys, lets say i have a grid, that grid should have 3 columns. [ Logo | Nav | Button ] and i want Logo and Button to always be the same size so that nav is perfectly centered, but also only be as big as the largest of them, like auto would do, how would i do this? or is it completely impossible with CSS? Or Alternatively, if i only have [ Logo | Nav ] is there a way to add space next to Nav to make sure its still centered. Of course this would be easy if i hard coded the size like:

.grid {
  grid-template-columns: 100px 1fr 100px;
}

.grid {
  grid-template-columns: 100px 1fr 100px;
}

but i cant figure out how to do it without hard-coding the values since putting in auto like so this wouldnt work.

.grid {
  grid-template-columns: auto 1fr auto;
}

.grid {
  grid-template-columns: auto 1fr auto;
}

7 replies

Gaming

Programming