title: How to conditionally show an element, keeping its occupied space?
body: <p>Vue.js has two conditional keywords: <a href="https://v2.vuejs.org/v2/guide/conditional.html" rel="nofollow noreferrer"><code>v-if</code> and <code>v-show</code></a> which allow for an element to be visible or not based on a condition. The difference is</p>
  <blockquote>
  <p>The difference is that an element with <code>v-show</code> will always be
  rendered and remain in the DOM; <code>v-show</code> only toggles the display CSS
  property of the element.</p>
  </blockquote>
  <p>I thought that it would have an impact on the space taken by an invisible element but in any of these cases, the space occupied by an element is none when the condition is false.</p>
  <p>This means that in, say, a span of three elements taking 100% of the width of the screen, the place of the invisible is taken by the next one, as in this example with CSS Grid:</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>new Vue({
    el: "#app",
    data: {
      visible: true
    },
    mounted() {
      setInterval(() =&gt; this.visible = !this.visible, 1000)
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#app {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  
  #app div {
    border-style: solid;
    border-width: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;div&gt;one&lt;/div&gt;
    &lt;div v-if="visible"&gt;two&lt;/div&gt;
    &lt;div&gt;three&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Is there a simple way to hide the contents of the element (making it invisible), but keep its space?</strong>
  (to have, in the example above, the central element appearing and disappearing - but with the two other ones not moving)</p>