The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Justify blocks with equal spacing

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #34806

    I’m trying to accomplish the following effect: Example

    I’ve come very close by setting the blocks to

    display: inline-block;

    and setting the container to

    text-align: justify; 

    The problem in this case is that I want the spacing between the blocks to be equal. I.E: When I set it to Justify, the margins (spacing) becomes variable. What I want is the padding (spacing inside the block) to be variable. A table is not a solution, because each line must contain as many blocks as possible (The blocks must be allowed to wrap when the browser window size has changed).

    A pure css solution will be greatly appreciated!


    You will have to use something like masonry.js as it is not possible with just CSS.


    Thanks, but it seems that you’re still bound to columns with masonry.


    I can’t know this, since this would depent on the length of the words and the users screen size.


    I would also suggest that masonry.js is your only option. Maybe you could use lettering.js as well?

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.