CSS Grid content-area горизонтальное расширение для заполнения контейнера - PullRequest
Новая
       75

CSS Grid content-area горизонтальное расширение для заполнения контейнера

1 голос
/ 05 августа 2020

У меня есть контейнер CSS Grid, а также боковая панель и область содержимого внутри него. Я хочу, чтобы, когда пользователь закрывает боковую панель, область содержимого расширяется по горизонтали, чтобы заполнить всю ширину контейнера. Я использовал transformX (-100%) при наведении на боковую панель для скрытия и transformX (0%) для отображения боковой панели на мыши в моем нижеследующем примере: 

.test-container {
  display: grid;
  background-color: aquamarine;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "sidebar content";
  height: 100vh;
}

.test-sidebar {
  background-color: blue;
  grid-area: sidebar;
  transform: translateX(0%);
  font-size: 40px;
  color: white;
  text-align: center;
  transition: 2000ms;
}

.test-sidebar:hover {
  transform: translateX(-100%);
  transition: 2000ms;
}

.test-content {
  background-color: blueviolet;
  font-size: 40px;
  text-align: center;
  grid-area: content;
  color: white;
}
<div class="test-container">
  <div class="test-sidebar">Sidebar</div>
  <div class="test-content">Content</div>
</div>

1 Ответ

1 голос
/ 05 августа 2020

Вот решение с наведением курсора на все элементы сетки, просто чтобы продемонстрировать, как мы можем действовать с двумя разными ячейками. Здесь у нас есть grid-template-columns: auto 1fr; в .test-container и stati c width в .test-sidebar. Теперь они расширяются / сворачиваются, как вы хотите.

Что касается поведения других, что это значит «когда пользователь закрывает боковую панель»? Опишите это действие просьбами. Опишите поведение боковой панели, в каком случае она должна сворачиваться и расширяться? Думаю, для всего решения потребуется JS. При необходимости добавлю после описания. 

.test-container {
  display: grid;
  background-color: aquamarine;
  grid-template-columns: auto 1fr;
  height: 100vh;
  transition: all 2s ease;
}

.test-sidebar {
  background-color: blue;
  font-size: 40px;
  color: white;
  text-align: center;
  overflow: hidden;
  width: 200px;
  transition: all 2s ease;
}

.test-container:hover .test-sidebar {
  width: 0;
}

.test-content {
  background-color: blueviolet;
  font-size: 40px;
  text-align: center;
  color: white;
}
<div class="test-container">
  <div class="test-sidebar">Sidebar</div>
  <div class="test-content">Content</div>
</div>
...