/ Code

Flowing blocks

Displaying things in a grid was cool back in 2004 - These days we need something better.

There's lot of options, but I'll share the method I think is the simplest.


This is a trick which uses display-inline - You might be wondering how that CSS attribute is a "trick", but we'll get to that part.

The base

It's really simple to set up. You only need a single outer div, and then you can fill it with as many fluent blocks you want, which will flow into place as if they were text. The HTML looks something like this:

<div class="container">
  <div class="block">
    I'm flowing!
  </div>
</div>

And the CSS would look like this:

.container {
  text-align: center;
}

.block {
  display: inline-block;
  width: 200px;
  height: 200px;
}

That's it. You've now got a bunch of blocks that will flow like text inside the container while being centered.

Here's a practical example on codepen


The reason this works is because browsers will treat things with a display-inline attribute sorta like text and wrap it. Most people know this much. However, I accidentally found out that text-align also works. From that point, it was a piece of cake. Nice and centered in 5 seconds.

"Fluent blocks" like this have a lot of use cases. Like mentioned earlier it's what I use to display supporters on their page, but it's also what powers the buttons on my homepage - It will adapt to the width just as easily as text. On phones it might be one or two colums depending on the size of your blocks, while on huge desktop monitors your could easily make it fill all that 4K space.

Though of course filling a 4K screen would be pretty dumb in most cases. But solving that is as easy as setting a width/max-width on the container, then centering it:

.container {
  text-align: center;
  width: 900px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

And that will not fill more than 900px of width. The max-width will also keep it inside the viewport on smaller devices, like phones. (Make sure to put the max-width after the width if possible, some browsers don't like having width after max-width for some reason.)