Alineado a la izquierda última fila en la cuadrícula de elementos centrada

Tengo un montón de bloques del mismo tamaño configurados para display:inline-block en display:inline-block dentro de un div que tiene text-align:center set para alinear los bloques.

 | _____ _____ _____ _____ | | | | | | | | | | | | | 1 | | 2 | | 3 | | 4 | | | |_____| |_____| |_____| |_____| | | _____ _____ _____ _____ | | | | | | | | | | | | | 5 | | 6 | | 7 | | 8 | | | |_____| |_____| |_____| |_____| | | | 

Los bloques llenan el div horizontalmente, y a medida que la ventana del navegador se reduce, algunos bloques se dividen en líneas nuevas, creando más filas y menos columnas. Quiero que todo permanezca centrado, con la última fila alineada a la izquierda, como esta:

 | _____ _____ _____ | | | | | | | | | | | 1 | | 2 | | 3 | | | |_____| |_____| |_____| | | _____ _____ _____ | | | | | | | | | | | 4 | | 5 | | 6 | | | |_____| |_____| |_____| | | _____ _____ | | | | | | | | | 7 | | 8 | | | |_____| |_____| | | | 

Lo que sucede actualmente es esto:

 | _____ _____ _____ | | | | | | | | | | | 1 | | 2 | | 3 | | | |_____| |_____| |_____| | | _____ _____ _____ | | | | | | | | | | | 4 | | 5 | | 6 | | | |_____| |_____| |_____| | | _____ _____ | | | | | | | | | 7 | | 8 | | | |_____| |_____| | | | 

No puedo agregar divisiones de relleno adicionales como una sugerencia, porque podría haber varios bloques y la cantidad de filas y columnas variará según el ancho del navegador. Tampoco puedo escribir el bloque 7 directamente, por el mismo motivo. Los bloques siempre deben permanecer centrados sin importar cuántas columnas.

Aquí hay un bolígrafo para demostrar mejor:

es posible? Siento que debería estar seguro. Preferiría no usar flexbox ya que solo es ie10 +, y me gustaría ie9 +. Realmente me gustaría una solución pura de CSS, pero si me dicen que JS es la única manera, me encantaría ver eso en acción.

Para referencia, preguntas similares, aunque ninguna fue explicada completamente:

Cómo alinear la última fila / línea izquierda en la línea flexible múltiple

CSS: alineado a la izquierda la última fila de imágenes en un div centrado

Repare la última línea de elementos en la rejilla del contenedor de fluido para dejarla alineada mientras el contenedor permanece centrado

Centre múltiples bloques en línea con CSS y alinee la última fila a la izquierda

Aquí hay una solución de JavaScript muy simple (y algunos pequeños cambios en su CSS):

http://jsfiddle.net/ha68t/

Esta trabajando bien para mi.

CSS:

 .container { margin: 0 auto; max-width:960px; background-color: gold; } .block { background-color: #ddd; border:1px solid #999; display: block; float: left; height: 100px; margin: 4px 2px; width: 100px; } 

JavaScript:

 $(document).ready(function(){ setContainerWidth(); }); $(window).resize(function(){ setContainerWidth(); }); function setContainerWidth() { $('.container').css('width', 'auto'); //reset var windowWidth = $(document).width(); var blockWidth = $('.block').outerWidth(true); var maxBoxPerRow = Math.floor(windowWidth / blockWidth); $('.container').width(maxBoxPerRow * blockWidth); } 

jQuery es obligatorio 🙂

Solución con display inline-block

Esta red adaptativa es mucho más simple: menos marcado y menos CSS, por lo que será más fácil de implementar en un sitio de producción y se adaptará a sus necesidades exactas.

= >> DEMO << = (cambiar el tamaño de la ventana de resultados para ver el efecto)

 html, body { margin:0; padding:0; } #container{ font-size:0; margin:0 auto; width:1000px; } .block { font-size:20px; width: 150px; height: 150px; margin:25px; background: gold; display:inline-block; } @media screen and (max-width: 430px) { #container{ width:200px; } } @media screen and (min-width: 431px) and (max-width: 630px) { #container{ width:400px; } } @media screen and (min-width: 631px) and (max-width: 830px) { #container{ width:600px; } } @media screen and (min-width: 831px) and (max-width: 1030px) { #container{ width:800px; } } 
 
1
2
3
4
5
6
7
8
9
10
11
12
13

Por lo que vale: ahora es 2017 y el módulo de diseño de cuadrícula lo hace de la caja

 * { margin:0; padding:0; } .container { display: grid; grid-template-columns: repeat(auto-fill, 100px); grid-gap: 10px; justify-content: center; align-content: flex-start; margin: 0 auto; text-align: center; margin-top: 10px; } .block { background-color: #ddd; border: 1px solid #999; height: 100px; width: 100px; } 
 
Foo
Foo
Foo
Foo
Foo
Foo
Foo
Foo
Foo
Foo
Foo
Foo
Foo
Foo
Foo
Foo
Foo
Foo
Foo
Foo
Foo
Foo
Foo

Con flexbox, algunos pseudoelementos, un div adicional, y después de mucha frustración pude lograr esto sin consultas de medios (ya que necesitaba poner mi grilla dentro de muchos elementos de diferentes tamaños, las consultas de los medios no me funcionarían realmente) .

Una advertencia: los canales entre los elementos son fluidos.

Demostración: http://codepen.io/anon/pen/OXvxEW

CSS:

 .wrapper { display: flex; flex-wrap: wrap; border: 2px solid #ffc0cb; max-width: 1100px; margin: 0.5rem auto; justify-content: center; } .wrapper:after { content: ' '; flex: 1; height: 100%; border: 1px solid #00f; margin: 0.5rem; } .child { flex: 1; border: 2px solid #ffa500; min-width: 300px; margin: 0.5rem; text-align: center; } .child-contents { width: 300px; border: 2px solid #008000; height: 100px; margin: 0 auto; } 

HTML:

 
...etc., more .child's...

El resultado final es algo como esto, donde los rectangularjs verdes son divs. Los bordes rosa / naranja son solo de referencia para que pueda ver lo que está pasando. Si quita los bordes rosa / naranja, debe obtener la cuadrícula que está buscando ( aunque, una vez más, tenga en cuenta que la canaleta es fluida ).

enter image description here

Use flexbox:

 .container { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; flex-wrap:wrap; } .block { background-color: #ddd; border:1px solid #999; display: inline-block; height: 100px; margin: 4px 2px; width: 100px; } 

Hecho.

Hasta la fecha, la única solución limpia para esto es con el

Módulo de diseño de cuadrícula CSS ( demo de Codepen )

Básicamente, el código relevante necesario se reduce a esto:

 ul { display: grid; /* (1) */ grid-template-columns: repeat(auto-fill, 120px); /* (2) */ grid-gap: 1rem; /* (3) */ justify-content: center; /* (4) */ align-content: flex-start; /* (5) */ } 

1) Hacer que el contenedor sea un contenedor de red

2) Establezca la cuadrícula con una cantidad ‘automática’ de columnas de ancho 120px. (El valor de autocompletar se usa para diseños receptivos).

3) Establecer espacios / canaletas para las filas y columnas de la cuadrícula.

4) y 5) – Similar a flexbox.

 body { margin: 0; } ul { display: grid; grid-template-columns: repeat(auto-fill, 120px); grid-gap: 1rem; justify-content: center; align-content: flex-start; /* boring properties: */ list-style: none; width: 90vw; height: 90vh; margin: 2vh auto; border: 5px solid green; padding: 0; overflow: auto; } li { background: tomato; height: 120px; } 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

No existe una solución “normal” para su problema, pero solo las “soluciones” mencionadas.

La situación es que su contenedor de bloques llenará el espacio disponible hasta el máximo disponible / configuración y luego dividirá todos los bloques internos en la siguiente línea, lo que provocará que el contenedor se desborde. También con otras configuraciones como flotar será el mismo comportamiento. Esa es la forma en que funciona el renderizado: cada vez codiciosos en el espacio para calcular el comportamiento de los elementos internos.

Tal vez los futuros Flexboxes lo hagan posible, pero no leí las especificaciones completas. Solo una suposición…

Prueba esto con CSS simple:

CSS:

.row {text-align: center; font-size: 0;} .block {text-align: center; display: inline-block; width: 150px; height: 15px; margin: 5px; border: 1px solid #dddddd; font-size: 13px;}

HTML:

 
 .row{text-align:center;font-size:0;} .block{text-align:center;display:inline-block;width:150px;height:150px;margin:5px; border:1px solid #dddddd;font-size:13px;line-height:150px;} 
 
1
2
3
4
5
6
7
8