Sep 2, 20223 min read

Difference between Grid and Flexbox

What is Grid?

Grid is a two-dimensional grid-based layout system with rows and columns, making it easier to design web pages without having to use floats and positioning. Like tables, grid layout allow us to align elements into columns and rows.

You should consider using grid layout when:

You have a complex design to work with and want maintainable web pages
You want to add gaps over the block elements

The Grid container properties are:

column-gap - Specifies the gap between the columns
gap - A shorthand property for the row-gap and the column-gap properties
grid - A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-area - Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-auto-columns - Specifies a default column size
grid-auto-flow - Specifies how auto-placed items are inserted in the grid
grid-auto-rows - Specifies a default row size
grid-column - A shorthand property for the grid-column-start and the grid-column-end properties
grid-column-end - Specifies where to end the grid item
grid-column-gap - Specifies the size of the gap between columns
grid-column-start - Specifies where to start the grid item
grid-gap - A shorthand property for the grid-row-gap and grid-column-gap properties
grid-row - A shorthand property for the grid-row-start and the grid-row-end properties
grid-row-end - Specifies where to end the grid item
grid-row-gap - Specifies the size of the gap between rows
grid-row-start - Specifies where to start the grid item
grid-template - A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areas - Specifies how to display columns and rows, using named grid items
grid-template-columns - Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows - Specifies the size of the rows in a grid layout
row-gap - Specifies the gap between the grid rows

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: blue;
  padding: 10px;
}
.grid-item {
  background-color: white;
  border:2px solid;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>Grid Elements</h1>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Output:

Advantages:

Grid tracks are created within your stylesheet.
Reduced file sizes.
Prototyping with CSS Grid is fast and efficient.

Disadvantages:

Not supported by every browser

What is Flexbox?

Flexbox is one-dimensional layout. It is helpful in allocating and aligning the space among items in a container (made of grids). It works with all kinds of display devices and screen sizes.

You should consider using flexbox when:

You have a small design to work with a few rows and columns
You need to align the element
You don’t know how your content will look on the page, and you want everything to fit in.

The flex container properties are:

flex-direction - Defines the direction of the container to stack the flex items.
flex-wrap - Whether the flex should wrap or not?
flex-flow - flex-direction + flex-wrap
justify-content: used to align the flex items
align-items : used to align the flex items.
align-content: used to align the flex lines.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: Blue;
}

.flex-container > div {
  background-color: white;
  margin: 10px;
  padding: 30px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Flex Box</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>


</body>
</html>

Output:

Advantages:

Flex can be arranged in any direction
Flex can have its visual order reversed or rearranged.
Items can be aligned in your container or between them.
Support all browsers.

Disadvantages:

Performance issues