I've got a css grid layout that is two columns and two rows:
"header header" "left right"
So header is always full 100% and left and right need to share their row evenly.
There's also a possibility of "left" not getting rendered. What I'm trying to do is have "right" fill up the entire row when it's alone.
.grid {
display: grid;
grid-template:
"header header"
"left right";
grid-template-columns: 1fr 1fr;
margin-bottom: 50px;
}
header {
grid-area: header;
background: #0098db;
}
.left-stuff {
grid-area: left;
background: #ffadad;
}
.right-stuff {
grid-area: right;
background: #73d073;
}
<!-- example with header and two columns -->
<div class="grid">
<header>
<h1>I'm the header</h1>
</header>
<div class="left-stuff">I'm the left stuff</div>
<div class="right-stuff">I'm the right stuff</div>
</div>
<!-- example with header and one column -->
<div class="grid">
<header>
<h1>I'm the header</h1>
</header>
<div class="right-stuff">I'm the right stuff</div>
</div>
I tried the following:
grid-template-columns: auto 1fr;
grid-template-columns: 1fr auto;
grid-template-columns: 1fr auto;
grid-template-columns: 1fr;
grid-template-columns: 50% 50%;
but they don't meet the requirements of both scenarios. Is this possible with css grid?