如何将一组相同宽度的盒子均匀地分布在自举流体容器内？

Question

How to distribute evenly a set of same width boxes inside of a fluid container?

I have the following:

<div class="fluid-container">
  <span>some text</span>
  <span>some text2</span>
  ...
  <span>some textN</span>
</div>

I want to achieve this result of nicely even spaced boxes where each pink box containing a given text is always of the same width inside of the blue fluid container:

I tried to set up boxes inside of it, but then I get them one after each other in the next row, not using the lateral space optimally:

If I don't use anything in the text (like the span I used), then the fluid container does its trick but the text is not evenly spaced (in this case the yellow boxes are text that is not wrapped with any tag):

What class/css code should I use to organize and wrap the text so it result in same width boxes? The number of boxes is not known.

Answer 1

http://getbootstrap.com/css/#grid

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

<div class="row">
  <div class="col-md-4">text</div>
  <div class="col-md-4">text</div>
  <div class="col-md-4">text</div>
</div>

Answer 2

I'm not entirely sure why you want to use a 'fluid grid' specifically. Unless you don't want it to collapse to a row when on mobile.

<div class="row">
  <div class="col-xs-6 col-md-4">col 1</div>
  <div class="col-xs-6 col-md-4">col 2</div>
  <div class="col-xs-6 col-md-4">.col 3</div>
</div>

http://getbootstrap.com/css/#grid-example-fluid

Answer 3

If you want to do this without any framework you can use Flexbox

 .fluid-container { display: flex; background: #5B9BD5; flex-wrap: wrap; padding: 20px; } span { flex: 0 0 calc(33.33% - 20px); background: #F8CBAD; min-height: 50px; margin: 10px; } @media(max-width: 768px) { span { flex: 0 0 calc(100% - 20px); } } 

 <div class="fluid-container"> <span>some text</span><span>some text2</span><span>some textN</span><span>some text</span><span>some text2</span><span>some textN</span><span>some text</span><span>some text2</span><span>some textN</span><span>some text</span><span>some text2</span><span>some textN</span> </div>