Как сделать адаптивную сетку

Question

Я использую виджет на своем веб-сайте для отображения своего фида в Instagram на главной странице. Проблема в том, что если я выложу в Instagram что-то не квадратное, сетка будет смещена.

Это должно выглядеть так:

Это то, на что похоже, если одно изображение не имеет такую ​​же высоту, как другие.

Как можно предотвратить повреждение сетки, а также сохранить ее хороший внешний вид на экранах разных размеров?

CSS

//Instagram
.widget-instagram{
  position: relative; 
  clear: both; 
  overflow: hidden; 
  h2{
    color: $main-color; 
    z-index: 1;
    font-size: 22px;
    font-weight: 300;
    text-align: center;
    position: relative;
    border: none;
    margin: 0;
    left: 50%;
    padding: 37px 74px 39px;
    background: rgba(255,255,255,0.91);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    @media(max-width: 991px) {
        padding: 20px;
      }
    i{
      font-size: 46px;
      display: block; 
      text-align: center; 
      margin-bottom: 20px;
      @media(max-width: 991px) {
        font-size: 35px;
      }

    }
  }
  .instagram-slide{
    margin: 0px;
    >a{
      width: 16.6666667%;
      padding: 0px;
      float: left; 
      display: block; 
      @include transition(all 0.3s ease); 
      @media(max-width: 767px) {
        width: 25%;
      }
      @media(max-width: 479px) {
        width: 50%;
      }
      &:hover {
        opacity: .7;
      }
      img{
        display: block; 
        width: 100%; 
      }
      .ss_likes{
        display: none; 
      }
    }
  }
}

html

<div class="widget-instagram no-margin">
    <div class="widget-content">
        <div class="instagram">
          <div class="title">
            <h2>
              <i class="fa fa-instagram"></i>
              <span> {{ section.settings.title }}</span>
            </h2>
          </div>           
          <div class="block-content">
            <div id="instafeed{{ section.id }}" class="instagram-slide" 
                 data-id="instafeed{{ section.id }}"
                 data-userid="{{ section.settings.userid }}"
                 data-accesstoken="{{ section.settings.accessToken }}"
                 data-limit="{{ section.settings.limited }}"
                 data-resolution="{{ section.settings.resolution }}"
                 data-navigation="{{ section.settings.navigation }}">
            </div>
          </div>
        </div>  
    </div>
</div>
{% schema %}
    {
        "name": "Home Page Instagram",
        "class": "home-section gallery-section",
        "settings": [
            {
                "type": "text",
                "id": "title",
                "placeholder": "Title for Block",
                "label": "Title",
                "default": "FOLLOW US BY INSTAGRAM"
            },
            {
                "type": "checkbox",
                "id": "navigation",
                "label": "Show navigation"
            },
            {
                "type": "text",
                "id": "userid",
                "label": "User Id (*)",
                "placeholder": "User Id",
                "default": "4894431401",
                "info": "[Where do I find User ID?](https:\/\/smashballoon.com\/instagram-feed\/find-instagram-user-id\/)"
            },
            {
                "type": "text",
                "id": "accessToken",
                "label": "Access Token (*)",
                "placeholder": "Access Token",
                "default": "4894431401.1677ed0.686c4b5fed2a4983bde609e1016b150f",
                "info": "[Where do I find Access Token?](http:\/\/instagram.pixelunion.net\/)"
            },
            {
                "type": "text",
                "id": "limited",
                "placeholder": "Ex:8",
                "label": "Limit The Number of Images",
                "default": "10"
            },
            {
                "type": "select",
                "id": "resolution",
                "label": "Resolution of images",
                "options": [
                    {
                        "value": "thumbnail",
                        "label": "Thumbnail (150x150)"
                    },
                    {
                        "value": "low_resolution",
                        "label": "Low Resolution (320x320)"
                    },
                    {
                        "value": "standard_resolution",
                        "label": "Standard Resolution (640x640)"
                    }
                ]
            }
        ],
        "presets": [
            {
                "name": "Home Page Instagram",
                "category": "Instagram"
            }
        ]
    }
{% endschema %}

Answer 1

Вы можете сделать отзывчивым, определив столбцы в областях сетки-шаблона и медиа-запросах. Проверьте демоверсию адаптивной сетки ниже

index. html

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body>
    <div class = "grid">
      <div class = "grid-item grid-item-1"> 1 </div>
      <div class = "grid-item grid-item-2"> 2 </div>
      <div class = "grid-item grid-item-3"> 3 </div>
      <div class = "grid-item grid-item-4"> 4 </div>
    </div>
  </body>
</html>

style. css

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 1fr);
  grid-template-rows: repeat(2, 250px);
  grid-template-areas: 
                      "item1 item2 item3"
                      "item4 item4 item4";
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.grid-item {
  background-color: #2ecc71;
  color: #fff;
  font-size: 30px;
}

.grid-item-1 {
  grid-area: item1;
}

.grid-item-2 {
  grid-area: item2;
}

.grid-item-3 {
  grid-area: item3;
}

.grid-item-4 {
  grid-area: item4;
}

@media(max-width: 720px) {
  .grid {
    grid-template-areas: 
                        "item1 item2"
                        "item3 item4";
  }
}

Проверьте живую версию в plunker здесь

Код в Plunker

Надеюсь, это решит ваш запрос:)