CSS网格列灵活适用于可折叠内容

Question

我正在使用CSS网格进行布局。 2列3行。 我希望左栏灵活，以便左栏可以包含一个可折叠的导航栏，这意味着当我单击汉堡菜单按钮时，它会打开/关闭。 到目前为止，我还没有找到任何例子。 是否可以使列从宽度0到任何像素宽度灵活变化？

Answer 1

您可以在Select属性中使用min-content并设置grid-template-columns div的宽度，然后，如果您更改此元素的宽度，sidebar div应填充空白。检查下面的代码段。

content

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;
}