html - CSS Grid A column to take as much space as possible whilst the other is variable -


using css grid, trying achieve:

enter image description here

i've tried with:

nav {   display: grid;   grid-template-columns: auto 10%; } 

but 10% might still smaller, depending on content that's on column. how can make small possible whilst being width-variable field?

you can grid using max-content or min-content.

nav {   display: grid;   grid-template-columns: auto max-content; } 

max-content

is keyword representing largest maximal content contribution of grid items occupying grid track.

min-content

is keyword representing largest minimal content contribution of grid items occupying grid track.

see grid-template-columns.


Comments

Popular posts from this blog

inversion of control - Autofac named registration constructor injection -

verilog - Systemverilog dynamic casting issues -

ios - Change Storyboard View using Seague -