Photo by Andrew Schultz on Unsplash
Every one who want 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. Flex box and grid take care.
1. What is Flex box?
Flex box 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 works good 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 an other great future is that, for example you have the main column, the header and a side bar, 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 flex 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
The result now on browser
As you may see we didn’t have to wright many codes as we could with position and float model.
2. What is grid ?
Grids allow 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
Result on the browser
So with our two powerful layout we have a good way to style our pages. We don’t need again to struggle our mind with the use of float.