css3 - texto - grid css responsive

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

Question

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:

http://codepen.io/anon/pen/IDsxn

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

Answer 1

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;
    }
}

<div id="container">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>
    <div class="block">8</div>
    <div class="block">9</div>
    <div class="block">10</div>
    <div class="block">11</div>
    <div class="block">12</div>
    <div class="block">13</div>
</div>

Implica:

1. 4 consultas de medios para bloques de 200 píxeles de ancho y un contenedor ampliable a 1000 píxeles. Dependiendo del ancho de los elementos de su grilla y del ancho total de su contenedor, puede que tenga que hacer menos o más

2. eliminar espacios en blanco entre elementos de bloque en línea (en la siguiente demostración usé la técnica de tamaño de fuente, pero puede usar otros (consulte Cómo quitar el espacio entre elementos de bloque en línea? para otras técnicas)

3. Márgenes fijos entre bloques

La cantidad de bloques en una línea se adapta al tamaño del contenedor. La propiedad de text-align permanece en el valor predeterminado, por lo que los últimos elementos están alineados a la izquierda.

Flotadores con márgenes de adaptación entre ambos bloques y contenedor

= >> DEMO << = (debe cambiar el tamaño de la ventana de resultados a 750 px para verla en acción)

html, body {
    margin:0;
    padding:0;
    min-width:150px;
}
.wrap {
    float:left;
    position:relative;
}
.foto {
    width: 150px;
    height: 150px;
    background: gold;
    position:absolute;
}

#warning{display:none;}
@media screen and (min-width: 631px) {
    .wrap {
        width:20%;
        padding-bottom:25%;
    }
    .wrap:nth-child(4n+2), .wrap:nth-child(4n+3){
        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-30px;
    }
    .wrap:nth-child(4n+2){
        margin:0 5% 0 7.5%;
    }
    .wrap:nth-child(4n+3){
     margin-right:7.5%;
    }
    .wrap:nth-child(4n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
    .wrap:nth-child(4n+3) .foto{
        right:50%;
        margin-right:-75px;
    }
    .wrap:nth-child(4n) .foto{
        left:-30px;
    }   
    #container{
        margin-top:-45px;
    }
}

@media screen and (min-width: 481px) and (max-width: 631px) {
    .wrap {
        width:25%;
        padding-bottom:33.3%;
    }
    .wrap:nth-child(3n+2){
        margin:0 12.5%;        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-37px;
    }
     .wrap:nth-child(3n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
     .wrap:nth-child(3n) .foto{
        left:-37px;
    }
    #container{
        margin-top:-37px;
    }
}


@media screen and (min-width: 331px) and (max-width: 480px) {
    .wrap {
        width:33.3%;
        padding-bottom:50%;
        clear:left;
    }
    .wrap:nth-child(even) {
        float:right;
        clear:right;
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-50px;
    }
    .wrap:nth-child(even) .foto {
        left:-50px;
    }
    .wrap:nth-child(4n+3) .foto, .wrap:nth-child(4n+4) .foto {
        bottom:-75px;
        margin-bottom:100%;
    }
    #container{
        margin-top:-25px;
    }
}


@media screen and (max-width: 330px) {
    .wrap {
        width:50%;
        padding-bottom:100%;
        clear:left;
    }
    .wrap:nth-child(odd) .foto {
        right:-75px;
        bottom:0;
        bottom:-75px;
        margin-bottom:100%;
    }
    .wrap:nth-child(even) .foto {
        top:0px;
        right:-75px;
        top:-75px;
        margin-top:100%;
    }
}

@media screen and (min-width: 751px) {
    #warning{
        color:#fff;
        display:block;
        position:fixed;
        width:100%;
        height:50%;
        top:25%;
        left:0;
        background:#000;
        text-align:center;
        font-size:30px;
}

<div id="container">
    <div class="wrap"><div class="foto">1</div></div>
    <div class="wrap"><div class="foto">2</div></div>
    <div class="wrap"><div class="foto">3</div></div>
    <div class="wrap"><div class="foto">4</div></div>
    <div class="wrap"><div class="foto">5</div></div>
    <div class="wrap"><div class="foto">6</div></div>
    <div class="wrap"><div class="foto">7</div></div>
    <div class="wrap"><div class="foto">8</div></div>
    <div class="wrap"><div class="foto">9</div></div>
    <div class="wrap"><div class="foto">10</div></div>
    <div class="wrap"><div class="foto">11</div></div>
    <div class="wrap"><div class="foto">12</div></div>
    <div class="wrap"><div class="foto">13</div></div>
    <div class="wrap"><div class="foto">14</div></div>
    <div class="wrap"><div class="foto">15</div></div>
</div>

<!-- FOLLOWING JUST FOR THE DEMO -->
<div id="warning">I haven''t written the code for windows bigger than 751px.<br/>
    You must resize this window under 751px.</div>

Esta técnica implica:

1. carrozas
2. position:absolute;
3. :nt-child() selector css :nt-child()
4. preguntas de los medios

Centra los bloques en su contenedor y da el mismo margen en la parte superior / izquierda / apretada / inferior de todos los bloques + lados del contenedor. Como esta solución usa flotadores, la última fila está alineada a la izquierda.

La cantidad de bloques en una línea se adapta al ancho de la ventana.

Answer 2

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 :)

Answer 3

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:

<div class=''wrapper''>
    <div class=''child''>
        <div class=''child-contents''></div>
    </div>
    <div class=''child''>
        <div class=''child-contents''></div>
    </div>
    <div class=''child''>
        <div class=''child-contents''></div>
    </div>

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

</div>

El resultado final es algo como esto, donde los rectángulos 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 ).

Answer 4

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;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

Demo de Codepen (Cambie el tamaño para ver el efecto)

Soporte del navegador - Caniuse

Actualmente compatible con Chrome (Blink) y Firefox, con soporte parcial de IE y Edge (Ver esta publicación de Rachel Andrew)

Lectura adicional en grillas de CSS:

• MDN
• Jen Simmons - Aprende la cuadrícula CSS
• Una guía completa de CSS Grid | Codrops CSS Reference
• Una guía completa de Grid: trucos de CSS

Answer 5

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...

Answer 6

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;
}

<div class="container">
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
</div>

(Demo Codepen) .

Si la compatibilidad con el navegador le conviene, entonces use la cuadrícula. Si no, entonces sigue leyendo ....

Como se menciona en la respuesta de @ Web-tiki, lo mejor que puedes hacer con CSS es con una serie de consultas de medios.

Dicho esto, si está utilizando un preprocesador como LESS, esta no es una tarea tan difícil o propensa a errores. (aunque, sí, el CSS seguirá siendo largo y feo)

CODEPEN ACTUALIZADO (Cambia el tamaño de la ventana para ver los resultados)

A continuación, le indicamos cómo aprovechar LESS para configurar las consultas de medios:

Primero configure algunas variables menos según el diseño que necesite:

@item-width:100px;
@item-height:100px;
@marginV: 4px;
@marginH: 2px;
@min-cols:2;
@max-cols:9; //set an upper limit of how may columns you want to write the media queries for

Entonces:

Configure una iteración mixin como esta: (Puede pegar este código en http://less2css.org )

.loopingClass (@index-width) when (@index-width <= @item-width * @max-cols) {
    @media (min-width:@index-width) {
        .container{
            width: @index-width;
        }
    }

    .loopingClass(@index-width + @item-width + 2*@marginH);
}

.loopingClass (@item-width * @min-cols + @min-cols*@marginH*2);

La mezcla anterior escupirá una serie de consultas de medios en la forma:

@media (min-width: 208px) {
  .container {
    width: 208px;
  }
}
@media (min-width: 312px) {
  .container {
    width: 312px;
  }
}
@media (min-width: 416px) {
  .container {
    width: 416px;
  }
}
@media (min-width: 520px) {
  .container {
    width: 520px;
  }
}
@media (min-width: 624px) {
  .container {
    width: 624px;
  }
}
@media (min-width: 728px) {
  .container {
    width: 728px;
  }
}
@media (min-width: 832px) {
  .container {
    width: 832px;
  }
}

Con CSS restante (MENOS):

.container {
  margin: 0 auto;
  text-align: center;
  overflow: auto;
    min-width: @min-cols * @item-width;
    max-width: @max-cols * @item-width;
    display: block;
    list-style:none;
}
.block {
  background-color: #ddd;
  border:1px solid #999;
  box-sizing:border-box;
  float: left;
  height: @item-height;
  width: @item-width;
  margin:@marginV @marginH;
}

... obtienes el resultado deseado.

... y es muy fácil personalizar el diseño:

Todo lo que necesito hacer es cambiar las variables que utilicé en la mezcla LESS de acuerdo con mis necesidades. Obtengo el diseño exacto que busco.

Answer 7

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:

<div class="row">
  <div class="block"></div> 
</div>

.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;}

<div class="row">
      <div class="block">1</div> 
      <div class="block">2</div> 
      <div class="block">3</div> 
      <div class="block">4</div> 
      <div class="block">5</div> 
      <div class="block">6</div> 
      <div class="block">7</div> 
      <div class="block">8</div> 
    </div>

Answer 8

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.