CSS Grid авто-высота + переполнение - PullRequest
Новая
       32

CSS Grid авто-высота + переполнение

0 голосов
/ 30 января 2019

Проблема с началом сетки;)

Пожалуйста, смотрите эту картинку: Макет переполнения Autoheight

У меня есть боковая панель, содержащая 3 элемента (Title, imgWrapper, Button).Название и кнопка должны занимать 1 fr высоты, тогда как imgWrapper должен использовать автоматическую высоту.

imgWrapper содержит другую сетку, содержащую изображения 2x2.Я хочу, чтобы этот контейнер использовал max-height: 100% (= autoheight of parent) с overflow-y, поэтому, если есть больше изображений, он должен сделать контейнер прокручиваемым.

Есть идеи?Заранее спасибо

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

 <div id="selectCollage" class="editBox">
            <p class="title">Images</p>
            <form>
             <select>
                <option>Category</option>
                <option>Kategorie 1</option>
                <option>Kategorie 2</option>
                <option>Kategorie 3</option>
                <option>Kategorie 4</option>
                <option>Kategorie 5</option>
             </select>    
                <div class="imgWrapper">
                   <div class="scrollBox">
                    <img class="active" src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-1.jpg"}" alt="Test">
                    <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-2.jpg"}" alt="Test">
                    <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-4.jpg"}" alt="Test">
                    <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-5.jpg"}" alt="Test">
                    <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-6.jpg"}" alt="Test">
                    <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-7.jpg"}" alt="Test">
                    <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-8.jpg"}" alt="Test">
                    </div>
                </div>
           </form>
             <a href="#" class="ghostButton maxWidth">
                   <span class="icon-plus-circle lead"> Upload</span>
                </a>
        </div>


#designerWrapper #sidebar {
  grid-area: sb;
  background: #fff;
  border-radius: 1px;
  padding: $padding-l;
  & .ghostButton {
          margin: 0;
          padding: $padding-m $padding-s;
      }
  & .editBox {
      display: grid;
      grid-template-columns: 1fr;
      grid-auto-rows: 1fr auto 1fr;
      grid-gap: $margin-s;
      grid-template-areas: 
      "title" 
      "images"
      "button";

      & p.title {
          grid-area: title;
          font-size: 1.5rem;
      }

      & select {
          padding: $padding-m $padding-s;
        margin-bottom: $margin-s;
        }

    & .imgWrapper {
           grid-area: images;
           border: 1px solid $border-color;
           padding: $padding-m $padding-s $padding-m $padding-m;

          & .scrollBox{    
               height: 250px;
               max-height: 250px;
               overflow-y: auto;
               display: grid;
               grid-template-columns: 1fr 1fr;
               grid-gap: 1em;
               padding-right: $padding-s;
            & img {

                      margin: 0;
                      border: 3px solid #fff;
                      &.active {
                          border-color: $color-highlight-primary;
                  }
              }
          }
          }
          & .button {
              grid-area: button;
          }
      }
  }
...