Как создать сетку из изображений разных размеров?

Я пытаюсь создать сетку изображений, где все изображения строки имеют одинаковую высоту и каждая строка использует одну и ту же ширину.

Как я могу это сделать и какие библиотеки могут мне помочь?

Ответ 1

Этот тип сетки трудно сделать самостоятельно, поэтому лучше не изобретать велосипед и использовать удивительные библиотеки, созданные потрясающими людьми в Интернете.

Ознакомьтесь с этими ссылками, которые лучше всего подходят для поиска →

Также эта ссылка http://www.jqueryscript.net/tags.php?/grid%20layout/ содержит множество библиотек просмотра сетки изображений, которые могут быть полезны.

Ответ 2

Структуры CSS Grid работают хорошо. Вы можете найти более подробное объяснение на веб-сайте CSS-трюки. Это пример, который может работать для изображений выше. (И вот мой 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; 
    }