Make container shrink-to-fit child elements as they wrap

html

responsive-design

flexbox

css

byNikita Barsukov·Dec 31, 2024

To achieve a shrink-to-fit behavior, flexbox and CSS grid are two effective solutions. Implement display: flex; along with flex-wrap: wrap; for flexbox, or display: grid; together with grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr)); for CSS grid. Here's the flexbox code:

.container {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 0 1 auto;
  min-width: 150px; // Per your preference
}

And here’s the familiar code for grid:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
}

Handling spontaneous reaction to content change

Leverage the magic of flex properties to cater to the dynamic nature of your content. Use flex-grow to allow the child elements to grow to fill any available space and flex-shrink to shrink them when the need arises. Also, setting flex-basis to auto makes the flex items adjustable based on the content’s size.

Nitty-gritty of Responsive behavior

Harnessing the power of max-width

Trade the fixed widths with the max-width property for child elements. This subtle change enhances the responsiveness of your design:

.child {
  flex: 0 0 auto; // "I won't grow, I won't shrink!"
  max-width: 300px; // Max adulthood size
}

Aligning - Not just for the stars!

If you fancy the idea of aligning the child elements to the right of your container, then justify-content: flex-end; or text-align: right; will serve you well.

Cross-browser compatibility - Be a good Samaritan!

While flexbox has come a long way, implementation can differ across browsers, especially for mini flex items. So, if you want your design to be a good citizen of the multi-browser world, cross-browser validation is a must.

Exploring layout fortification

Class up your classes

Implement semantic classes for a more organized and comprehensible flexbox structure:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item-inline { // for those inline mingle times
  flex: 0 0 auto;
}

.item-fill-row { // I'm a row hogger
  flex: 1 0 100%;
}

Maintaining a consistent width

Keep the disruption to bare minimum with a minimum required space width. This will get you that harmonious layout as well as those extra brownie points for not breaking the UI.