Gridbox vs Flexbox.

In web development we have two main front-end technologies, and they complete each other, combined they handle the job of structuring and designing our webpages view, which are: HTML and CSS, along with other technologies such as JavaScript frameworks that are not mentioned in this post.
Let's say we have a house, we first have to build the structure of the building, the walls, floor and the ceiling, then later we will be painting the walls, decorating the house and getting the furniture in the second step.
HTML (Hyper Text Markup Language) is our structure for our webpage, CSS (Cascading Style Sheets) is the filling, decor and the furniture of the webpage.

CSS

In this post we are going to go through the two layout methods that are used in CSS to make our layout in the webpage or the software pages respectively.

Gridbox and Flexbox

Both are used to set the layout, we will need to have a parent element first to contain Child element(s), child elements of the parent container automatically becomes Flex/Grid items.

Gridbox

Grid based layout system that distribute the pages for rows and columns
A Grid Layout must have a parent element with the display property set to grid or inline-grid, child element(s) of the grid container automatically becomes grid items.

css

.element1{background:gold;} .element2{background:Gray;} .element3{background:gold;} .element4{background:Gray;} .element5{background:gold;} .element6{background:Gray;} .container { font-size: 40px; width: 100%; background: LightGray; display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px 50px; } 1 2 3 4 5 6

Result:

Flexbox

Flex based layout system distribute the elements of a row or a column
A Flex Layout must have a parent element with the display property set to Flex child element(s) of the grid container automatically becomes flex items.

css

#box-container { height: 600px; display: flex; } #element1 { background-color: gold; width: 50%; height: 50%; } #element2 { background-color: gray; width: 50%; height: 50%; }

Result:

Then using different proprieties for the parent container, or for the child element(s) one can manipulate layout further, with more enhancements and adjustments in a very flexible way.

Properties used with Gridbox:

Parent element (Container) Properties:

• grid-gap property: The spaces between each column/row are called gaps
• grid-template-columns property: defines the number of columns in your grid layout, and it can define the width of each column.
• grid-template-rows property: defines the height of each row.
• justify-content property: is used to align the whole grid inside the container.
• align-content property: is used to vertically align the whole grid inside the container.

Child element(s)(Items) Properties:

• grid-column property: defines on which column(s) to place an item,You define where the item will start, and where the item will end.
• grid-row property: defines on which row to place an item, You define where the item will start, and where the item will end.
• grid-area property: can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties.

Properties used with Flexbox:

Parent element (Container) Properties:

• flex-direction property: defines in which direction the container wants to stack the flex items.
• flex-wrap property: specifies whether the flex items should wrap or not.
• flex-flow property: is a shorthand property for setting both the flex-direction and flex-wrap properties.
• justify-content property: is used to align the flex items.
• align-items property: is used to align the flex items vertically.
• align-content property: is used to align the flex lines.

Flexbox Vs Gridbox

So the core different between two ways is that Grid Layout is a two-dimensional system , it can handle both columns and rows, but Flexbox on the other hand is a one-dimensional system (either in a column or a row).

In a more practical Example, you can use Gridbox, Flexbox, parent and child elements properties combined to make a real layout of webpage just like in the example below.

HTML Code

html

Home Features About contact Us Logout Side Bar Section 1 Section 2 Section 3 Section 4 Footer

CSS Code

css
.wrapper {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}

.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
align: center;
display: flex;
gap: 20px;
align-items: center;
}
.box1 > div:nth-child(5) {
margin-left: auto;
}

.box2 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 5;
}
.box3{
grid-row-start: 2;
grid-row-end: 5;
}

.box7 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
}

• {box-sizing: border-box;}

.wrapper {
border: 2px solid gray;
border-radius: 5px;
background-color: #fff4e6;
}

.wrapper > div {
border: 2px solid gray;
border-radius: 5px;
background-color: gold;
padding: 1em;
color: #444444;
}

What else you can benefit from using Gridbox or Flexbox?

• Responsiveness, so you will have a dynamic layout.
• Widely supported across all platforms & modern browsers.
• Easy to use.

For further reading

Flexbox
Gridbox

Comments

[Sara °°°]

Thank you for the Feedback Vikas :)