1

Me entregaron para maquetar un diseño como el siguiente:

FOTO

Conozco de antemano tamaños de fotos y no van a cambiar.

El diseño parece un efecto masonry pero debido a que todos los elementos tienen que acabar alineados abajo y además existe el bloque de texto de fondo azul que ocupa 2 columnas, pensé en utilizar css grid.

1. - PRUEBA CON CSS GRID

Por defecto las filas en css grid conservan la altura del item mayor que contienen, con lo que por defecto no me servía para poner un elemento debajo de otro a diferentes alturas como en el diseño de muestra y tuve que recurrir a una técnica que encontré en la que se definía la altura de las filas dentro del grid en incrementos de 1 pixel de la siguiente manera:

/*Para el elemento grid usar*/
    grid-auto-rows: minmax(1px, auto);

Posteriormente a cada item se define cuanta altura en pixels ocupa con este valor css:

/*Para los items del grid usar*/
grid-row-end: span 258; /*con la altura en pixeles correspondiente a la altura de la imagen*/

2. - CÓDIGO USADO

Este es el html completo del ejemplo:

.grid-home01 {
  display: grid;
  grid-column-gap: 15px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  grid-auto-rows: minmax(1px, auto);
}

.item {
  background-color: grey;
  margin-bottom: 15px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.item-span2 {
  grid-column-end: span 8;
}

.item-spanall {
    grid-column-end: span 12;
}

.item p {
  margin-bottom: 0
}

.wrapper-foto {
  position: relative;
  height: 100%;
}

.hover-foto-effect {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  background-color: #ffffffe3;
  opacity: 0;
  -webkit-transition-duration: 5s;
  /* Safari */
  transition-duration: 0.25s;
  -webkit-transition-timing-function: ease-in;
  /* Safari and Chrome */
  transition-timing-function: ease-in;
}

.hover-foto-effect:hover {
  opacity: 1;
}

.frase-beige {
    background-color: #f1ede5;
    padding: 15px;
    text-align: center;
    font-size: 25px;
    grid-row-end: span 75;
}

.frase-azul {
  background-color: #b7dae4;
  padding: 20px;
  text-align: center;
  font-size: 25px;
  grid-row-end: span 89;
}

.item02 {
  background-image: url("http://netropol.es/novo/wp-content/uploads/foto01.jpg");
  grid-row-end: span 258;
  grid-column-end: span 4;
}

.item03 {
  background-image: url("http://netropol.es/novo/wp-content/uploads/foto-02.jpg");
  grid-row-end: span 461;
  grid-column-end: span 4;
}

.item04 {
  background-image: url("http://netropol.es/novo/wp-content/uploads/funghipack.gif");
  grid-row-end: span 558;
  grid-column-end: span 4;
}

.item05 {
  background-image: url("http://netropol.es/novo/wp-content/uploads/umami-web.jpg");
  grid-row-end: span 503;
  grid-column-end: span 4;
}

.item06 {
  background-image: url("http://netropol.es/novo/wp-content/uploads/botellas.jpg");
  grid-row-end: span 300;
  grid-column-end: span 4;
}

.item07 {
  background-image: url("http://netropol.es/novo/wp-content/uploads/pepe-cerda.jpg");
  grid-row-end: span 292;
  grid-column-end: span 4;
}

@media (max-width:768px) {
  .item {
    grid-column-end: span 12;
  }
}
<div class="grid-home01">
  <div class="item item-spanall frase-beige">
    <p>Creamos experiencias que implican todos los sentidos</p>
    <p></p>
  </div>
  <div class="item item02">
    <div class="wrapper-foto">
      <div class="hover-foto-effect">
        <p class="home-title-project">Artesanía + Diseño</p>
      </div>
    </div>
  </div>
  <div class="item item03">
    <div class="wrapper-foto">
      <div class="hover-foto-effect">
        <p class="home-title-project">Jaulas para pájaros</p>
      </div>
    </div>
  </div>
  <div class="item item04">
    <div class="wrapper-foto">
      <div class="hover-foto-effect">
        <p class="home-title-project">Cajas de setas</p>
      </div>
    </div>
  </div>
  <div class="item item05">
    <div class="wrapper-foto">
      <div class="hover-foto-effect">
        <p class="home-title-project">Umami</p>
      </div>
    </div>
  </div>
  <div class="item item06">
    <div class="wrapper-foto">
      <div class="hover-foto-effect">
        <p class="home-title-project">Agua</p>
      </div>
    </div>
  </div>
  <div class="item item07">
    <div class="wrapper-foto">
      <div class="hover-foto-effect">
        <p class="home-title-project">Logos</p>
      </div>
    </div>
  </div>
  <div class="item item-span2 frase-azul">
    <p>
      <strong>La belleza es un estado de ánimo.</strong> Émile Zola
    </p>
    <p></p>
  </div>
</div>

Y aquí la maquetacion completa: http://netropol.es/novo/

3. - ERRORES

Visualizado desde pantalla de ordenador todo se ve correcto. El problema es el responsive que al tener los items una altura fija definida en pixeles y pasar a 1 columna de anchura 100% la proporción del elemento que contiene la foto cambia y algunas fotos quedan muy cortadas.

También he visto que con Chrome esta técnica corta el grid a partir de una altura máxima y no visulaiza el resto, sin embargo en Firefox parece que lo hace correctamente. Esto se puede comprobar al reducir la anchura del navegador cuando el grid pasa a 1 columna.

Ejemplo de Chrome que parece tener un limite en la altura que puede mostrar del grid por lo que elementos bajo esa altura quedan ocultos:

introducir la descripción de la imagen aquí

4. - SUGERENCIAS DE MAQUETACIÓN

Mi pregunta concreta es. Si os entregan ese diseño original y sabiendo que flexbox (hasta donde yo se) se usa o para filas o para columnas no para ambos y en este caso tenemos items en columnas e items en filas (el cuadro azul de texto que se expande 2 columnas).

Lo fácil es que conocemos de antemano las medidas de todas las fotos.

¿Que solución con CSS usaríais para maquetar este diseño? ¿Floats?

2
  • Yo creo que es un poco arriesgado maquetarlo con grid en producción real, precisamente porque aún no esta implementado del todo (aunque se prevé que al final de año posiblemente esté), te sugiero usar algo como postcss para que al menos esté soportando, pero de momento yo te recomiendo 100% flexbox. Grid, está genial de momento para demos y experimentos. Commented el 18 ene. 2018 a las 20:26
  • Gracias por la respuesta @EdgarGutiérrez Es cierto que grid es experimental todavía, por eso buscaba otro acercamiento a este diseño concreto. Como el diseño tiene elementos en filas y columnas pero también elementos que se expanden varias columnas, sospecho que Flexbox no es del todo apropiado si solo se debe usar para 1 dimensión (o filas o columnas no ambas).
    – xaifu
    Commented el 19 ene. 2018 a las 11:39

1 respuesta 1

1

Solución fácil a tu pregunta no hay, por lo que te comentaba sobre la falta de practicidad e incompatibilidad que tiene actualmente css-grid entre los distintos navegadores.

Ahora tu pregunta era:

¿cual seria la mejor forma de maquetar este diseño solo con css?

Esa misma rejilla se podría lograr con floats o flexbox, pero agrupando los divs de cada foto por grupos para lograr las columnas tal cual. Con la contra de tener que agregar más código del existente. Así:

<section class="grid-home01">
  <div class="item item01 fondo-cl-01">
    <p>Creamos experiencias que implican todos los sentidos</p>
  </div>
<!Aqui iria el contenedor de las 4 fotos de la izquierda-->
  <div class="col-group container">
<!Aqui iria el contenedor de la 1ra columna de la izquierda-->
    <article class="col-group">
      <div class="item item02">
        <p>Creamos experiencias que implican todos los sentidos</p>
      </div>
      <div class="item item03">
        <p class="home-title-project">Artesanía + Diseño</p>
      </div>
    </article>
<!Aqui iria el contenedor de la 2da columna de la izquierda-->
    <article class="col-group">
      <div class="item item04">
        <p class="home-title-project">Jaulas para pájaros</p>
      </div>
      <div class="item item05">
      <p class="home-title-project">Cajas de setas</p>
      </div>
    </article>
<!Aqui iria el contenedor del párrafo que sería del tamaño de las dos columnas-->
    <div class="item item06 fondo-cl-02">
      <p class="home-title-project"><b>La belleza es un estado de ánimo.</b> Émile Zola</p>
    </div>
  </div>
<!Aqui iria el contenedor del grupo de la derecha-->
  <article class="col-group">
    <div class="item item07">
      <p class="home-title-project">Umami</p>
    </div>
    <div class="item item08">
      <p class="home-title-project">Agua</p>
    </div>
  </article>
</section>  

Sin embargo dándole más vueltas y tratando de ver en qué forma podríamos recrear el mismo tipo de grid, por lo que me puse a experimentar usando una mezcla de flexbox, posiciones absolutas la función css: calc y las variables css.

Yo lo hice así (prueba cambiando el tamaño de la ventana teniendo la demo en full screen) y de paso elimine ciertos elementos html, que a me parecer estaban de más:

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root{
  --alfa: rgba(255, 255, 255, 0);
  --gris-oscuro: rgba(58, 58, 58, 1);
  --azul-claro: rgba(183, 218, 228, 1);
  --crema: rgba(241, 237, 229, 1);
  --blanco-alfa08: rgba(255, 255, 255, 0.8);
}

body{
  --color1: var(--crema);
  --color2: var(--azul-claro);
  
  --img0: url('http:picsum.photos/600/1200');
  --img1: url('http://netropol.es/novo/wp-content/uploads/foto01.jpg');
  --img2: url('http://netropol.es/novo/wp-content/uploads/umami-web.jpg');
  --img3: url('http://netropol.es/novo/wp-content/uploads/foto-02.jpg');
  --img4: url('http://netropol.es/novo/wp-content/uploads/botellas.jpg');
  --img5: url('http://netropol.es/novo/wp-content/uploads/funghipack.gif');
  --img6: url('http://netropol.es/novo/wp-content/uploads/pepe-cerda.jpg');
}

.color-01 { color: var(--color1) } 
.color-02 { color: var(--color2) } 
.fondo-cl-01 { background-color: var(--color1) } 
.fondo-cl-02 { background-color: var(--color2) } 

.grid-home01{
  --col-m: calc( var(--gap ) / 2); /*Margenes y Paddings*/
  --row-m: calc( var(--gap ) * (var(--n-row) + 1) ); /* Suma de margenes en las filas*/
  --row-g: calc( ( var(--max-h) - var(--row-m) ) / 10 ); /*Altura filas*/
  --col-g: calc( var(--gap) * var(--n-col) ); /*Suma de margenes de las columnas*/
  --s-col: calc( (100% - var(--col-g) ) / var(--n-col) ); /*Ancho de columnas*/
  --col-t: calc( var(--s-col) * var(--n-col) ); /*Ancho total posible*/
  --h-x: var(--h-i-01);
  --h-item: calc( var(--row-g) * var(--h-x) );
  --padding-tb: calc( var(--h-item) + var(--gap) + var(--col-m));

  height: var(--max-h);
  padding: var(--padding-tb) var(--col-m);
  color: var(--gris-oscuro);
  background-color: var(--gris-oscuro);
  flex-direction: column;
  
  display: flex;
  position: relative;
  flex-wrap: wrap;
  width: 100%;
  font-family: sans-serif;
  max-width: 50em;
  margin: auto;
}

.grid-home01 .item{
  --h-x: var(--h-i-01);
  --h-item: calc( var(--row-g) * var(--h-x) );
  display: inline-flex;
  width: var(--s-col) ;
  height: var(--h-item) ;
  background-size: cover;
  background-position: center;
  padding: var(--col-m) ;
  margin: var(--col-m) ;
  justify-content: center;
  align-content: center;
  align-items: center;
  height: var(--h-item);
  position: relative;
}

.grid-home01 .item02{  
  background-image: var(--img1) ;
}
.grid-home01 .item03{  
  background-image: var(--img2) ;
}
.grid-home01 .item04{  
  background-image: var(--img3) ;
}
.grid-home01 .item05{  
  background-image: var(--img4) ;
}
.grid-home01 .item06{  
  background-image: var(--img5) ;
}
.grid-home01 .item07{  
  background-image: var(--img6) ;
}

.grid-home01 .item:not(.item01):not(.item08) p,
.grid-home01 .item:not(.item01):not(.item08)::before{
  opacity: 0;  
  transition: all ease-in .2s;
}

.grid-home01 .item:hover p,
.grid-home01 .item:hover::before{
  opacity: 1;
}

.grid-home01 .item:not(.item01):not(.item08)::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  background-color: var(--blanco-alfa08);
  z-index: 1;
}

.grid-home01 .item p{
  position: relative;
  z-index: 2;
}

.grid-home01 .item01{
  --h-x: var(--h-i-01);
  width: var(--col-t);
  position: absolute;
  left: var(--col-m);
  top: var(--col-m);
}

.grid-home01 .item02{
  --h-x: var(--h-i-02);
}

.grid-home01 .item03{
  --h-x: var(--h-i-03);
}

.grid-home01 .item04{
  --h-x: var(--h-i-04);
}

.grid-home01 .item05{
  --h-x: var(--h-i-05);
}

.grid-home01 .item06{
  --h-x: var(--h-i-06);
}

.grid-home01 .item07{
  --h-x: var(--h-i-07);
  margin-bottom: calc( var(--padding-tb) * -2);
}

.grid-home01 .item08{
  --h-x: calc(var(--h-i-08));
  position: absolute;
  left: var(--col-m);
  bottom: var(--col-m);  
}

@media (min-width: 0px){
  .grid-home01{
    /*Configuracion del grid*/
    --h-i-01: .5;   
    --h-i-02: 2;
    --h-i-03: 4;  
    --h-i-04: 3;
    --h-i-05: 2;  
    --h-i-06: 5;
    --h-i-07: 2;  
    --h-i-08: .5;

    --max-h: 100em; /*Altura maxima*/
    --n-col: 2; /*Número de columnas*/
    --n-row: 5; /*numero de filas*/
    --gap: 1.5em; /*Margenes entre los items*/

    height: var(--max-h);
    padding: var(--padding-tb) var(--col-m);
    color: var(--gris-oscuro);
    background-color: var(--gris-oscuro);
    flex-direction: column;
  }
  
  .grid-home01 .item01{ order: 1; }
  .grid-home01 .item02{ order: 2; }
  .grid-home01 .item03{ order: 3; }
  .grid-home01 .item04{ order: 4; }
  .grid-home01 .item05{ order: 6; }
  .grid-home01 .item06{ order: 5; }
  .grid-home01 .item07{ order: 7; }
  .grid-home01 .item08{ order: 8; width: var(--col-t) }
}

@media (min-width: 720px){
  .grid-home01{
    /*Configuracion del grid*/
    --h-i-01: 1;   
    --h-i-02: 3;
    --h-i-03: 5;  
    --h-i-04: 5;
    --h-i-05: 3;  
    --h-i-06: 6;
    --h-i-07: 3.3;  
    --h-i-08: 1;

    --max-h: 100vh; /*Altura maxima*/
    --n-col: 3; /*Número de columnas*/
    --n-row: 4; /*numero de filas*/
    --gap: 1em; /*Margenes entre los items*/    
    
    --col-t: calc( var(--s-col) * var(--n-col) + var(--gap) ); /*Ancho total posible*/
    --col-2: calc( var(--s-col) * 2 + var(--col-m) - .1em ); /*2 Columnas*/
  }
  .grid-home01 .item04{ order: 4; }
  .grid-home01 .item05{ order: 5; }
  .grid-home01 .item06{ order: 6; }
  .grid-home01 .item08{ width: var(--col-2); }
}
<section class="grid-home01">
  <div class="item item01 fondo-cl-01">
    <p>Creamos experiencias que implican todos los sentidos</p>
  </div>
  <div class="item item02">
    <p class="home-title-project">Artesanía + Diseño</p>
  </div>
  <div class="item item03">
    <p class="home-title-project">Jaulas para pájaros</p>
  </div>
  <div class="item item04">
    <p class="home-title-project">Cajas de setas</p>
  </div>
  <div class="item item05">
    <p class="home-title-project">Umami</p>
  </div>
  <div class="item item06">
    <p class="home-title-project">Agua</p>
  </div>
  <div class="item item07">
    <p class="home-title-project">Logos</p>
  </div>
  <div class="item item08 fondo-cl-02">
    <p class="home-title-project"><b>La belleza es un estado de ánimo.</b> Émile Zola</p>
  </div>
</section>

Como ves, te podrías inventar una relación entre las columnas, filas y el tamaño de las imágenes a lo alto y mediante variables en cada media query variar una que otra variable. Si de antemano conoces la medida en pixeles exacta que suman las imágenes en cada foto, podemos sumarlas con calc y definirlas en la variable y sacar todas las medidas de las filas y columnas.

Igual es complicarse la vida de más innecesariamente, porque lo otro que te recomende es que uses un postprocesador como postcss que te permita usar la sintaxis de funcionalidades del "futuro css" con retrocompatibilidad.

1
  • Muchísimas gracias por tu aportación @EdgarGutierrez Es increíble todo lo que se puede lograr con un gran dominio del css como el tuyo. Me he quedado maravillado. He tratado de aplicar tu segunda solución al sitio web en desarrollo y alguna medida se me desencajaba un poco. El problema para mi con eso es que el código css con tantas variables y calcs escapa a mis conocimientos y modificarlo para tratar de adaptarlo me resulta muy complicado. Trataré de hacerlo con la versión primera agrupando los bloques y usando flexbox. Es cierto que este diseño no tiene solución sencilla :)
    – xaifu
    Commented el 23 ene. 2018 a las 10:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.