html - css grid layout responsive design

Cuadrícula de cuadrados receptivos

Question

Me pregunto cómo podría crear un diseño con cuadrados receptivos . Cada cuadrado tendría contenido alineado vertical y horizontalmente . El ejemplo específico se muestra a continuación ...

Answer 1

He escrito una biblioteca, que se llama simpleGrid , que hace precisamente eso, y lo bueno de esto es que puede manejar cualquier cantidad de elementos sin problemas de rendimiento. Ajusta la cantidad de elementos por fila automáticamente.

Si quieres que cada elemento tenga una relación de aspecto específica, entonces necesitas usar un trick para eso, que es bastante simple.

Answer 2

La respuesta aceptada es excelente, sin embargo, esto se puede hacer con flexbox .

Aquí hay un sistema de cuadrícula escrito con sintaxis BEM que permite que se muestren de 1 a 10 columnas por fila.

Si la última fila está incompleta (por ejemplo, elige mostrar 5 celdas por fila y hay 7 elementos), los artículos finales se centrarán horizontalmente. Para controlar la alineación horizontal de los elementos finales, simplemente cambie la propiedad .square-grid clase .square-grid .

.square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px black;
  overflow: hidden;
  position: relative;
}

.square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.square-grid__cell:after {
  content: '''';
  display: block;
  padding-bottom: 100%;
}

// Sizes – Number of cells per row

.square-grid__cell--10 {
  flex-basis: 10%;
}

.square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.square-grid__cell--8 {
  flex-basis: 12.5%;
}

.square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.square-grid__cell--5 {
  flex-basis: 20%;
}

.square-grid__cell--4 {
  flex-basis: 25%;
}

.square-grid__cell--3 {
  flex-basis: 33.333%;
}

.square-grid__cell--2 {
  flex-basis: 50%;
}

.square-grid__cell--1 {
  flex-basis: 100%;
}

.square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px black;
  overflow: hidden;
  position: relative;
}

.square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.square-grid__cell:after {
  content: '''';
  display: block;
  padding-bottom: 100%;
}

// Sizes – Number of cells per row

.square-grid__cell--10 {
  flex-basis: 10%;
}

.square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.square-grid__cell--8 {
  flex-basis: 12.5%;
}

.square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.square-grid__cell--5 {
  flex-basis: 20%;
}

.square-grid__cell--4 {
  flex-basis: 25%;
}

.square-grid__cell--3 {
  flex-basis: 33.333%;
}

.square-grid__cell--2 {
  flex-basis: 50%;
}

.square-grid__cell--1 {
  flex-basis: 100%;
}

<div class=''square-grid''>
  <div class=''square-grid__cell square-grid__cell--7''>
    <div class=''square-grid__content''>
      Some content
    </div>
  </div>
  <div class=''square-grid__cell square-grid__cell--7''>
    <div class=''square-grid__content''>
      Some content
    </div>
  </div>
  <div class=''square-grid__cell square-grid__cell--7''>
    <div class=''square-grid__content''>
      Some content
    </div>
  </div>
  <div class=''square-grid__cell square-grid__cell--7''>
    <div class=''square-grid__content''>
      Some content
    </div>
  </div>
  <div class=''square-grid__cell square-grid__cell--7''>
    <div class=''square-grid__content''>
      Some content
    </div>
  </div>
  <div class=''square-grid__cell square-grid__cell--7''>
    <div class=''square-grid__content''>
      Some content
    </div>
  </div>
  <div class=''square-grid__cell square-grid__cell--7''>
    <div class=''square-grid__content''>
      Some content
    </div>
  </div>
  <div class=''square-grid__cell square-grid__cell--7''>
    <div class=''square-grid__content''>
      Some content
    </div>
  </div>
</div>

Fiddle: https://jsfiddle.net/patrickberkeley/noLm1r45/3/

Esto se prueba en FF y Chrome.

Answer 3

Podría usar unidades vw (ancho de vista), que harían que los cuadrados respondan según el ancho de la pantalla.

Una maqueta rápida de esto sería:

html,
body {
  margin: 0;
  padding: 0;
}
div {
  height: 25vw;
  width: 25vw;
  background: tomato;
  display: inline-block;
  text-align: center;
  line-height: 25vw;
  font-size: 20vw;
  margin-right: -4px;
  position: relative;
}
/*demo only*/

div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  background: rgba(200, 200, 200, 0.6);
  transition: all 0.4s;
}
div:hover:before {
  background: rgba(200, 200, 200, 0);
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

Answer 4

Puede hacer cuadrículas de cuadrados receptivos con contenido vertical y centrado horizontalmente solo con CSS . Explicaré cómo en un proceso paso a paso, pero primero aquí hay 2 demostraciones de lo que puede lograr:

• Cuadrícula de imágenes cuadradas
• Cuadrícula de cuadrados con contenido

¡Ahora veamos cómo hacer estos cuadrados de respuesta elegantes!

1. Hacer los cuadrados responsivos:

El truco para mantener los elementos en forma cuadrada (o en cualquier otra relación de aspecto) es usar el porcentaje de padding-bottom .
Nota al margen: también puede usar el margen superior o el margen superior / inferior, pero el fondo del elemento no se mostrará.

Como el relleno superior se calcula de acuerdo con el ancho del elemento principal ( consulte MDN para referencia ), la altura del elemento cambiará de acuerdo con su ancho. Ahora puede mantener su relación de aspecto de acuerdo con su ancho.
En este punto, puedes codificar:

HTML :

 <div></div>

CSS

div {
    width: 30%;
    padding-bottom: 30%; /* = width for a square aspect ratio */
}

Aquí hay un ejemplo de diseño simple de cuadrícula de 3 * 3 cuadrados usando el código anterior.

Con esta técnica, puede hacer cualquier otra relación de aspecto, aquí hay una tabla que muestra los valores de relleno de fondo de acuerdo con la relación de aspecto y un ancho del 30%.

 Aspect ratio  |  padding-bottom  |  for 30% width
------------------------------------------------
    1:1        |  = width         |    30%
    1:2        |  width x 2       |    60%
    2:1        |  width x 0.5     |    15%
    4:3        |  width x 0.75    |    22.5%
    16:9       |  width x 0.5625  |    16.875%

2. Agregar contenido dentro de los cuadrados

Como no puede agregar contenido directamente dentro de los cuadrados (expandiría su altura y los cuadrados ya no serían cuadrados), necesita crear elementos secundarios (para este ejemplo estoy usando divs) dentro de ellos con la position:abolute; y pon el contenido dentro de ellos. Esto eliminará el contenido del flujo y mantendrá el tamaño del cuadrado.

No olvides agregar position:relative; en los padres div para que los niños absolutos se posicionen / dimensionen relativamente a su padre.

Vamos a agregar algo de contenido a nuestra cuadrícula de cuadrados 3x3:

HTML :

<div class="square">
    <div class="content">
        .. CONTENT HERE ..
    </div>
</div>
... and so on 9 times for 9 squares ...

CSS :

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
}

.content {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}

RESULT <- con algún formato para hacerlo bonito!

3. Entrar en el contenido

Horizontaly:

Esto es bastante fácil, solo necesita agregar text-align:center to .content .
RESULT

Alineamiento vertical

¡Esto se vuelve serio! El truco es usar

display:table;
/* and */
display:table-cell;
vertical-align:middle;

pero no podemos usar display:table; en .square o .content divs porque entra en conflicto con position:absolute; entonces necesitamos crear dos hijos dentro de divs .content . Nuestro código se actualizará de la siguiente manera:

HTML :

<div class="square">
    <div class="content">
        <div class="table">
            <div class="table-cell">
                ... CONTENT HERE ...
            </div>
        </div>
    </div>
</div>
... and so on 9 times for 9 squares ...

CSS:

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
}

.content {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}
.table{
    display:table;
    height:100%;
    width:100%;
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;
}

Ya hemos terminado y podemos ver el resultado aquí:

RESULTADO EN PANTALLA COMPLETA EN DIRECTO

violín editable aquí

Answer 5

Utilizo esta solución para cajas receptivas de diferentes raciones:

HTML:

<div class="box ratio1_1">
  <div class="box-content">
            ... CONTENT HERE ...
  </div>
</div>

CSS:

.box-content {
  width: 100%; height: 100%;
  top: 0;right: 0;bottom: 0;left: 0;
  position: absolute;
}
.box {
  position: relative;
  width: 100%;
}
.box::before {
    content: "";
    display: block;
    padding-top: 100%; /*square for no ratio*/
}
.ratio1_1::before { padding-top: 100%; }
.ratio1_2::before { padding-top: 200%; }
.ratio2_1::before { padding-top: 50%; }
.ratio4_3::before { padding-top: 75%; }
.ratio16_9::before { padding-top: 56.25%; }

Vea la demostración en JSfiddle.net