Difference between grid and inline-grid in CSS

This article is created to differentiate between grid and inline-grid, the two values used to define the display property in CSS.

The display: grid is used to create layout based on rows and columns, or we can say that it is used to make an element as a block-level grid container. Whereas display: inline-grid is used to make block-level grid container display inline. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .MyDivOne{display: grid;}
      .MyDivTwo{display: inline-grid;}
      .container {gap: 2px; grid-template-areas: 'h h h h' 'n m m m' 'f f f f';
         color: whitesmoke; margin-bottom: 20px;}
      .container > div {background-color: purple; padding: 4px; text-align: center;}
      #header {grid-area: h;}
      #menu {grid-area: n;}
      #content {grid-area: m; min-height: 200px;}
      #footer {grid-area: f;}
   </style>
</head>
<body>

   <h2>display: grid</h2>
   <div class="container MyDivOne">
      <div id="header">HEADER</div>
      <div id="menu">MENU</div>
      <div id="content">CONTENT</div>
      <div id="footer">FOOTER</div>
   </div>
   <div class="container MyDivOne">
      <div id="header">HEADER</div>
      <div id="menu">MENU</div>
      <div id="content">CONTENT</div>
      <div id="footer">FOOTER</div>
   </div>

   <h2>display: inline-grid</h2>
   <div class="container MyDivTwo">
      <div id="header">HEADER</div>
      <div id="menu">MENU</div>
      <div id="content">CONTENT</div>
      <div id="footer">FOOTER</div>
   </div>
   <div class="container MyDivTwo">
      <div id="header">HEADER</div>
      <div id="menu">MENU</div>
      <div id="content">CONTENT</div>
      <div id="footer">FOOTER</div>
   </div>
   
</body>
</html>

Output

display: grid

CONTENT

display: inline-grid

CONTENT

CSS Online Test

« Previous Tutorial Next Tutorial »