Make a column take the space of missing columns

Question

I am trying to make a CSS grid with an optional left and right sidebar. HTML looks like this:

.content-inner {
  display: grid;
  grid-template-columns: 300px auto 300px;
  grid-template-rows: auto;
  grid-auto-flow: row;
}

.main {
  grid-column: 2;
}

<div class="content-inner">
  <aside class="left">Left</aside>
  <main class="main">Main</main>
  <aside class="right">Right</aside>
</div>

I am not sure if its possible, but I would like for my main content to span the remaining row width if one or both of the sidebars are missing. I am looking for a pure css solution. I know I can swap the class with JS.

Answer 1

set the aside dimension to 300px, and set the first and last template columns to auto

.content-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto;
  grid-auto-flow: row;
  margin: 5px;
  
}

.main {
  grid-column: 2;
  background-color: lightblue;
}

aside {
  width: 300px;
  background-color: lightgreen;
}

<div class="content-inner">
  <aside class="left">Left</aside>
  <main class="main">Main</main>
  <aside class="right">Right</aside>
</div>

<div class="content-inner">
  <main class="main">Main</main>
  <aside class="right">Right</aside>
</div>

<div class="content-inner">
  <aside class="left">Left</aside>
  <main class="main">Main</main>
</div>

<div class="content-inner">
  <main class="main">Main</main>
</div>