Flex box && Grid in CSS

Flex-box

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

The two axes of flexbox:-

1. The main axis is defined by flex direction which have 4 values:-

a. row

b. row-reverse

c. column

d. column-reverse

2. Cross axis

Cross axis run perpendicular to main axis. if main axis is row wise then cross axis will be column wise.

The Flex Container

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

When creating a flex container all of the contained flex items will behave in following way:-

• Items display in a row (the flex-direction property's default is row).
• 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.

Example:-

<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.

Like tables grid layout align author to write in columns and rows.

Example:-

<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.