My grid layout has a specific design that I'd like to simplify.
The goal is for the .side element to initially adjust its size based on the content using min-content, but also allow users to expand it by adjusting the --size custom CSS property.
I attempted using calc(min-content + var(--size)) without success. I can't use a fixed value like calc(100px + var(--size)) because the original size should be determined by the content.
What would be the most effective approach to achieve this functionality?
* {
box-sizing: border-box;
}
body {
overflow: hidden;
margin: 0;
}
.container {
--size: 10px;
width: 100vw;
height: 100vh;
display: grid;
grid-template-areas:
"l t"
"l b";
/* doesn't work */
/* grid-template-columns: calc(min-content + var(--size)) 1fr; */
grid-template-columns: min-content 1fr;
grid-template-rows: 1fr 1fr;
}
.container > * {
border: solid 1px black;
}
.side {
grid-area: l;
}
.top {
grid-area: t;
}
.bottom {
grid-area: b;
}<section class="container">
<div class="side">This should have a 10px gutter on the right</div>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</section>