What is the difference between display:grid and display:inline-grid? : <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>
