如何创建主要内容的最大宽度和侧边栏的最小宽度的 CSS 网格？答案

【问题标题】：How to create a CSS Grid with max width for main content and min width for sidebar?如何创建主要内容的最大宽度和侧边栏的最小宽度的 CSS 网格？
【发布时间】：2021-08-18 13:11:56
【问题描述】：

我正在尝试创建一个两列 CSS 网格，主要内容的最大宽度（800 像素）和侧边栏的最小宽度 200 像素：https://codepen.io/dash/pen/gOmXqGr

网格应该是响应式的：

黄色侧边栏应缩小，但宽度至少为 200 像素。
包含图片的橙色主要内容的最大宽度应为 800 像素，并在需要时缩小。

我的minmax 尝试不起作用。有什么想法吗？

代码：

    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 class=theme-hero>
        <div class=theme-hero-breadcrumb>breadcrumb</div>
        <div class=theme-hero-showcase><img src=https://via.placeholder.com/800x600 alt></div>
        <div class=theme-hero-sidebar>sidebar</div>
    </div>

【问题讨论】：

此页面有一个针对您的问题的示例：codepen.io/faelplg/pen/RJJraB

标签： html css css-grid

【解决方案1】：

我还不能发表评论，但我认为问题出在图像上。它不会让 div 缩小。

您可以 img max-width/max-height 使其更具响应性。

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

html {font-family: Arial, sans-serif;}
ul {margin: 0; list-style: none;}

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

.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 class=theme-hero>
    <div class=theme-hero-breadcrumb>breadcrumb</div>
    <div class=theme-hero-showcase><img src=https://via.placeholder.com/800x600 alt></div>
    <div class=theme-hero-sidebar>sidebar</div>
</div>

【讨论】：