spacing row items
Most people consider breakpoints to be one of the main pillars of responsive design. While they are an integral part of most responsive exercises, you don't necessarily need them to make a site responsive. As an alternative you can fall back on good old-fashioned liquid behavior, especially when dealing with one-column constructions. This article will detail four liquid models for layouting rows of fixed-width elements.
rows of fixed-width elements
We are typically talking about rows containing lists of elements that have a fixed width (often defined by an image inside). Consider an image gallery, a list of TV episodes, a product search result page etc... Typical for these setups is that the individual elements are not really fit to grow individually, which introduces some interesting layout choices when it comes to spacing the individual elements.
example html
<section class="row"> <article> ... </article> ... <article> ... </article> </section> The html we'll be working with is as straight-forward as can be. A simple list of articles grouped together by a row container, that's all we'll be needing.
liquid layout models
The first three models will be small variations based on a simple but very useful css trick. These models will keep the width (= dimension) of the individual elements the same. The fourth and last model will still try to scale the individual elements in order to preserve the original ratio of spacing and alignment.
everything to the left
.row article {display:inline-block; margin:0 1em 1em 0;} This is definitely the most basic layout. Just set all the articles to inline-block and they will consume whatever space is available. If there isn't enough space they will simply break to a second line. You can provide an extra margin to further space the articles and you're all set. It's also possible to do the same thing with floats, this makes it easier to control the space between the items but it also introduces some problems when not all articles have the same height and they break to a second line.
When resizing the width of your site though, this model will create rather ugly empty spaces to the right of the row, until the point where an extra item fits into the row again. Many designers will freak out when they see this.
space evenly: justified
.row {text-align:justify;} .row article {display:inline-block; margin:0 1em 1em 0;} Now here's the real reason why I prefer inline-block over floats. Because the articles behave as inline elements from the row's point of view, we can use text-align on the row to determine their behavior. By applying a text-align:justify on the row, we make sure that the first and last item will always line up with the left and right side of the container. The articles themselves will be evenly spaced, something which is impossible to do with floats.
This model will make sure that the items restrict themselves to original grid alignment, but the spacing between the elements becomes variable, which, depending on the number of items on a single line, may be undesirable (wide elements mean big gaps at certain site widths - very ugly).
space evenly: centered
.row {text-align:center;} .row article {display:inline-block; margin:0 1em 1em 0;} By changing justify to center, the articles will now keep their original distance from each other, but the margin to the left and the right of the row container will adapt instead. You will lose the alignment with your grid but the spacing between the individual articles will remain the same, which is much more pleasant on the eye. Again, depending on the design this may or may not be favorable.
zoom and combine spacing
.row {text-align:[option];} .row article {display:inline-block; width:22%;} .row article img {width:100%} If you place a percentage width on the articles they will grow together with the width of the row. When the articles contain sizable chunks of text this may be a good option, though you'll need to provide breakpoints if you want to increase the number of items on a single line (resetting the width to make room for more items when possible).
Combine this technique with any of the above text-align options and you should have plenty of models to choose from.
justify and multi-line
If your elements run over multiple rows, do take into account that text-align:justified won't impact the last line (which is accepted behavior). There's an easy css fix though, should it be favorable that the last line is justified as well:
.row:after {content:""; display:inline-block; width:100%;} conclusion
If you know about other interesting models for spacing fixed-width elements in a liquid container, do share. I've come across a few liquid layouts myself and found that one of these models is usually sufficient to please the designers. Cross-browser support is excellent, so don't hold back if you want to use any of these.