title: What is the difference between display:grid and display:inline-grid?
body: <p>What is the difference between <code>display:grid;</code> and <code>display:inline-grid;</code>?</p>
  
  <p>They both have the same effect in this code. Which one is better to use, in this code?</p>
  
  <pre><code>&lt;body&gt;
   &lt;main&gt;
     &lt;p&gt;box1&lt;/p&gt;
     &lt;p&gt;box2&lt;/p&gt;
     &lt;p&gt;box3&lt;/p&gt;
     &lt;p&gt;box4&lt;/p&gt;
   &lt;/main&gt;
  &lt;/body&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>* {
    margin: 0px;
    padding: 0px;
    border: 0px;
    box-sizing: border-box;
   }
  
  main {
   display: grid; /* Not there */
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: 100px;
   grid-gap: 20px;
  }
  
  p {
   background-color: #eee;
   /* In there */
   display: grid; /* inline-grid */
   place-items: center;
  }
  </code></pre>