465 reads

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

by Ruben Paz ChuspeFebruary 16th, 2020

Too Long; Didn't Read

The Different Ways to Start Project using Floats, Flexbox, and Grid CSS is an article about my experience on this CSS & HTML path. 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. I don't consider myself an expert but this help me to have a better idea about working with this approaches. I already publish the code on GitHub so you can have the code and look on your local.com.

Companies Mentioned

Coin Mentioned

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

As a beginners sometimes we are trying to learn and understand about CSS (Cascading Style Sheets) 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 Float, Flexbox and Grid, 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 CSS & HTML path and maybe this will help other beginners to have a fast view and better understanding about it.

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 GitHub so you can have the code and look on your local.

>>fork the repository<<

EXAMPLE 1

Layout with Float approach

<!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>Document</title>
</head>
<body>
    <header>THIS IS FLOAT - This is the header</header>
    <main>
      <aside>Aside left</aside>
      <section>Main section</section>
      <aside>Aside right</aside>
    </main>
    <footer>I'm on the last part </footer>
</body>
</html>

body {
  text-align: center;
  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: left;
  width: 15%;
}

section {
  background-color: #242b2a;
  height: 400px;
  float: left;
  width: 70%;
}

footer {
  background-color: #ed6464;
  height: 100px;
  width: 100%;
  float: left;
}

As you can see on this first example about using floating positioning 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 main tag, float is always moving according to the parent.

Layout with Flexbox Approach

<!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>Document</title>
</head>
<body>
    <header>THIS IS FLEXBOX - This is the header</header>
    <main>
      <aside>Aside left</aside>
      <section>Main section</section>
      <aside>Aside right</aside>
    </main>
    <footer>I'm on the last part </footer>
</body>
</html>

body {
  text-align: center;
  font-size: 37px !important;
  color: #fff;
  font-weight: 900;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: column;
}

main {
  display: flex;
  flex-flow: row;
}

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

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

<!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>Document</title>
</head>
<body>
    <header class="item1">THIS IS FLEXBOX - This is the header</header>
    
      <aside class="item2">Aside left</aside>
      <section class="item3">Main section</section>
      <aside class="item4">Aside right</aside>
    
    <footer class="item5">I'm on the last part </footer>
</body>
</html>

body {
  text-align: center;
  font-size: 37px !important;
  color: #fff;
  font-weight: 900;
  width: 100%;
  display: grid;
  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: hdr; }
.item2 { grid-area: mnu; }
.item3 { grid-area: prc; }
.item4 { grid-area: rig; }
.item5 { grid-area: ftr; }

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 display grid on the parent element, in this case the body element is the parent, just to clarify is it not necessary using body like a parent, we have header, aside and footer on the same level.

For this example we are making use of the property grid-template-areas and grid-area, 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.

EXAMPLE 2

Layout with Float approach

<!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>Document</title>
</head>
<body>
  <header>This is demo 2 . I'm the header </header>
  <main>
    <article>Article #1 </article> 
    <article>Article #2</article>
    <article>Article #3</article>
  </main>
  <aside> Hey I'm on the left</aside>
  <footer>I'm the last one</footer>
</body>
</html>

body {
  text-align: center;
  font-size: 37px !important;
  color: #fff;
  font-weight: 900;
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  background-color: #626362;
  height: 115px;
}

main {
  float: left;
  width: 80%;
}

article {
  background-color: #78668a;
  height: 130px;
  width: 100%;
  float: left;
  border-bottom: 1px white solid;
}

aside {
  background-color: #a56daa;
  height: 393px;
  width: 20%;
  float: left;
}

section {
  background-color: #242b2a;
  height: 400px;
}

footer {
  background-color: #ed6464;
  height: 120px;
  width: 100%;
  float: left;
}

Layout with Flexbox Approach

<!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>Document</title>
</head>

<body>
  <header>This is FLEXBOX . I'm the header </header>
  <main>
    <div class="articles">
      <article>Article #1 </article>
      <article>Article #2</article>
      <article>Article #3</article>
    </div>
    <aside> Hey I'm on the left</aside>
  </main>

  <footer>DEMO 2 - FOOTER</footer>
</body>

</html>

body {
  text-align: center;
  font-size: 37px !important;
  color: #fff;
  font-weight: 900;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
}

header {
  background-color: #626362;
  height: 115px;
}

main {
  width: 100%;
  background-color: turquoise;
  display: flex;
  flex-flow: row;
}

article {
  background-color: #78668a;
  height: 130px;
  width: 100%;
  border-bottom: 1px white solid;
}

.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

<!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>Document</title>
</head>

<body>
  <header class="item1">This is GRID - I'm the header </header>
  <main class="item2">    
      <article>Article #1 </article>
      <article>Article #2</article>
      <article>Article #3</article>  
  </main>
  <aside class="item3"> Aside</aside>
  <footer class="item4">DEMO 2 - FOOTER</footer>
</body>

</html>

body {
  text-align: center;
  font-size: 37px !important;
  color: #fff;
  font-weight: 900;
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  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: turquoise;
}

article {
  background-color: #78668a;
  height: 130px;
  width: 100%;
  border-bottom: 1px white solid;
}

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: hdr; }
.item2 { grid-area: prc; }
.item3 { grid-area: rig; }
.item4 { grid-area: ftr; }

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 Float, Grid and Flexbox 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.