Блог

Главная - Вопросы по программированию - Контейнер сетки не переносит строки

Контейнер сетки не переносит строки

#css #css-grid

#css #css-grid

Вопрос:

У меня есть базовый макет сетки, но в контейнере есть зазор между элементами внутри и снизу. Если я удалю grid-template-rows: minmax(0, auto) auto; , то это пространство исчезнет, но мне нужно это свойство, чтобы box1 и box2 находились в верхней части контейнера. Это оказывается сложнее, когда я переключаю больше содержимого в box3.

Вот скрипт, показывающий проблему, контейнер серый, и вы можете видеть чрезмерный серый цвет внизу под Box3 и по краю: Js fiddle здесь

Я хочу, чтобы результат был таким: введите описание изображения здесь

 .page-wrapper {
  background: #CCC;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-auto-flow: row dense;
  grid-template-areas: "box1" "box3" "box2"
}

@media (min-width:768px) {
  .container {
    align-items: start;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, auto) auto;
    grid-template-areas: "box1 box3" "box2 box3"
  }
}

.box1 {
  grid-area: box1;
  background-color: #f00;
}

.box2 {
  grid-area: box2;
  background-color: #0f0;
}

.box3 {
  grid-area: box3;
  height: 300px;
  background-color: #00f;
  height: 100%;
  min-height: 100px;
}

.more {
  display: block;
  font-weight: bold;
  margin: 20px;
  cursor: pointer;
}

.stuff {
  display: none;
  height: 300px;
}  
 <div class="page-wrapper">
  <div class="container">
    <div class="box1">
      BOX 1
    </div>

    <div class="box2">
      BOX 2
    </div>

    <div class="box3">
      BOX 3
      <a class="more">[More info]</a>
      <div class="stuff"></div>
    </div>
  </div>
</div>

Ответ №1:

Я полагаю, что нашел ответ на это как:

 grid-template-rows: minmax(0, auto) minmax(0, 1fr);

Ответ №2:

Попробуйте изменить .box3 на следующее:

 .box3{
  grid-area: box3;
  background-color: #00f;
  min-height:300px;
  height:100%;
}

Это желаемый эффект, который вы хотите?

Комментарии:

1. Спасибо, Бен. Я обновил свой поток / скрипку. Это работает, но не тогда, когда у меня есть переключатель js, который отображает больше содержимого в box3.