As a beginners sometimes we are trying to learn and understand about CSS ( ) and the huge amount of documentation and tutorials we can find on internet, as a Microverse student I also spend some time working on different challenges and having the chance to apply this different approaches on my projects like , and for sure I have to mention that even after facing some cloning site projects I don't consider myself an expert but this help me to have a better idea about working with this approaches; after my firsts steps I fell like making an article about my experience on this path and maybe this will help other beginners to have a fast view and better understanding about it. Cascading Style Sheets Float Flexbox Grid, CSS & HTML More than a comparative or telling about what is good or bad approach I will like to put on the table 2 examples of basic layouts but making use of this 3 different approaches. I will use this two different prototypes so we can have a big picture about making layout, so is important to mention that I already publish the code on so you can have the code and look on your local. GitHub >> << fork the repository EXAMPLE 1 Layout with Float approach Document THIS IS FLOAT - This is the header Aside left Main section Aside right I'm on the last part <!DOCTYPE html> < = > html lang "en" < > head < = > meta charset "UTF-8" < = = > meta name "viewport" content "width=device-width, initial-scale=1.0" < = = > meta http-equiv "X-UA-Compatible" content "ie=edge" < = = > link rel "stylesheet" href "css/float.css" < > title </ > title </ > head < > body < > header </ > header < > main < > aside </ > aside < > section </ > section < > aside </ > aside </ > main < > footer </ > footer </ > body </ > html { : center; : ; : ; : ; : ; : ;
} { : ; : ;
} { : ; : ; : left; : ;
} { : ; : ; : left; : ;
} { : ; : ; : ; : left;
} body text-align font-size 37px !important color #fff font-weight 900 padding 0 margin 0 header background-color #626362 height 115px aside background-color #78668a height 400px float width 15% section background-color #242b2a height 400px float width 70% footer background-color #ed6464 height 100px width 100% float As you can see on this first example about using we can have the behavior we want by using float left, not a big deal, just a couple lines of code, we just need to mention here that float is aligning all element to the left or to the right, as we can see on the main section we are trying to have asides and main section on the same alignment, for this purpose is important here to have a container, in this case the tag, float is always moving according to the parent. floating positioning main Layout with Flexbox Approach Document THIS IS FLEXBOX - This is the header Aside left Main section Aside right I'm on the last part <!DOCTYPE html> < = > html lang "en" < > head < = > meta charset "UTF-8" < = = > meta name "viewport" content "width=device-width, initial-scale=1.0" < = = > meta http-equiv "X-UA-Compatible" content "ie=edge" < = = > link rel "stylesheet" href "css/flexbox.css" < > title </ > title </ > head < > body < > header </ > header < > main < > aside </ > aside < > section </ > section < > aside </ > aside </ > main < > footer </ > footer </ > body </ > html { : center; : ; : ; : ; : ; : ; : flex; : column;
} { : flex; : row;
} { : ; : ;
} { : ; : ; : ;
} { : ; : ; : ;
} { : ; : ; : ;
} body text-align font-size 37px !important color #fff font-weight 900 padding 0 margin 0 display flex-flow main display flex-flow header background-color #626362 height 115px aside background-color #78668a height 400px width 15% section background-color #242b2a height 400px width 70% footer background-color #ed6464 height 100px width 100% In the other hand flex-box,  my experience about using flex-box is was a little hard on the beginning but after playing with the even without reading all the documentation I was able to understand how it works, and for sure flex-box y oriented to make our lives easy, it is very important to understand the idea about parent and child elements, actually this is one of the important topics to understand on HTML  path. flexboxfroggy Display: flex; flex-flow: row;column The parent element tell how the behavior of child elements will be, it is impossible not to see how clean is our code. I will recommend watching this video for deep understanding. Grid video tutorial ( ) link Layout with GRID approach Document THIS IS FLEXBOX - This is the header Aside left Main section Aside right I'm on the last part <!DOCTYPE html> < = > html lang "en" < > head < = > meta charset "UTF-8" < = = > meta name "viewport" content "width=device-width, initial-scale=1.0" < = = > meta http-equiv "X-UA-Compatible" content "ie=edge" < = = > link rel "stylesheet" href "css/grid.css" < > title </ > title </ > head < > body < = > header class "item1" </ > header < = > aside class "item2" </ > aside < = > section class "item3" </ > section < = > aside class "item4" </ > aside < = > footer class "item5" </ > footer </ > body </ > html { : center; : ; : ; : ; : ; : grid; : ; : ; : ;
} { : ; : ;
} { : ; : ;
} { : ; : ;
} { : ; : ;
} { : hdr; } { : mnu; } { : prc; } { : rig; } { : ftr; } body text-align font-size 37px !important color #fff font-weight 900 width 100% display padding 0 margin 0 grid-template-areas 'hdr hdr hdr hdr hdr hdr' 'mnu prc prc prc prc rig' 'ftr ftr ftr ftr ftr ftr' header background-color #626362 height 115px aside background-color #78668a height 400px section background-color #242b2a height 400px footer background-color #ed6464 height 100px .item1 grid-area .item2 grid-area .item3 grid-area .item4 grid-area .item5 grid-area I enjoy learning grid approach, I think is very powerful like flex-box both area oriented to help us on our way to make efficient projects, for this example I had to make a couple of changes to the HTML as you can see, it is important to have the element on the same level, grid take all the elements and create like a table, I think it is a good tool : Firefox developer edition Like in Flex-box we have to set the property on the parent element, in this case the body element is the parent, , we have header, aside and footer on the same level. display grid just to clarify is it not necessary using body like a parent For this example we are making use of the property and both property work together, grid-template-areas goes on the parent element and grid-area on the classes, for making use of this feature we need to add extra classes, we need one class for every child element that inside of the parent container and in the same level, in this example we have 5 child elements grid-template-areas grid-area, . EXAMPLE 2 Layout with Float approach Document This is demo 2 . I'm the header Article #1 Article #2 Article #3 Hey I'm on the left I'm the last one <!DOCTYPE html> < = > html lang "en" < > head < = > meta charset "UTF-8" < = = > meta name "viewport" content "width=device-width, initial-scale=1.0" < = = > meta http-equiv "X-UA-Compatible" content "ie=edge" < = = > link rel "stylesheet" href "css/float-demo2.css" < > title </ > title </ > head < > body < > header </ > header < > main < > article </ > article < > article </ > article < > article </ > article </ > main < > aside </ > aside < > footer </ > footer </ > body </ > html { : center; : ; : ; : ; : ; : ; : ;
} { : ; : ;
} { : left; : ;
} { : ; : ; : ; : left; : white solid;
} { : ; : ; : ; : left;
} { : ; : ;
} { : ; : ; : ; : left;
} body text-align font-size 37px !important color #fff font-weight 900 width 100% margin 0 padding 0 header background-color #626362 height 115px main float width 80% article background-color #78668a height 130px width 100% float border-bottom 1px aside background-color #a56daa height 393px width 20% float section background-color #242b2a height 400px footer background-color #ed6464 height 120px width 100% float Layout with Flexbox Approach Document This is FLEXBOX . I'm the header Article #1 Article #2 Article #3 Hey I'm on the left DEMO 2 - FOOTER <!DOCTYPE html> < = > html lang "en" < > head < = > meta charset "UTF-8" < = = > meta name "viewport" content "width=device-width, initial-scale=1.0" < = = > meta http-equiv "X-UA-Compatible" content "ie=edge" < = = > link rel "stylesheet" href "css/flexbox-demo2.css" < > title </ > title </ > head < > body < > header </ > header < > main < = > div class "articles" < > article </ > article < > article </ > article < > article </ > article </ > div < > aside </ > aside </ > main < > footer </ > footer </ > body </ > html { : center; : ; : ; : ; : ; : ; : ; : flex; : column;
} { : ; : ;
} { : ; : turquoise; : flex; : row;
} { : ; : ; : ; : white solid;
} { : ; : ;
} { : ; : ; : ; : ;
} { : ; : ;
} { : ; : ; : ;
} body text-align font-size 37px !important color #fff font-weight 900 width 100% margin 0 padding 0 display flex-flow header background-color #626362 height 115px main width 100% background-color display flex-flow article background-color #78668a height 130px width 100% border-bottom 1px .articles flex 3 1 80% width 100% aside background-color #a56daa height 393px width 20% flex 1 1 20% section background-color #242b2a height 400px footer background-color #ed6464 height 120px width 100% Layout with GRID approach Document This is GRID - I'm the header Article #1 Article #2 Article #3 Aside DEMO 2 - FOOTER <!DOCTYPE html> < = > html lang "en" < > head < = > meta charset "UTF-8" < = = > meta name "viewport" content "width=device-width, initial-scale=1.0" < = = > meta http-equiv "X-UA-Compatible" content "ie=edge" < = = > link rel "stylesheet" href "css/grid-demo2.css" < > title </ > title </ > head < > body < = > header class "item1" </ > header < = > main class "item2" < > article </ > article < > article </ > article < > article </ > article </ > main < = > aside class "item3" </ > aside < = > footer class "item4" </ > footer </ > body </ > html { : center; : ; : ; : ; : ; : ; : ; : grid; : ;
} { : ; : ;
} { : ; : turquoise;
} { : ; : ; : ; : white solid;
} { : ; : ; : ;
} { : ; : ;
} { : ; : ; : ;
} { : hdr; } { : prc; } { : rig; } { : ftr; } body text-align font-size 37px !important color #fff font-weight 900 width 100% margin 0 padding 0 display grid-template-areas 'hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr' 'prc prc prc prc prc prc prc prc prc prc prc rig' 'ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr' header background-color #626362 height 115px main width 100% background-color article background-color #78668a height 130px width 100% border-bottom 1px aside background-color #a56daa height 393px width 100% section background-color #242b2a height 400px footer background-color #ed6464 height 120px width 100% .item1 grid-area .item2 grid-area .item3 grid-area .item4 grid-area Important links you should see: Flexbox Froggy ( ) link Grid video tutorial ( ) link opening the box model ( , ) link1 link2 Conclusion. Like a conclusion I want to say that my experience working with layouts using different approaches like , and help a lot, is a good idea having a plan before starting your project  and I hope this article will help you to make a better plan for making your next project. Float Grid Flexbox

Flow

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

The Different Ways to Start Project using Floats, Flexbox, and Grid CSS

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Ruben Paz Chuspe

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

The Different Ways to Start Project using Floats, Flexbox, and Grid CSS

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Ruben Paz Chuspe

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES