CODEWITHSUNDEEP
htmlcss
zurfyx
zurfyx

Reputation: 32767

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

Using CSS Grid, this is what I am trying to achieve:

enter image description here

I've tried with:

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

But that 10% might still be smaller, depending on the content that's on that column. How can I make it as small as possible whilst being a width-variable field?

Upvotes: 3

Views: 2094

Answers (1)

zurfyx
zurfyx

Reputation: 32767

You can do that with Grid by using max-content or min-content.

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

max-content

Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.

min-content

Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.

See grid-template-columns.

Upvotes: 2

Related Questions