Блог

Главная - Вопросы по программированию - Столбец сетки CSS гибкий для сворачиваемого содержимого

Столбец сетки CSS гибкий для сворачиваемого содержимого

#css #css-grid

#css #css-сетка

Вопрос:

Я использую CSS grid для своего макета. 2 столбца и три строки. Я бы хотел, чтобы левый столбец был гибким, чтобы в левом столбце могла находиться панель навигации, которая является сворачиваемой, что означает, что она открывается / закрывается, когда я нажимаю кнопку меню гамбургера. Пока я не нашел ни одного примера. Можно ли сделать столбец гибким от ширины 0 до любой ширины в пикселях?

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

1. Ожидается, что вы сначала попытаетесь закодировать это самостоятельно, и если вы застряли, вы попросите помощи здесь, предоставив код, который вы пробовали

2. Вы не можете сделать это с помощью одного контейнера сетки. То, что вы описываете, не является сеткой .

Ответ №1:

Вы можете использовать min-content grid-template-columns свойство in и задать ширину sidebar div, тогда, если вы измените ширину этого элемента, content div должен заполнить пустое пространство. Проверьте фрагмент ниже.

 var collapsed = false

$('#btn').click(function() {
  $('.sidebar').css('width', !collapsed ? '100px' : '150px')
  collapsed = !collapsed
})  
 .grid-container {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: "sidebar content";
  width: 400px;
  height: 300px;
}

.sidebar { 
  grid-area: sidebar;
  background-color: red;
  width: 150px;
}

.content { 
  grid-area: content; 
  background-color: green;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-container">
  <div class="sidebar">
    <button id='btn'>collapse</button>
  </div>
  <div class="content">content</div>
</div>