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