How to make a column span full width when a second column is not there? (CSS Grid)

Question

I know there are similar questions but this is specifically asking how to do this using CSS Grid Layout.

So we have this basic grid setup:

HTML (with

Answer 1

You can get closer by using content sizing keywords, something like:

.grid {
  display: grid;
  grid-template-columns: 1fr fit-content(200px);
}

.sidebar {
  width: 100%;
}

The fit-content keyword will look at the size of the content and act like max-content until it gets to the value you pass in.

In reality you probably wouldn't need to stick a size on sidebar as the content is likely to dictate a size of at least 200 pixels (for example) but you can play around with this.