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.

Flow

CodePen

Javascript: From Objects to Factory Functions And Modules

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Getting The Perfect Layout in CSS: Grid + Flexbox

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Arrays vs. Linked Lists: Which Is Better?

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Arrays vs. Linked Lists: Which Is Better?

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps