Переключатель боковой панели CSS Grid Layout

Это вопрос относительно новой системы CSS Grid, которая недавно была добавлена ​​к веб-стандартам CSS. Это пример макета, который я пытаюсь использовать --> Пример Codepen.

Теперь мне нужно переключить боковую панель чата так, чтобы основной элемент div занимал оставшееся место. Я уже знаю, как это сделать во flexbox и javascript. Однако я хочу попробовать это с помощью CSS Grids.

Одним из способов было бы сделать это...

grid-template-columns: 1fr 0;

Но я хочу, чтобы боковая панель чата переключалась плавно (например, переходы css), а не исчезала внезапно.

Любая помощь будет оценена по достоинству.


html css css-grid
person Ujwal    schedule 01.06.2017    source источник

Ответы (1)


arrow_upward
23
arrow_downward

Сделайте так, чтобы сетка адаптировалась автоматически, и измените ширину .chat.

html,body{
  height: 100vh;
  width: 100wh;
  padding: 0;
  margin: 0;
  color: #e6e6e6;
}

body{
  display: grid;
  grid-template-columns: 9fr auto;
  grid-template-rows: 50px auto 50px;
  grid-template-areas: "header header" 
                      "main chat"
                      "footer footer";
}

.chat{
  grid-area: chat;
  background-color: brown; 
  overflow: auto;
  width: 300px;
  transition: all 1s;
}
.header{
  grid-area: header;
  background-color: black;
}

.main{
  grid-area: main;
  background-color: maroon;
}

.footer{
  grid-area: footer;
  background-color: #222;
}

body:hover .chat {
width: 0px;  
}
  <div class="header">
    header
  </div>
  <div class="main">
    main
  </div>
  <div class="chat">
   chat
  </div>
  <div class="footer">
    footer
  </div>

person vals    schedule 01.06.2017
comment
Блин.. Почему я не подумал об этом?? Спасибо !! - person Ujwal; 02.06.2017
comment
Рад, что тебе помогло :-) - person vals; 02.06.2017
comment
И поскольку единица fr представляет собой долю доступного пространства, 9fr и 1fr в этом случае совпадают. На самом деле, поскольку fr используется только в одном столбце, любой fr › 0 будет делать то же самое. - person Michael Benjamin; 02.06.2017
comment
@Michael_B Да, наверное, было бы лучше использовать 1fr. Я просто сохранил исходный код. - person vals; 04.06.2017
comment
Однако ширина перехода очень тяжела для движка браузера. - person kano; 20.07.2018
comment
@vals, как сделать то же самое с левой стороны. - person partha; 27.08.2019