Everyone who wants to become a web developer or a web designer needs to start by learning HTML and CSS. The HTML (HyperText Markup Language) is only for structured a page and CSS (Cascading Style Sheets) which adds more styles on the page. In this tutorial, we will focus on CSS. If you've used CSS for a while you've probably been using the bloc modal where you assigned width, percentage, position and using float to arrange items on a page. If you want three rows on a page you have to do some margins or padding and do all types of Math to fix your items on the page. Now you don't need to worry about all of this. Flexbox and grid take care. 1. What is Flexbox? Flexbox is called again flexible box model. It's a CSS3 Layout that provides an easy and clean way to arrange items within a container. It is responsive and mobile-friendly can even work well on small screens, of course, you have to use media queries to make that work even better. Positioning child element is much easier and flex containers their margin don't collapse with the margin of their content. And another great future is that for example you have the main column, the header and a sidebar, if you want to change the order of elements you don't need to edit your HTML file you can simply assign the order property. How flexbox works First of all, we have to assign a display property to flex. All of our elements are in a flex container and inside flex container, we have child element or flex items. Example of using flex with a simple calculator design HTML code < = > <input = type= value= /> < = > < > </ > < > </ > < > </ > < > </ > < > </ > < > </ > < > </ > < > </ > < > </ > < >.</ > < >=</ > < >/</ > </ > </ > div class "container" class "screen" "num" "" div class "num" div 1 div div 2 div div 3 div div 4 div div 5 div div 6 div div 7 div div 8 div div 9 div div div div div div div div div CSS code { : ; : ; : ; : flex; : column; : center; : center; } { : flex; : space-around; : solid black; : center; : wrap; : ; } > { : ; : ; : flex; : center; : center; : ; : solid white; } > { : ; } { : ; : black; : ; : border-box; : ; : none; } { : white; } .container padding 0px margin 0px height 100vh display flex-direction justify-content align-items .num display justify-content border 1px align-items flex-wrap width 300px .num div width 33% height 50px display justify-content align-items background #ddd border-bottom 1px .num div :nth-child(odd) background #ccc input width 302px background-color padding 10px box-sizing height 7vh border input [value=""] color The result now on browser As you may see we didn't have to write many codes as we could with position and float model. 2. What is grid ? Grid allows us to create two dimensions layout and align-items in both columns and rows. All our layout tools have been contented out in one dimensional. That means you apply a layout to an individual item and you have to relate that item to other things. What we need is a two dimensional so we don't have to define the layout every time. And that what CSS Grid gives us. Let us build our calculator with grid layout HTML code < = > <input = type= value= /> < = > </ > < = > </ > < = > </ > < = > </ > < = > </ > < = > </ > < = > </ > < = > </ > < = > </ > < = >.</ > < = >=</ > < = >/</ > </ > div class "container" class "screen" "num" "" div class "num" 1 div div class "num" 2 div div class "num" 3 div div class "num" 4 div div class "num" 5 div div class "num" 6 div div class "num" 7 div div class "num" 8 div div class "num" 9 div div class "num" div div class "num" div div class "num" div div CSS code { : ; : ; : solid black; : ; : ; : grid; : fr fr fr; } > { : ; : ; : border-box; : ; } { : ; : black; : ; : border-box; : ; : none; : / ; } { : white; } > { : ; } .container padding 0 margin 0 border 1px width 300px height 250px display grid-template-columns 1 1 1 .container .num background #ddd height 50px box-sizing padding 15px 0 0 45px input width 300px background-color padding 10px box-sizing height 7vh border grid-column 1 4 input [value=""] color .container div :nth-child(odd) background #ccc The result on the browser So with our two powerful layouts we have a good way to style our pages. We don't need again to struggle our mind with the use of float. And in my opinion grid is not better than flex like flex also is not better than grid. these two layouts are complementary.
