HTML & CSS · Middle · Question 48 of 75

How do you build a two-column layout with a fixed-width sidebar and content filling the rest?

✓Correct answer: display: grid; grid-template-columns: 250px 1fr
2display: grid; grid-template-columns: 250px 100%;
3display: flex and width: 50%; on both columns

Explanation

250px 1fr - the first column is fixed, the second takes all the remaining space. 100% in the second column would overflow the container by 250px. The Flexbox equivalent: flex: 0 0 250px for the sidebar, flex: 1 for the content (and possibly min-width: 0).

How do you build a two-column layout with a fixed-width sidebar and content filling the rest?

Explanation

Further reading

Problem with a question

Test yourself