I'm attempting to design a two-column CSS grid with a main content area that has a maximum width of 800px and a sidebar that has a minimum width of 200px: https://codepen.io/dash/pen/gOmXqGr
The grid needs to be responsive:
- The yellow sidebar should be able to shrink but must maintain a minimum width of 200px.
- The orange main content, which includes an image, should have a maximum width of 800px and shrink if necessary.
My attempt using the minmax function isn't working. Any suggestions?
Code:
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>