Through time has been common to compare things that can do similar functions, for the sake of electing a champion, something that is better, be it reason "y" or reason "x", and specially to be on the "right" side. If you think that you haven't done something like that maybe these topics will remind you of something, "XBOX or PlayStation?", "Android or iOS?", "Java or .Net?" and the list can go on, sometimes making a fuss about which one is better is pointless. As I started to learn more and more about Web Developments i came across two wonderful properties and , these two are used to create awesome designs, when I first learned about them I instinctively felt more liking to Flexbox and to be honest for a short period of time i thought that was better that Grid, some other members of my team at liked more Grid, we were wrong trying to get one of the two as the best. Flexbox Grid Microverse Note: this article is for Junior web developers, there is not going to be a lot of explanation for the Flexbox or Grid properties used, for a more "tutorial" minded article I would recommend this one for Flexbox and this one for Grid Flexbox Flexbox is a one-dimensional layout system, content-based, it helps us to distribute the space between the elements even with setting how much an element will grow or shrink in comparison to the other elements in the same container, one of the best options to add responsiveness at your web page. Great source to learn more about Flexbox Grid Grid is a two-dimensional layout system, it is more complex than Flexbox in certain ways, it can be really helpful to create complex layouts, with Grid we need to define how much columns and rows will it have. Awesome guide to use Grid! What can they do? Both of them are layout systems, technically we can do the same with both of them, but, in some cases Grid or Flexbox will be easier to use Create a layout For the first comparison we will do the next layout with Grid and flexbox One bar with 100% height at left One bar at the top-right corner with 50% height and 75% width Two boxes at the bottom-right cornet with 50% height and 32.5% of width each one Flexbox With Flexbox is not impossible to create a layout, but, we need to take into account that we can only distribute the space for each element in one direction per container (column or row). Codepen example! HTML for Flexbox < = > div class "container" < = > div class "left-bar" </ > div < = > div class "main-content" < = > div class "main-content-top" </ > div < = > div class "main-content-bottom" < = > div class "main-content-bottom-left" </ > div < = > div class "main-content-bottom-right" </ > div </ > div </ > div </ > div Now we will apply the styling class container { : ; : ; : flex;
} .container width 100% height 300px display .- With this, we make every direct child a flex item, we will distribute the space between the and the classes display: flex "left-bar" "main-content" class left-bar { : ; : green;
} .left-bar flex 1 background-color .- With this we make the element receive the specified proportion of free space, it will be taken as 1/n, "n" is based in the total sum of all the specified proportions in al the child elements of the class flex: 1 class: main-content { : ; : flex; : column;
} .main-content flex 3 display flex-direction .- since we are already taking 1 portion with "left-bar" means that with this set proportion we will be receiving 3/4 of the free space. flex: 3 .- now we make every direct child of the container flex items, with this we will distribute the space between the bar at the top and the two elements at the bottom. display: flex .- the elements will be arranged vertically and the free space will be distributed in the same direction flex-direction: column class main-content-top { : ; : blue;
} .main-content-top flex 1 background-color .- We take 1 proportion of the container free space flex: 1 class main-content-bottom { : ; : flex;
} .main-content-bottom flex 1 display .- we take 1 proportion of the free space flex: 1 .- we make the child a flex element, to distribute the space between the two elements at bottom display: flex class main-content-bottom-left { : ; : red;
} .main-content-bottom-left flex 1 background-color .- We set proportion of free space that is going to take flex: 1 class main-content-bottom-right { : ; : orange;
} .main-content-bottom-right flex 1 background-color .- We set proportion of free space that is going to take flex: 1 Grid With grid is easier to create layouts, we can divide the container in cells and assign how much row and column cells will it take Codepen example! HTML for Grid < = > div class "container" < = > div class "left-bar" </ > div < = > div class "main-content-top" </ > div < = > div class "main-content-bottom-left" </ > div < = > div class "main-content-bottom-right" </ > div </ > div CSS with Grid class container .- We make the container a grid container display: grid .- with this we set how much columns is going to have the container, in this case, "repeat" creates 6 columns of 1 fraction of the width of the container grid-template-columns .- This property creates a number of rows in the container, in this case we create 4 rows of 1 fraction grid-template-rows class left-bar { : span ; : span ; : red;
} .left-bar grid-column 2 grid-row 4 background-color .- we make the container to span 2 spaces of the total columns grid-column: span 2 .- we make the container to span 4 spaces of the total rows gird-row: span 4 class main-content-top { : ; : span ; : span ; : green;
} .main-content-top grid-column-start 3 grid-column 4 grid-row 2 background-color .- we make the container to span 4 spaces of the total columns grid-column: span 4 .- we make the container to span 4 spaces of the total rows gird-row: span 2 class main-content-bottom-left { : ; : ; : span ; : span ; : blue;
} .main-content-bottom-left grid-column-start 3 grid-row-start 2 grid-column 2 grid-row 2 background-color .- we make the container to span 2 spaces of the total columns grid-column: span 2 .- we make the container to span 2 spaces of the total rows grid-row: span 2 "main-content-bottom-right" class { : ; : ; : span ; : span ; : orange;
} .main-content-bottom-right grid-column-start 5 grid-row-start 2 grid-column 2 grid-row 2 background-color .- we make the container to span 2 spaces of the total columns grid-column: span 2 .- we make the container to span 2 spaces of the total rows grid-row: span 2 With Grid we don't have to make as much groups of containers as we may have to make with Flexbox, also it makes easier to move around the containers in certain breakpoints allowing us to change height and width of any element while maintaining the distribution of space of all the other elements. in this type of scenarios personally i think that it's better grid. Align elements within a container One of the most tedious and common thing to do personaly, is aligning elements, and even more when the number of elements that is shown is based on Account permissions, For this test we will use the same HTML file Item 1 Item 2 Item 3 Something at middle Something at bottom element 1 element 2 elementelementelement 3 element 4 < = > div class "container" < = > div class "left-bar" < > ul < > li </ > li < > li </ > li < > li </ > li </ > ul < > p </ > p < > p </ > p </ > div < = > div class "main-content-top" < > p </ > p < > p </ > p < > p </ > p < > p </ > p </ > div < = > div class "main-content-bottom-left" </ > div < = > div class "main-content-bottom-right" </ > div </ > div We will use basically the same CSS for Flexbox and Grid, with some changes that will be added below { : ; : ; : grid; : (6, 1fr); : (4, 1fr);
} { : span ; : span ; : red; : space-between; : white;
} { : ; : span ; : span ; : green; : space-between; : center; : white;
} { : ; : ; : span ; : span ; : blue;
} { : ; : ; : span ; : span ; : orange;
} .container width 100% height 300px display grid-template-columns repeat grid-template-rows repeat .left-bar grid-column 2 grid-row 4 background-color justify-content color .main-content-top grid-column-start 3 grid-column 4 grid-row 2 background-color justify-content align-items color .main-content-bottom-left grid-column-start 3 grid-row-start 2 grid-column 2 grid-row 2 background-color .main-content-bottom-right grid-column-start 5 grid-row-start 2 grid-column 2 grid-row 2 background-color Flexbox Aligning elements within containers it's easy with flexbox but we have to keep in mind that we can only distribute the space in one direction at the time Codepen example! HTML In the HTML we will only add the class and to the p elements inside the container. "flex-1" "flex-2" "main-content-top" element 1 element 2 elementelementelement 3 element 4 < = > div class "main-content-top" < = > p class "flex-1" </ > p < = > p class "flex-1" </ > p < = > p class "flex-2" </ > p < = > p class "flex-1" </ > p </ > div CSS class left-bar { : span ; : span ; : red; : flex; : column; : space-between; : white;
} .left-bar grid-column 2 grid-row 4 background-color display flex-direction justify-content color .- we make the container a flex container display: flex .- the elements distribute the space so they can separate equally through all the container justify-content: space-between .- set the direction in which the elements will be aligned to vertical flex-direction: column class main-content-top { : ; : span ; : span ; : green; : flex; : wrap; : space-between; : center; : white;
} .main-content-top grid-column-start 3 grid-column 4 grid-row 2 background-color display flex-wrap justify-content align-items color .- Makes container a flex container display: flex .- If there is not enough space for the elements, those will be moved to a line below flex-wrap: wrap classes flex-"n" { : ;
} { : ;
} .flex-1 flex 1 .flex-2 flex 2 These two classes are created to be able to assign more space in case the element is too big, this is perfect when we need to handle dynamic added elements Grid We already saw how helpful it is to have the possibility of adding columns and rows of any given width or height we want, but, how will this works with aligning elements? Codepen example! HTML The HTML will remain as it was presented at top CSS class left-bar { : span ; : span ; : red; : grid; : (3, 1fr); : white;
} .left-bar grid-column 2 grid-row 4 background-color display grid-template-rows repeat color .- We start by making our container a greed container display: grid .- We set the columns as 1fr and not with auto so each element has the same height grid-template-rows: repeat(3, 1fr) class main-content-top { : span ; : span ; : green; : grid; : fr fr fr fr; : center;
} .main-content-top grid-column 6 grid-row 2 background-color display grid-template-columns 1 1 2 1 align-items .- Make container a grid container display: grid .- We cant create four columns of the same height because one of the elements is bigger than the other three. grid-template-columns: 1fr 1fr 2fr 1fr Which one is better? When it comes to designing layouts it's way easier to work with Grid, we just have to divide our container with as much columns and rows we want to and set the child elements how much columns and rows do we want them to take, with Flexbox it can be more time consuming and larger HTML files since we have to create multiple containers to distribute space in different axis, in this type of cases without doubt Grid is the winner. When we have to align elements inside a container it's way easier with Flexbox, with grid we have to set how much rows or columns will have the container, even if Grid has options as implicit rows, it doesn't give us the possibility of setting dynamically the space for each column, with Flexbox in the other hand the space will be distributed between all the elements, this helps a lot with dynamic content. We can accept that there is not a better or easier technology, it depends in what we want to build, Grid works for most of the cases when we need to create layouts and Flexbox for aligning elements. Using both in the right place can help us save a lot of time and maybe the tediousness of having to modify the HTML and CSS in the future if a new feature or element is required to be shown.

CodePen

ORANGE

PlayStation

How To Avoid N + 1 problem in Rails

Follow me on Github!

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Grid vs. Flexbox: An Introduction to the Useless Battle

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How To Avoid N + 1 problem in Rails

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

How To Avoid N + 1 problem in Rails

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

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps