Fluid width with equally spaced DIVs

html

responsive-design

css-grid

media-queries

byNikita Barsukov·Feb 7, 2025

Create equally spaced divs using the flexbox model. Set display: flex; on the parent and apply flex: 1; to the child elements. This setup maintains equal spacing and fluid widths as follows:

.container {
  display: flex;
  justify-content: space-between; /* Because the children need their space */
}
.child {
  flex: 1; /* The magic of sharing */
}

<div class="container">
  <div class="child">Div 1</div>
  <div class="child">Div 2</div>
  <div class="child">Div 3</div>
</div>

In the flex: 1;, 1 represents the flex growth factor, which dictates that each .child expands to equally fill the .container, ensuring uniform spacing.

Making use of CSS Grid for fluid width

With the advent of CSS Grid, constructing complex and responsive designs becomes easier. It allows fine-tuning control over columns and rows within your layout. Here's how to achieve a fluid layout with equal spacing using CSS Grid:

.grid-container {
  display: grid;  /* Because life isn't always a one-way road */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;  /* The gap keeping sibling boxes from fighting */
}

This setup adapts to various viewport sizes, helping to create a fluid and responsive layout.

Managing sneaky whitespace and compatibility issues

Working with inline-block, HTML whitespace can cause surprising outcomes. To handle this, especially in browsers like Safari, minimize unnecessary whitespace in your HTML and apply font-size: 0; for the container in IE6.

.child {
  display: inline-block; /* "Row, row, row your div" */
  *display: inline; /* Because inline-block didn't work in the stone age */
  zoom: 1; /* Pretend to be a block */
}

Notice the use of an asterisk * for IE6/7, this ensures your layout doesn't break.

Styling your divs using selective CSS selectors

Nth-child selectors enable application of unique styles to specific children. For alternating styles, the :nth-child(odd) selector is very effective:

.child:nth-child(odd) {
  background-color: #e9ecef; /* because variety is the spice of life */
}

Beware when using justify-content: space-between; in flex layouts. It works perfectly for a single row but might cause layout issues with multiple rows.

Making the layout dance to different screens with responsive design

Screen size varies across devices, and your layout should intelligently respond to these changes. Media queries teamed with calc() can make your layouts responsive:

@media (max-width: 800px) {
  .child {
    margin-right: calc(2% - 1em); /* Math.. it's everywhere.. ugh */
  }
}

Some tips for tidying things up

Avoid unwanted extra margins on the last child with :nth-child.
To simplify complex computations and media query tasks, using pre-processors like LESS or SASS could be beneficial.
When designing for older browsers like IE9, keep in mind potential quirks—especially revolving around calc().