Difference between flex and grid in CSS

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

The display: flex is used to create flexible items or simply used to create a flex container, where childrens of flex container becomes flex items, and all flex items becomes flexible to flow both vertically and horizontally. Whereas the display: grid is used to create layout based on rows and columns. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .MyDivOne{display: flex;}
      .MyDivTwo{display: grid;}
   </style>
</head>
<body>

   <h2>Without flex and grid</h2>
   <div>
      <div id="header">HEADER</div>
      <div id="menu">MENU</div>
      <div id="content">CONTENT</div>
      <div id="other">OTHER</div>
      <div id="footer">FOOTER</div>
   </div>

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

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

Output

Without flex and grid

CONTENT

OTHER

display: flex

CONTENT

OTHER

display: grid

CONTENT

OTHER

Now let me show you, how the layout is created using grid layout model with the help of following example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {display: grid; gap: 2px; color: whitesmoke;
         grid-template-areas: 'h h h h' 'n m m o' 'f f f f';}
      .container > div {background-color: green; padding: 10px; text-align: center;}
      #header {grid-area: h;}
      #menu {grid-area: n;}
      #content {grid-area: m; min-height: 50vh;}
      #other {grid-area: o;}
      #footer {grid-area: f;}
   </style>
</head>
<body>

   <div class="container">
      <div id="header">HEADER</div>
      <div id="menu">MENU</div>
      <div id="content">CONTENT</div>
      <div id="other">OTHER</div>
      <div id="footer">FOOTER</div>
   </div>
   
</body>
</html>

Output

CONTENT

OTHER

However we can also use Flexbox model to create the same layout as done in above example. The detailed description is provided in its separate tutorial.

Now let me show you an example of display: flex in a way, where it is used most:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul li{list-style-type: none;}
      .fresherearth{display: flex;}
      a{text-decoration: none; background-color: green;
         color: white; padding: 12px;}
   </style>
</head>
<body>

   <ul class="fresherearth">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
   </ul>

</body>
</html>

Output

CSS Online Test

« Previous Tutorial Next Tutorial »