Get to know Flexbox and CSS Grid (Definition, History, and Application Examples)

Get to know Flexbox and CSS Grid (Definition, History, and Application Examples)

Most of the web pages on the internet that you come across today, are written in combination HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets).

In short, HTML defines the content and logical structure of the page, while CSS determines the appearance such as colors, fonts, formatting, layout, and style.

{getToc} $title={Table of Contents}

Let’s start learning about Flexbox and Grid.. 🙂

What is Flexbox?

CSS flexbox is a special way to define HTML page layout,

One of the most defining features of flex layout is its ability to adapt its shape, based on its viewing environment.

Flexbox can adjust its size—either shrink, to avoid an unnecessary monopoly of space, or increase to make room for content that is constrained within its boundaries.

On the other hand, Flex less restrictive in terms of content flow than, for example, type Block Layout and inlinewhich is generally uni-directional.

Path or direction flex can be set right, left, up, or down. Individual items in flex container can also be automatically rearranged and rearranged to fit the available layout space.

Getting to Know the History of Flex

Intensive use of the Web in the 2000s by Mobile Agentmotivating “liquid-layout” and responsive elements for a larger variety of screen sizes.

In the 2010s, intensive use Framework Popular JavaScript, like Bootstrapinspired by Flexbox, and Grid Layout.

The CSS 3 module includes solutions similar to this, such as flexbox and grid.

As of September 2020 , 98.69% of installed browsers (99.29% desktop browsers and 100% mobile browsers) support Layout CSS Flexbox.

From the reference I got, this Flexbox project started from 23 July 2009, with the latest version ( Level 1 Flexbox, 9 november 2018 ) – see reference

What is Grid CSS Layout?

CSS Grid can create more asymmetrical layouts than previous grid layouts like CSS floats. CSS Grid It also allows for more standard code that works across browsers.

One problem with using float in CSS is if content is added to one part of the page it can disrupt the flow of the page and break the layout. This is due to varying heights for layout elements. Although flexbox CSS supports flexible layouts and provides the flexibility to create complex layouts, but this grid system failed when the need to create responsive layouts in 2-dimensional space began to emerge.

Getting to Know the History of CSS Grids

CSS grids it has native name CSS Grid Layout Level 1 this was first published April 7, 2007, latest version Level 1 on December 18, 2020 – read reference

For the preview version which is level 2 on March 11, 2021 W3C Candidate Recommendation Draft

Chrome, Firefox, Safariand Edge all of them support CSS grids Since October 2017 without vendor prefix. IE 10 and 11 support CSS grids but with outdated specs. On mobile, all modern browsers support CSS grids except Opera Mini and Brave Browser . Web developers targeting older browsers can use Modernizr 3.5.0 to detect and take down web pages as needed.

Example of Code Deployment with Flexbox CSS

flex sample

.container {
display : flex;
flex-direction : row;
background-color: lightblue;
.container > div {
background-color: #ff6161;
margins: 10px;
padding: 20px;
font-size: 30px;
@media (max-width: 700px) {
.container {
flex-direction: column;
.container>div {
margin-right: 10px;
margin-bottom: 10px;








Now, try to copy it to Notepad -> Save as ( choose all formats ) Becomes Flex Sample.html

notepad to html

Then, please go to html files that you created earlier, then double click, it will open in default browser you.

What is the difference between Flex and Grid?

Both of them make the display responsive.. that’s the point.. so your website can adjust well on desktop and mobile devices.. 🙂

Example of Code Implementation using GRID CSS

Here are some examples of applying GRID CSS for multiple purposes..

This is an example of applying the Grid to create a Navigation Menu

Grid sample

Save it the same way as Flexbox earlier using notepad, then save to html. After that click the html file.

The result?

Result of creating menu with grid

that’s the application for the menu bro…. 🙂

Example of applying CSS Grid for Table











Example of Application of CSS Grid in Web Design

The header

The footer

The left panel

The main content area

The right panel

Flex vs Grid Conclusion

To give a simpler understanding, you can see the image below, as a comparison of Grid and Flexbox.

flex vs grid

That’s for simple understanding, so Flexbox is for 1 dimension (because it’s 1 dimension, so it’s in the same direction) and Grid for 2 dimensions (we can explore more in 2 directions). CSS Grid Focus is better for layouting sections Web content. While Flexbox focuses / is better on layouting in the component.

Flexbox definitely the right way If you are creating a standard/simple website only need one direction only, flex give you layout benefits float, without you having to make any weird modifications to achieve certain functionality. If you want to create a web application that is complex and has many features and requires a lot of fragmented parts, perhaps like bricks arranged to make a building, or more simply understanding, application with a lot of content/controls, you might consider using a grid system / grid for your base layout.

Then can the CSS Grid replace Flexbox?

Not. I do not think so.

Grid is much newer than Flexbox and has less browser support. That’s why it makes sense to wonder if CSS grids are here to replace Flexbox.

There are some interesting arguments about Grid and Flexbox:

  • Grid can do things that can’t be done Flexbox.
  • Flexbox can do things that can’t be done Grid.
  • Grid and Flexbox can work together: item GRID can be Container / receptacle flexbox. Items Flexbox can be a container Grid.

Remember, friend, I discussed above, that most browsers already support GRID, if it’s 2021 now, I’ve seen the realization for myself.

And both of them are the same W3C

Hehe, just use the blogspot template, right? 🙂

That’s all for the discussion about Flexbox and CSS Grid, I hope it’s useful.

For you guys, I’ve included the source reference support for you to learn, it comes directly from the source, but I have changed the url to translate, so you can immediately learn CSS FLEX, or GRID.

Create by Ipadguides in category of Blog