CSS сетка, простой адаптивный дизайн - PullRequest
Новая
       66

CSS сетка, простой адаптивный дизайн

0 голосов
/ 26 сентября 2018

Я пытаюсь понять сетку CSS.Мой макет состоит из двух меню (красного цвета), по одному на каждой стороне основного поля содержимого посередине (синего цвета).

Когда экран становится меньше и недостаточно места для трех столбцов, я хочувторое (правое) боковое меню, которое появляется прямо под первым (левым)значения, так как высота будет меняться в зависимости от того, сколько контента / пунктов меню в них.Решение должно работать независимо от высоты.

Моя текущая раскладка почти работает, за исключением того, что второе меню появляется под концом основного содержимого, а не сразу после первого меню.Как я могу решить это? 

.main-container {
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 400px) {
  .main-container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 40px 80px 40px;
    justify-content: center;
  }
}

@media only screen and (max-width: 400px) {
  .main-container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 40px 80px;
    justify-content: center;
  }
}

.side-menu {
  width: 100%;
  height: 50px;
  background-color: red;
}

.main-content {
  width: 100%;
  height: 300px;
  background-color: blue;
}
<div class="main-container">
  <div class="side-menu"></div>
  <div class="main-content"></div>
  <div class="side-menu"></div>
</div>

Как и в заголовке говорится "CSS grid layout", я не хочу использовать js.

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Вы не определили ни одной строки в сетке: 

.main-container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 40px 80px 40px;
  justify-content: center;
}

Таким образом, все строки неявные , что означает, что они создаются автоматически для размещения элементов.

Функция определения размера для неявных строк - grid-auto-rows, а ее значение по умолчанию - auto.Это означает, что строки принимают размер содержимого.

Вы установили размер элементов своей сетки: 

.side-menu {
  height: 50px;
}

.main-content {
  height: 300px;
}

То есть .main-content, являющийся выше элементов сеткиустанавливает высоту строки:

enter image description here

Как видите, у вас есть контейнер сетки с одной строкой.

ТогдаВаш медиа-запрос включается для небольших экранов: 

@media ( max-width: 400px ) {
  .main-container {
    grid-template-columns: 40px 80px;
  }
}

Новое правило grid-template-columns изменяет сетку от трех до двух столбцов.

Это заставляет сетку создавать вторую неявную строку дляразместите второй .side-menu, столбец которого был удален.

enter image description here

Короче говоря, под первым рядом существует второй ряд.Первый ряд высотой 300 пикселей.Это приводит к большому вертикальному разрыву между первым и вторым меню.

Одно возможное решение

Используйте несколько меньших рядов и заставьте свои элементы проходить через них.

Код ниже выглядит следующим образом:

enter image description here

.main-container {
    display: grid;
    grid-template-columns: 40px 80px 40px;
    grid-auto-rows: 10px;  /* new */
    grid-column-gap: 20px; /* adjusted */
}

.side-menu:first-child {
  /* height: 50px; */
  grid-column: 1;
  grid-row: span 5;
}

.side-menu:last-child {
  /* height: 50px; */
  grid-column: 3;
  grid-row: span 5;
}

.main-content {
  /* height: 300px; */
  grid-column: 2;
  grid-row: span 30;
}

@media ( max-width: 400px ) {
  .main-container {
    grid-template-columns: 40px 80px;
  }
  .side-menu:last-child {
    grid-column: 1;
    grid-row: 7 / span 5;
  } 
}

.main-content { background-color: blue; }
.side-menu    { background-color: red;  }
<div class="main-container">
  <div class="side-menu"></div>
  <div class="main-content"></div>
  <div class="side-menu"></div>
</div>

демонстрационный код

0 голосов
/ 26 сентября 2018

На экране мультимедиа вы можете настроить 2 строки для выполнения работы. Также я предлагаю использовать «fr» вместо пикселей в сетке.

Вы можете найти хорошее руководство здесь https://css-tricks.com/snippets/css/complete-guide-grid/

.main-container {
      width: 100%;
      height: 100%;
    }

    @media only screen and (min-width: 400px) {
      .main-container {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: 40px 80px 40px;
        grid-template-rows: 40px;
        justify-content: center;
        grid-auto-flow: rows;
      }
      .side-menu:nth-child(odd) {
      width: 100%;
      height: 50px;
      background-color: red;
        grid-column: 1;
      }

      .side-menu:nth-child(even) {
      width: 100%;
      height: 50px;
      background-color: red;
        grid-column: 3;
      }
    }

    @media only screen and (max-width: 400px) {
      .main-container {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: 40px 80px;
        grid-auto-rows: 40px;
        justify-content: center;
      }

      .side-menu {
      width: 100%;
      height: 50px;
      background-color: red;
        grid-column: 1;
      }
    }


    .main-content {
      width: 100%;
      height: 300px;
      background-color: blue;
    }
<div class="main-container">
  <div class="side-menu"></div>
  <div class="main-content"></div>
  <div class="side-menu"></div>
</div>
...