CSS Grids and FlexBox, the perfect properties for awesome layouts
You must be wondering how beautiful most media organs websites like The NextWeb and NewsNow look today. You must also be wondering how such magnificient designs and layouts can be achieved as you take your baby steps into Front end web development.
Before joing Microverse, I had the same feeling like you, but today I can confidently get any web layout. Just sit tight and get your seat belt as we get on this ride.
A Website Layout
A website layout is a pattern (or framework) that defines a website’s structure. It has the role of structuring the information present on a site both for the website’s owner and for users. It provides clear paths for navigation within webpages and puts the most important elements of a website front and center.
With HTML5, we have semantic tags like <header>, <nav>, <main>, <section>, <aside>, <article> and <footer> which helps a great deal in layouts.
Getting an excellent postioning of elements using these sematic tags becomes very easy with the use of CSS grids and CSS flexbox.
CSS Grid and CSS Flexbox as Web Layout Technologies
CSS Grid and CSS Flexbox are complimentary web layout technologies that have been hotly anticipated for years. However, despite some superficial similarities they are actually used for very different tasks; they each solve a very different set of problems.
The ideal situation for this layout technologies is to apply both for different layout tasks. As begineer in Front end web development, you will be pondering now on which technology you should use to achieve those beautiful pleathora of websites you see out there daily.
In this article, we would look at their differences, look at how they solve various layout problems and help you choose which one is the right solution for your problem.
Grid is container, flexbox is content
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element’s children (which become Grid Items).
You can get a complete guide on grid here https://css-tricks.com/snippets/css/complete-guide-grid/ and for flexbox here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In flexbox layout, the size of a cell (flex-item) is defined inside the flex-item itself, and in the grid layout, the size of a cell (grid-item) is defined inside the grid-container.
This might be confusing right?
Let’s look at quick example.
Below is the HTML code to create a row of elements
We style it using flexbox as below
We defined the size of the cells inside the flex-item by setting flex: 1 1 auto;. The flex property is shorthand to set flex-grow, flex-shrink, and flex-basis properties in one statement; its default value is 0 1 auto. Notice the “row” div is the flex-container, and we don’t set the size of the items there. We set the size inside the flex-item.
When previewed in a browser we get a row of boxes, as you would expect:
Now, lets generate same output using grid:
The above code gives the same output.
Notice, now we are defining the cell’s size using grid-template-columns inside the grid-container (.row), not the grid-item.
This is an important difference. It shows that the flexbox layout is calculated after its content is loaded whereas the grid layout is calculated regardless of the content inside it. So, if possible, avoid using flexbox to build the overall layout of your website.
Grid has a gap, but gap still on the way for flexbox
You can advance the gap property as major difference between grid and flexbox. This property creates gutter between grid-items.
We can modify (see highlighted line of code) the CSS code for grid layout as follows:
When previewed with the browser,
Flexbox is one dimensional, Grid is two dimensional
Tables have always been used to arrange elements into rows and columns in the past, but this can be achieved with grid and flexbox.
Flexbox is best for arranging elements in either a single row, or a single column (one dimensional). Grid is best for arranging elements in multiple rows and columns (two dimensional).
Flexbox one dimensional display is commonly used in social share buttons at the footer of websites.
We can implement this using flexbox like this:
The justify-content property determines how the extra space of the flex-container is distributed to the flex-items. The space-around value distributes the space in such a way that the flex-items get placed evenly with equal amount of space around them.
It can be previewed in a browser as below:
Let’s now look at commonly used two-dimensional layout. We can implement this layout with a single row or column. We need multiple rows and columns and that is where we use CSS grids.
An example is the page layout below:
We are creating two columns using the grid-template-columns property, and three rows using grid-template-rows property. The repeat() function creates 3 rows with auto height.
Then, inside the grid-items (header, main, aside, and footer) we define how much area those grid-items will cover using the grid-area property.
Browser preview is as below:
The use of flexbox and grids minimize the use of media queries. That’s because Flexbox and Grid layouts are built on concept of responsiveness.
Will CSS Grid cause Flexbox to go obsolete in future?
Absolutely not.
CSS grid and Flexbox, both are designed to solve a different set of problems.
