Как увеличить ширину одного столбца, в то время как другой столбец сжимается в макете сетки CSS? ⇐ CSS

[Anonymous]

Я создал боковую панель навигации и область основного контента. Я расположил их в виде сетки, используя display:grid со столбцами, установленными на 200 пикселей. Я также написал сценарий JavaScript для переключения списка классов. Когда я нажимаю кнопку переключения, боковая навигация сжимается, но основная область содержимого сохраняет ту же ширину. Как сделать так, чтобы основная область содержимого заполнялась на всю ширину?

Код: Выделить всё

function toggleSidebar() {
const sidebar = document.querySelector('.sidebar');
sidebar.classList.toggle('shrink');
}

Код: Выделить всё

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
height: 100vh;
}

.container {
display: grid;
grid-template-columns: 200px minmax(0,1fr); /* Sidebar takes 200px, main content takes remaining space */
height: 100%;
grid-template-rows: 1fr; /* Only one row for this layout */
}

.sidebar {
background-color: #333;
color: white;
padding: 15px;
overflow: hidden;
transition: width 0.3s ease-in-out; /* Transition effect for shrinking */
}

.sidebar ul {
list-style-type: none;
}

.sidebar ul li {
margin-bottom: 10px;
}

.sidebar ul li a {
color: white;
text-decoration: none;
}

.main-content {
background-color: red;
padding: 20px;
overflow: auto;
}

.sidebar.shrink {
width: 50px; /* Shrinks the sidebar width to 50px */
}

.sidebar.shrink ul {
display: none; /* Hide the links when the sidebar is shrunk */
}

.main-content {
transition: margin-left 0.3s ease-in-out; /* Adjust content area when sidebar shrinks */
}

Код: Выделить всё

Responsive Grid Layout
[*]


Toggle Sidebar



[list]
[url=#]Home[/url]
[*][url=#]About[/url]
[*][url=#]Services[/url]
[*][url=#]Contact[/url]
[/list]



Welcome to the main content area
This area should adjust its size based on the sidebar.

Подробнее здесь: https://stackoverflow.com/questions/793 ... rid-layout