Переключение строк в CSS Grid Layout - PullRequest
Новая
       15

Переключение строк в CSS Grid Layout

2 голосов
/ 26 апреля 2019

У меня есть следующий макет с 2 верхними и нижними колонтитулами: 

.my-grid {
    display: grid;
    grid-template-areas:
        "header1"
        "header2"
        "mainAreaExpandMePlease"
        "footer1"
        "footer2"
        "footer3"
        ;
    grid-template-rows: 27px 27px 1fr 28px 28px 28px;
    height: 100%;
}

Основная область расширится, чтобы заполнить пробел, оставшийся после отображения верхних и нижних колонтитулов.

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

Как мне поступить:

  • Наличие главной области, которая всегда расширяется
  • Наличие дополнительных верхних и нижних колонтитулов, которые сворачиваются при скрытии

Примеры:

  • Если header1 рухнет, то header2 должно занять его место и mainAreaExpandMePlease должно расшириться до того места, где header2 раньше было
  • Если header2 рухнет, то mainAreaExpandMePlease увеличится еще на 27px
  • Если footer3 рухнет, то footer2 займет место footer3, footer1 займет место footer2 и mainAreaExpandMePlease растянется еще на 28px

Спасибо!

Скрипка: https://jsfiddle.net/jg6ho4wu/1/

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.my-grid {
    display: grid;
    grid-template-areas:
        "header1"
        "header2"
        "mainAreaExpandMePlease"
        "footer1"
        "footer2"
        "footer3";
    grid-template-rows: 27px 27px 1fr 28px 28px 28px;
    height: 100%;
}

.header1 {
  grid-area: header1;
  background-color: yellow;
}

.header2 {
  grid-area: header2;
  background-color: magenta;
}

.mainAreaExpandMePlease {
  grid-area: mainAreaExpandMePlease;
  background-color: cyan;
}

.footer1 {
  grid-area: footer1;
  background-color: green;
}

.footer2 {
  grid-area: footer2;
  background-color: red;
}

.footer3 {
  grid-area: footer3;
  background-color: blue;
}
<div class="my-grid">
  <div class="header1"></div>
  <div class="header2"></div>
  <div class="mainAreaExpandMePlease"></div>
  <div class="footer1"></div>
  <div class="footer2" style="display:none"></div>
  <div class="footer3"></div>
</div>

1 Ответ

2 голосов
/ 26 апреля 2019

Не устанавливайте высоту строк верхнего и нижнего колонтитула на уровне контейнера.

Установите их высоту на предметах и ​​установите их высоту контейнера на auto. 

.my-grid {
  display: grid;
  height: 100vh;
  grid-template-rows: auto auto 1fr auto auto auto;
  grid-template-areas:  "header1" 
                        "header2"
                        "mainAreaExpandMePlease"
                        "footer1"
                        "footer2"
                        "footer3";
}

.header1 {
  height: 27px;
  grid-area: header1;
  background-color: yellow;
}

.header2 {
  height: 27px;
  grid-area: header2;
  background-color: magenta;
}

.mainAreaExpandMePlease {
  grid-area: mainAreaExpandMePlease;
  background-color: cyan;
}

.footer1 {
  height: 28px;
  grid-area: footer1;
  background-color: green;
}

.footer2 {
  height: 28px;
  grid-area: footer2;
  background-color: red;
}

.footer3 {
  height: 28px;
  grid-area: footer3;
  background-color: blue;
}

body {
  margin: 0;
  padding: 0;
}
<div class="my-grid">
  <div class="header1"></div>
  <div class="header2"></div>
  <div class="mainAreaExpandMePlease"></div>
  <div class="footer1"></div>
  <div class="footer2" style="display:none"></div>
  <div class="footer3"></div>
</div>
...