Solución CSS pura para dividir elementos en una cantidad dinámica de columnas

Además de todo lo que dijeron en los comentarios, no existe una solución solo CSS, así que quería dejarle una buena solución usando js en la que ni siquiera tiene que iterar buscando el elemento más amplio, todo proviene de un conjunto de CSS y matemáticas.

Puede cambiar el contenido de los elementos y verá cómo se ajusta el número de columnas, si el elemento más ancho es menor que el ancho del contenedor / N, usará N columnas automáticamente.

Echa un vistazo a este JSFiddle para demo

La idea es muy simple, usted set width: 'auto', display: 'inline-block' para container para permitir que se ajuste a su contenido que se define por el ancho del elemento más ancho, véalo en el siguiente img:

Ahora puede usar el ancho de container para conocer el ancho del elemento más ancho y esto evita que tenga que iterar buscándolo. En este momento se puede utilizar este ancho para establecer el resto de elementos, pero vamos a hacerlo un poco mejor podemos hacer que los elementos ocupan todo el ancho de la container solo con una camada calc:

var div = Math.floor(initialWidth / widestItemWidth);     /*this is to get as many items fit with the width of the widest element*/
var itemWidth = initialWidth / div;      /*for the width of the item occupy the entire container*/

Así que si el elemento más ancho es menor que container width / N, usará N columnas automáticamente y se ajustarán al ancho de container, eso es todo lo que tienes que hacer, simplemente establece una propiedad css, haz un poco de calc y ahí tienes lo que querías lograr.

$(document).ready(function() {
    var $container = $('.container');
    var $item = $('.item');

    var initialWidth = $container.outerWidth();

   $container.css({     /*to allow it to fit its contents which is defined by the width of the widest element*/
        width: 'auto',
        display: 'inline-block'
    });   

    var widestItemWidth = $container.outerWidth();     /*Now this is the width of the widest item*/

    var div = Math.floor(initialWidth / widestItemWidth);     /*this is to get as many items fit with the width of the widest element*/
    var itemWidth = initialWidth / div;      /*for the width of the item occupy the entire container*/
  
  /*if you don't want the items occupy the entire width of the container just use 'widestItemWidth' as width of $item*/

    $item.css({
        width: itemWidth,
        float: 'left'
    });
    $container.css({     /*restoring the initial styles*/
        width: initialWidth,
        display: 'block'
    });
})

.container {
  width: 400px;
  overflow: hidden;
}
.container .item {
  padding: 8px;
  border: 1px solid rgb(216, 213, 213);
}
*{
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="item">Maudie Mcmanus</div>
    <div class="item">Remedios Arrington</div>
    <div class="item">Chaya B</div>
    <div class="item">Duncan</div>
    <div class="item">Lashonda Tatum Walls</div>
</div>

Si quieres añadir margen a tus ítems solo tienes que tenerlo en cuenta a la hora de hacer las matemáticas como esto:

$(document).ready(function() {
    var $container = $('.container');
    var $item = $('.item');

    var initialWidth = $container.outerWidth();

    $container.css({
            width: 'auto',
            display: 'inline-block'
        });

    var currentWidth = $container.outerWidth();
    var itemMargin= parseInt($item.css('margin-right'));

    var div = Math.floor(initialWidth / currentWidth);
    var itemWidth = initialWidth / div - itemMargin;   /*subtracting the item's margin from the compute width*/

    $item.css({
        width: itemWidth,
        float: 'left'
    });
    $container.css({
        width: initialWidth,
        display: 'block'
    });
})

.container {
  width: 400px;
  overflow: hidden;
}
.container .item {
  padding: 8px;
  border: 1px solid rgb(216, 213, 213);
  margin-right: 3px;
}
*{
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="item">Maudie Mcmanus</div>
    <div class="item">Remedios Arrington</div>
    <div class="item">Chaya B</div>
    <div class="item">Duncan</div>
    <div class="item">Lashonda Tatum Walls</div>
</div>

Aquí un ejemplo de JSFiddle para jugar con

Lo más cercano que puede obtener con una solución CSS pura es usar columnas CSS como sugieren otros (o enfoque de cuadrícula CSS - Ver Editar). Sin embargo, la clave es usar unidades relativas y ser muy consciente de la ubicación y del contenedor de columnas en su diseño y usar consultas de medios para controlar el recuento de columnas. Esto es definitivamente NO una solución a prueba de balas. Sin embargo, si está creando el diseño y controla la ubicación y el alcance del elemento contenedor de columna, puede controle el recuento de columnas de forma bastante fiable. Si esto es para un widget que está fuera de su control, de hecho necesitará implementar una solución basada en Javascript.

Enlaces de referencia: Columnas CSS responsivas, Diseño de cuadrícula CSS

EDIT: Después de leer su pregunta de nuevo y mirar su ejemplo de captura de pantalla, parece que realmente está buscando una solución de cuadrícula CSS común donde los elementos fluyan horizontalmente y no verticalmente. Yo he actualizado mi respuesta es incluir un fragmento de demostración de esto donde los bloques vuelven a fluir horizontalmente.

Demostración de fragmentos con Consultas de medios basadas en columnas y Anchos de contenedor (ancho de columna mínimo aproximado de 10em):

#main, #sideBar {
    box-sizing:border-box;
    display:block;
    padding:0;
    margin:0;
    width:100%;
}

.container {
    width: 100%;
    min-width:10em;
    -webkit-columns: 1;
    -moz-columns: 1;
      columns: 1;
}
.container .item {
    display: block;
    padding: 8px;
    border: 1px solid rgb(216, 213, 213);
    box-sizing:border-box;
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */
}
@media only screen and (min-width:20em) {
    .container {
    -webkit-columns: 2;
    -moz-columns: 2;
      columns: 2;
    }
}

@media only screen and (min-width:32em) {
    #main {
        float:left;
        width:65%;
    }

    #sideBar {
        float:left;
        width:30%;
        margin-left:5%;
    }
    #sideBar .container {
    -webkit-columns: 1;
    -moz-columns: 1;
      columns: 1;
    }

}

@media only screen and (min-width:48em) {
    
    #main .container {
    -webkit-columns: 3;
    -moz-columns: 3;
      columns: 3;
    }

    #sideBar .container {
    -webkit-columns: 1;
    -moz-columns: 1;
      columns: 1;
    }

}

@media only screen and (min-width:52em) {
    
    #sideBar .container {
    -webkit-columns: 2;
    -moz-columns: 2;
      columns: 2;
    }

}

@media only screen and (min-width:100em) {
    
    #main .container {
    -webkit-columns: 5;
    -moz-columns: 5;
      columns: 5;
    }

    #sideBar .container {
    -webkit-columns: 3;
    -moz-columns: 3;
      columns: 3;
    }

}

<div id="main"><h1>#main</h1>
    <div class="container">
        <div class="item">Maudie Mcmanus</div>
        <div class="item">Remedios Arrington</div>
        <div class="item">Chaya B</div>
        <div class="item">Duncan</div>
        <div class="item">Lashonda Tatum Walls</div>
    </div>
</div>
<div id="sideBar"><h1>#sideBar</h1>
    <div class="container">
        <div class="item">Maudie Mcmanus</div>
        <div class="item">Remedios Arrington</div>
        <div class="item">Chaya B</div>
        <div class="item">Duncan</div>
        <div class="item">Lashonda Tatum Walls</div>
    </div>
</div>

EDITAR: Se ha añadido esta Demostración de fragmento utilizando un enfoque de cuadrícula CSS que re-fluye los bloques horizontalmente en lugar de verticalmente.

#main, #sideBar {
    box-sizing:border-box;
    display:block;
    padding:0;
    margin:0;
    width:100%;
    clear:left;
}

.container {
    width: 100%;
    min-width:10em;
}

.container .item {
    display: block;
    float:left;
    padding: .5em;
    border: 1px solid rgb(216, 213, 213);
    box-sizing:border-box;
    vertical-align: top;

}

@media only screen and (min-width:20em) {
    .container .item {
        margin: 0 1%;
        width:48%;
    }
}

@media only screen and (min-width:32em) {
    #main {
        float:left;
        width:65%;
    }

    #sideBar {
        float:left;
        clear:none;
        width:30%;
        margin-left:5%;
    }
    

    #sideBar .container .item {
        margin: 0;
        width:100%;
    }

}

@media only screen and (min-width:48em) {
    
    #main .container .item {
        width:31%;
    }

}

@media only screen and (min-width:52em) {
    
    #sideBar .container .item {
        margin: 0 1%;
        width:48%;
    }


}

@media only screen and (min-width:100em) {
    
    #main .container .item {
        width:18%;
    }

    #sideBar .container .item {
        width:31%;
    }

}

<div id="main"><h1>#main</h1>
    <div class="container">
        <div class="item">Maudie Mcmanus</div>
        <div class="item">Remedios Arrington</div>
        <div class="item">Chaya B</div>
        <div class="item">Duncan</div>
        <div class="item">Lashonda Tatum Walls</div>
    </div>
</div>
<div id="sideBar"><h1>#sideBar</h1>
    <div class="container">
        <div class="item">Maudie Mcmanus</div>
        <div class="item">Remedios Arrington</div>
        <div class="item">Chaya B</div>
        <div class="item">Duncan</div>
        <div class="item">Lashonda Tatum Walls</div>
    </div>
</div>

Así como muchos otros lo señalaron aquí, no hay una única solución CSS. Principalmente porque CSS fue diseñado para ser cargado antes del contenido dom para que el contenido se muestre muy bien. Nuestro principal problema aquí es que NO conocemos el ancho del elemento de antemano, solo lo sabremos cuando la página se haya cargado. Casi todas las soluciones en la página tienen la misma idea, use Javascript para recorrer los elementos, encontrar el más ancho y establecer todos los demás elementos (con la misma clase) al ancho dado. A mejorar el proceso y para que sea una solución de una línea (con jquery, se puede hacer con Javascript, así, pero por simplicidad he utilizado jQuery), sugiero el siguiente "hack / trick":

1) No defina el ancho de su contenedor, y establezca la pantalla en tabla en lugar de bloque;

2) No establezca ningún ancho para los elementos dentro del div

Esto hará que los elementos tengan el mismo ancho y se muestren en una columna, por lo que cuando usamos jQuery para obtener el ancho máximo no necesitamos hacer un bucle a través de los elementos.

Ahora use jQuery para inyectar reglas CSS adicionales en el encabezado del documento para el contenedor y para los elementos. Necesitamos cambiar el tipo de pantalla del contenedor de nuevo a bloque en lugar de tabla, establecer su ancho a 400px (o lo que sea que necesitemos) y necesitamos hacer los elementos bloques en línea con un ancho establecido.

Dado que CSS siempre está aplicando la última propiedad, esto será bastante fácil:

$("<style> .container {display: block; width:400px;} .item-min {width:"+$(".item-min").width()+"px;display:inline-block;}</style>").appendTo("head");

He actualizado su ejemplo de Violinista AQUÍ

Tengo probado en IE 12, Edge, Chorme y Firefox y funciona en todos los navegadores.

EDITAR 1

Si no desea usar jQuery para mantener la página lo más ligera posible, también puede usar el siguiente Javascript de línea:

document.head.innerHTML += "<style> .container {display: block; width:400px;} .item-min {width:"+(document.getElementsByClassName("container")[0].clientWidth-16-2)+"px;display:inline-block;}</style>";

Explicación Rápida: container clientWidth incluirá el relleno y el borde de los elementos, ya que el relleno en el ejemplo original es 8px y el borde es 1px necesitamos deducirlo dos veces (una vez a la izquierda una vez a la derecha) del ancho del contenedor.

Ver actualizado Violín

EDITAR 2

Un documento HTML completo:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <style type='text/css'>
    .container {

    display:table;
    table-layout:fixed;
}

.container .item-min {
    padding: 8px;
    border: 1px solid rgb(216, 213, 213);

}
  </style>


<script type='text/javascript'>
window.onload=function(){
document.head.innerHTML += "<style> .container {display: block; width:400px;} .item-min {width:"+(document.getElementsByClassName("container")[0].clientWidth-16-2)+"px;display:inline-block;}</style>";
}
</script>

</head>
<body>
      <div class="container">
        <div class="item-min">Maudie Mcmanus</div>
        <div class="item-min">Remedios Arrington</div>
        <div class="item-min">Chaya B</div>
        <div class="item-min">Duncan</div>
        <div class="item-min">Lashonda Tatum Walls</div>
    </div>


</body>

</html>

En primer lugar - Echa un vistazo a la Demostración de Violín (juega con el ancho de .container...)

Esto no es posible solo usando CSS, pero aquí hay una solución elegante usando jquery, que detecta el ancho del contenedor, el ancho del elemento más ancho y distribuye los elementos en el número relevante de columnas (creadas dinámicamente).

HTML

<p>Without width:
    <div class="container">
        <div class="item">Maudie Mcmanus</div>
        <div class="item">Remedios Arrington</div>
        <div class="item">Chaya B</div>
        <div class="item">Duncan</div>
        <div class="item">Lashonda Tatum Walls</div>
    </div>
</p>

Javascript

$(function(){
    var $items = $('.item');

    // detect the widest column's width
    var widestItemWidth = 0;
    $items.each(function(){
        widestItemWidth = Math.max(widestItemWidth, $(this).width());
    });

    // calculate the number of columns
    var $container = $('.container');
    var containerWidth = $container.width();
    var numOfColumns = parseInt(containerWidth / widestItemWidth);

    // create the columns
    for(var i = 0; i < numOfColumns; i++){
        $container.prepend('<div class="column"></div>');
    }
    var $columns = $('.column');
    $columns.css('width', (100/numOfColumns)+'%');

    // spread the items between the columns
    $items.each(function(i){
        var columnIndex = i % numOfColumns;
        $(this).appendTo($columns.eq(columnIndex));
    });
});

CSS

.container {
    width: 400px;
}
.container .column {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: text-top;
}
.container .item {
    display: inline-block;
    padding: 8px;
    border: 1px solid rgb(216, 213, 213);
}

Lo más fácil parecería establecer width en 32% más clear:none para todas las columnas y una clase clear:both separada por cada tercera (última) columna. Agregue consultas de medios para abordar diferentes tamaños de pantalla y establecer el ancho en consecuencia, por ejemplo, 24%, 48%, etc.

Prueba este ejemplo

@media only screen and (device-width : 300px) {#container {width:300px; display:block;}}
@media only screen and (device-width : 150px) {#container {width:150px; display:block; float:left}}
@media only screen and (device-width : 100px) {#container {width:150px; display:block; float:left}}