Expanding to fill remaining space in a CSS Grid layout

Question

I want to use CSS grid and the following is a mock-up of the aim:

I'm building an interface that should expand rightward to fill the browser screen; my current code causes column 2 of the outer grid to be as wide as the browser in addition to column 1; or maybe one of it's children is causing this and it's just expanding to accommodate. Either way, it's spilling off the page horizontally

So the code:

#main {
  width: 100%;
  display: grid;
  grid-template-columns: 250px 100%;
  grid-template-rows: 100px 100%;
}

#col-2-outer {
  display: grid;
  grid-template-columns: 250px auto;
  grid-template-rows: 100%;
}

#row-1-inner {
  grid-column: span 2;
}

#col-2-inner table {
  width: 100%;
}

<div id="main">
  <div id="col-1-outer"></div>
  <div id="col-2-outer">
    <div id="row-1-inner"></div>
    <div id="row-2-inner">
      <div id="col-1-inner"></div>
      <div id="col-2-inner">
        <table></table>
      </div>
    </div>
  </div>
</div>

FYI, for the time being I've forgone template areas until I get a handle on the basics (unless this somehow solves my problem but I gather this is strictly a code organization feature?).

Answer 1

I'd suggest to change your markup with a 3x2 grid like below:

1. Remove the hierarchical structure like you have in your code and add one element for each section in the grid.

2. Note that in the rule grid-template-columns: 250px 150px auto, 250px is the width of your col-1-outer and 150px is the width of the col-1-inner.

3. Span the first column over the two rows by using grid-row: span 2

4. Span the first row in the second column by using grid-column: span 2.

5. Extend the table over the last grid item by using 100% width and height.

See demo below:

* {
  border: 1px solid; /* For illustration */
}

#main {
  width: 100%;
  display: grid;
  grid-template-columns: 250px 150px auto;
  grid-template-rows: 100px auto;
}

#col-1-outer {
  grid-row: span 2;
}

#row-1-inner {
  grid-column: span 2;
}

#col-2-inner table {
  width: 100%;
  height: 100%;
}

<div id="main">
  <div id="col-1-outer">col-1-outer</div>
  <div id="row-1-inner">col2-row-1-inner</div>
  <div id="col-1-inner">col2-row2-inner</div>
  <div id="col-2-inner">
    <table><tr><td>table</td></tr></table>
  </div>
</div>