Flex-box

Flexbox is also known as flexible box module. It is also known as one-dimensional layout module.

The Flex Container

An area of a document laid out using flexbox is called a flex container.

  • The items start from the start edge of the main axis.
  • The items do not stretch on the main dimension, but can shrink.
  • The items will stretch to fill the size of the cross axis.
  • The flex-basis property is set to auto.
  • The flex-wrap property is set to nowrap.
<div class=”box”>
<div>One</div>
<div>Two</div>
<div>Three
<br>has
<br>extra
<br>text
</div>
</div>
.box {
display: flex;
}

CSS Grid Layout

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 3;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}

Conclusion

So, when we can use grid instead of tables to align our items in rows and column formats. For more detailed information check official documentation of Flexbox and Css Grid Layout.