Flexbox Vs. CSS Grid or What Should You Use as Basic CSS Layout

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

<div class="container">
  <input class="screen" type="num" value="" />
  <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

.container {
  padding: 0px;
  margin: 0px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 }
        
.num {
  display: flex;
  justify-content: space-around;
  border: 1px solid black;
  align-items: center;
  flex-wrap: wrap;
  width: 300px;
}

.num>div{
  width: 33%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ddd;
  border-bottom: 1px solid white;
}

.num>div:nth-child(odd) {
  background: #ccc;
}

input {
  width: 302px;
  background-color: black;
  padding: 10px;
  box-sizing: border-box;
  height: 7vh;
  border: none;
}

input[value=""] {
  color: white;
}

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

<div class="container">
  <input class="screen" type="num" value="" />
  <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

.container {
  padding: 0;
  margin: 0;
  border: 1px solid black;
  width: 300px; 
  height: 250px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
        
.container>.num {
  background: #ddd;
  height: 50px;
  box-sizing: border-box;
  padding: 15px 0 0 45px;
}

input {
  width: 300px;
  background-color: black;
  padding: 10px;
  box-sizing: border-box;
  height: 7vh;
  border: none;
  grid-column: 1/4;
}

input[value=""] {
  color: white;
}

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