javascript - over - tab gallery

¿Cómo crear cuadrícula de imágenes de diferentes tamaños?

Question

Intento crear una grilla de imágenes donde todas las imágenes de una fila comparten la misma altura y donde cada fila usa el mismo ancho.

¿Cómo puedo hacer esto y qué bibliotecas pueden ayudarme?

Answer 1

Este tipo de cuadrícula es difícil de hacer por sí mismo, por lo que es mejor no reinventar la rueda y utilizar bibliotecas geniales creadas por personas increíbles en Internet.

Consulte estos enlaces que son los mejores para lo que está buscando ->

1. http://masonry.desandro.com/
2. http://css-tricks.com/seamless-responsive-photo-grid/

También este enlace http://www.jqueryscript.net/tags.php?/grid%20layout/ tiene una variedad de esas bibliotecas de vista de cuadrícula de imágenes que pueden ser útiles.

Answer 2

Los marcos de CSS Grid funcionan bien. Puede encontrar una explicación más detallada en el sitio web CSS Tricks . Este es un ejemplo que podría funcionar para las imágenes de arriba. (Y aquí está mi resultado JSFiddle ).

/*grid container*/
.container {
display: grid;
padding:60pt;
grid-template-columns: 25% 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 25%;
/*adjust outer values if you want less padding on the sides,
in jsfiddle I used 5% */
grid-template-rows: 10% 300pt 250pt 10%;
grid-column-gap: 10px;
grid-row-gap: 5px;
}
.container div img { width: 100%;
height: 100%;
}
/*image div classes*/
.main_1 {
grid-area: main_1;
grid-column:2/5;
grid-row: 2/3;
}
.main_2 {
grid-area: main_2;
grid-column:5/8;
grid-row: 2/3;
}
.main_3 {
grid-area: main_3;
grid-column:8/11;
grid-row: 2/3;
}
.main_4 {
grid-area: main_1;
grid-column:2/4;
grid-row: 3/4;
}
.main_5 {
grid-area: main_2;
grid-column:4/7;
grid-row: 3/4;
}
.main_6 {
grid-area: main_3;
grid-column:7/11;
grid-row: 3/4;
}