Html 如何创建一个CSS网格，主内容的最大宽度和边栏的最小宽度？

我正在尝试创建一个两列CSS网格，其中主内容的最大宽度为800px，边栏的最小宽度为200px：

电网应响应：

黄色侧边栏应缩小，但宽度至少为200px

包含图像的橙色主内容的最大宽度应为800px，并根据需要缩小

我的

minmax

try无效。有什么想法吗

代码：

    html {font-family: Arial, sans-serif;}
    ul {margin: 0; list-style: none;}
    
    .theme-hero {
        display: grid;
        gap: 8px 32px;
        grid-template-columns: minmax(auto, 800px) minmax(200px, auto);
        grid-template-rows: auto;
            grid-template-areas: 
            "breadcrumb ."
            "theme-img sidebar";
        max-width: 1400px;
    }
    
    .theme-hero-breadcrumb {
        grid-area: breadcrumb;
        background: gray;
        text-align: center;
    }
    
    .theme-hero-showcase {
        grid-area: theme-img;
        background: orange;
        max-width: 800px;
    }
    
    .theme-hero-sidebar {
        grid-area: sidebar;
        background: yellow;
    }

面包屑
边栏

我还不能评论，但我认为问题在于图像。它不会让div收缩

您可以img max width/max height使其更灵敏

img{
      max-width: 100%;
      max-height: 100%;
}

html{font-family:Arial，无衬线；}
ul{margin:0；列表样式：无；}
img{
最大宽度：100%；
最大高度：100%；
}
.主题英雄{
显示：网格；
间隙：8px 32px；
网格模板列：minmax（自动，800px）minmax（200px，自动）；
网格模板行：自动；
网格模板区域：
“面包屑。”
“主题img边栏”；
最大宽度：1400px；
}
.主题英雄面包屑{
网格区域：面包屑；
背景：灰色；
文本对齐：居中；
}
.主题英雄展示{
网格区域：主题img；
背景：橙色；
最大宽度：800px；
}
.主题英雄侧边栏{
网格区域：侧栏；
背景：黄色；
}

面包屑
边栏

本页为您的问题提供了一个示例：

img{
      max-width: 100%;
      max-height: 100%;
}