title: IE11: how to make two-column grid layout that the second column would fill both or one column, depending on whether the first column is displayed
body: <p>What I want to achieve, is to have two-column grid layout that behaves like this:</p>
  
  <p>if <code>display</code> property of <code>col 1</code> set to <code>inline</code> - layout should be rendered as follows:</p>
  
  <pre><code>+------+--------------+
  |      |              |
  |      |              |
  |  c   |      c       |
  |  o   |      o       |
  |  l   |      l       |
  |      |              |
  |  1   |      2       |
  |      |              |
  |      |              |
  +------+--------------+
  </code></pre>
  
  <p>in case if <code>display</code> property of <code>col 1</code> is set to <code>none</code> - <code>col 2</code> should occupy both columns:</p>
  
  <pre><code>+---------------------+
  |                     |
  |                     |
  |          c          |
  |          o          |
  |          l          |
  |                     |
  |          2          |
  |                     |
  |                     |
  +---------------------+
  </code></pre>
  
  <p>In Chrome and Firefox, I was able to achieve it via following CSS:</p>
  
  <pre><code>#content {
    display: grid;
    grid-template-columns: 15% minmax(85%, 1fr);
  }
  
  .col-1 {
    background: #D2691E;
    /* display: none; */
    grid-row-start: 1;
    grid-row-end: 1;
  }
  
  .col-2 {
    background: #191970;
    grid-row-start: 1;
    grid-row-end: 1;
    grid-column-start: auto;
    grid-column-end: span 2;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/mfo4qk9dv2ua5iksttbnqx64c/byqhhy3t/" rel="nofollow noreferrer">Demonstration on JSFiddle</a></p>
  
  <hr>
  
  <p>Though, I need the same to work in IE11, and it gets trickier here. I have read <a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/" rel="nofollow noreferrer">this</a> and looked through <a href="https://24ways.org/2012/css3-grid-layout/" rel="nofollow noreferrer">this one</a>, articles on grid implementation in IE10 and IE11.</p>
  
  <p><code>col 1</code> will eventually be a menu, so I've prepared a demo with button that intended to hide/show it via toggling the <code>display</code> property (which works as expected in Chrome and Firefox and doesn't work in IE11):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function toggleDisplay() {
   var menu_div = document.getElementById('menu');
    if (menu_div.style.display === '' || menu_div.style.display === 'none') {
     menu_div.style.display = 'inline'
    } else {
     menu_div.style.display = 'none' 
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#content {
    display: -ms-grid;
    display: grid;
    
    -ms-grid-columns: 15% minmax(85%, 1fr);
    grid-template-columns:  15% minmax(85%, 1fr);
    
    -ms-grid-rows: 1fr;
    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
  
  
  .menu {
    background: #D2691E;
    display: none;
    
    -ms-grid-row: 1;
    grid-row-start: 1;
    
    -ms-grid-row-span: 1;
    grid-row-end: 1;
  
  }
  
  .content-area {
    background: #191970;
    
    -ms-grid-row: 1;
    grid-row-start: 1;
    
    -ms-grid-row-span: 1;
    grid-row-end: 1;
    
    -ms-grid-column: 2;
    grid-column-start: auto;
    
    -ms-grid-column-span: 2;
    grid-column-end: span 2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div id='content'&gt;
  &lt;div class='menu' id='menu'&gt;&lt;/div&gt;
  &lt;div class='content-area'&gt;
  &lt;button onclick=toggleDisplay() &gt;Show/hide 'display:none'&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/mfo4qk9dv2ua5iksttbnqx64c/a2ssxvLk/" rel="nofollow noreferrer">Code above on JSFiddle</a></p>
  
  <p>I have also tried different method of toggling 'menu' - via moving it outside the view, with the same result (works in Chrome, Firefox not in IE11, though it toggles the menu in IE, at least):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function toggleLeft() {
    var menu_navigation = document.getElementById('menu');
    if (menu_navigation.style.position === 'fixed' || menu_navigation.style.position === '') { 
      open();
      stopAnimation();
    } else {
      close();
    }
  }
  
  function close() {
    var menu_navigation = document.getElementById('menu');
    if (menu_navigation.style.position !== 'fixed') {
      menu_navigation.style.position = 'fixed';
      menu_navigation.style.left = '-15%';
      menu_navigation.style.witdh= '100%';
      menu_navigation.style.height = '100%';
    }  
  }
  
  function open() {
    var menu_navigation = document.getElementById('menu');
    if (menu_navigation.style.position !== 'relative') {
      menu_navigation.style.position = 'relative';
      menu_navigation.style.left = '0';
      menu_navigation.style.widh = 'auto';
      menu_navigation.style.height = 'auto';
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#content {
    display: -ms-grid;
    display: grid;
    
    -ms-grid-columns: 15% minmax(85%, 1fr);
    grid-template-columns:  15% minmax(85%, 1fr);
    
    -ms-grid-rows: 1fr;
    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
  
  
  .menu {
    background: #D2691E;
    position: fixed;
    left: -15%;
    height: 100%;
  
    -ms-grid-row: 1;
    grid-row-start: 1;
    
    -ms-grid-row-span: 1;
    grid-row-end: 1;
  
  }
  
  .content-area {
    background: #191970;
      
    -ms-grid-row: 1;
    grid-row-start: 1;
    
    -ms-grid-row-span: 1;
    grid-row-end: 1;
    
    -ms-grid-column: 2;
    grid-column-start: auto;
    
    -ms-grid-column-span: 2;
    grid-column-end: span 2;
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div id='content'&gt;
  &lt;div class='menu' id='menu'&gt;&lt;/div&gt;
  &lt;div class='content-area'&gt;
  &lt;button onclick=toggleLeft() &gt;Show/hide 'left: -15%'&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/mfo4qk9dv2ua5iksttbnqx64c/arkbpyLL/" rel="nofollow noreferrer">Code above on JSFiddle</a></p>
  
  <hr>
  
  <p>I have tried setting <code>-ms-grid-column</code> to <code>auto</code> for <a href="https://jsfiddle.net/mfo4qk9dv2ua5iksttbnqx64c/a2ssxvLk/1/" rel="nofollow noreferrer">first (JSFiddle)</a> and <a href="https://jsfiddle.net/mfo4qk9dv2ua5iksttbnqx64c/arkbpyLL/1/" rel="nofollow noreferrer">second (JSFiddle)</a> (I guess this one is as close as I could get to the required result) examples above, though desired result still not achieved.</p>
  
  <p>My questions are:</p>
  
  <ol>
  <li>What is the recipe to achieve desired grid layout in IE11, with plain CSS (i.e. without using pre-processors etc.)?</li>
  <li>Is grid a good approach to use giving that I need an IE11 support, or some other approach is advised (if so, what might it be)?</li>
  </ol>