Sidebar Sizing Experiment
Resize the browser window to see how each layout behaves.
1. Auto
Main content area. Notice that the sidebar only takes as much space as it needs, and the rest goes to the main content.
2. Fixed Width (200px)
Main content area with flexible text that should adjust to screen size. Try resizing the window!
3. Percentage (20%)
Main content area with flexible text. Notice how the sidebar grows/shrinks proportionally.
4. Fractional Unit (1fr 3fr)
Main content area. Sidebar gets 1 part, main gets 3 parts of free space.
5. Minmax(150px, 200px)
Main content area. Sidebar never smaller than 150px, never larger than 200px.