Getting The Perfect Layout in CSS: Grid + Flexbox

The main goal of this article is to give a solid, working foundation for creating the frame for any layout using CSS. We will see how the grid and the flexbox work hand in hand to make your life easier when it comes to designing web pages. 

The world before grid and flexbox

Layouts originally were designed using blocks, inlines, floats and positioning.  So let’s briefly look at what was happening before.

Position - elements are specified with attributes and their respective behaviors. Here is a pen with more info on it. https://codepen.io/simandebvu/pen/ZEbvPRL

Floats - elements are ‘floated’ (Yeah literally that!. They are removed from the normal flow of the page. ) In simplest use, float can be used to wrap around images. Want more ? Check this pen 

https://codepen.io/simandebvu/pen/rNOpbMJ

So as you can see, we had to be pretty ingenious so as to make the fancy looking websites and bend layouts to our will.

Enter the Flexbox

Enter the x-axis! So the flexbox is basically arranging elements/parts of a page horizontally or vertically. This means that you could layout the entire website with a wonderful blend of rows and columns. 

Example below will be a flex box with four items.

Why is it called a flexbox? - Think of it this way, a flexbox is just a flexible box ! So this layout is just a modification of a box that can stretch horizontally or vertically. 

Here are the five most commonly used features of flexbox:

• Specify the direction of the flex items (flex-direction). 
• Specify the alignment of the flexbox (justify-content).
• Wrap the flex items (flex-wrap).
• Align the flex-items (align-items).
• Specify the order of items (order).

Want to try them out ? You can do so on this pen

When working with one axis at a time wants to be improved upon more- we then have the gridview.

Enter the Grid

Started with x-axis or y-axis at a time but now we have a  grid (x,y)- axis !

Now we have been empowered to layout pages with rows and columns. 

Picture below shows what we now be working with

Why Grid? It will be working like a grid where we now have the luxury of precisely placing items on our webpages. Let's look at some of the most common grid properties.

Design the grid layout(grid-template-areas/grid-template-rows+grid-template-columns).

Specify Item location(grid-area/grid-row+grid-column/grid-row-start/grid-column-start).

Specify space between grid items (gap/grid-column-gap/grid-grow-gap).

Want to try them out ? You can do so on this pen

So where do these meet? Some people think that a flex and grid cannot work together at the same time, but that is not true! You can use them at the same time. Here is a strategy you can use, grid for the entire layout and then use the flex to refine/tweak the items within the grid.