Grid vs. Flexbox - CSS Tutorial

- [Instructor] Now we've had some time to quickly look at both Flexbox and Grid. So how do we choose how we're going to show our content? Which of these technologies should we use? Let's do a quick rundown of both. Flexbox was introduced in 2009. The goal is to help us build responsive web pages and organize our elements easily. Flexbox is a one-dimensional layout system that we can use to create a row or a column access layout. It makes our lives easier to design and build responsive web pages without having to use tricky hacks and a lot of float and positioning properties in our CSS code. We can order the elements the way we want and we can reverse the order of those elements. We can determine if our elements should grow or shrink. Flexbox layout is most appropriate to the components of an application, as most of them are fundamentally linear and for small scale layouts. Flexbox is content first. CSS Grid was introduced in 2012. The goal is to be able to control page layouts by working with rows and columns. CSS Grid is a two-dimensional layout system. We can work with rows and columns together, which means that it opens up a lot of different possibilities to build more complex and organized design systems. We don't have to use any sort of hacky fallbacks that we were used to using in the past. CSS layout is intended for larger scale layouts, which aren't linear in design. Grid is layout first. You should consider using Flexbox when you have a small design to implement. Flexbox is ideal when you have a small layout design with a few rows or a few columns. When you need to align elements. Flexbox is perfect for that. The only thing we should do is create a flex container using display flex, and then define the flex direction that we want. When we need a content first design, Flexbox is the ideal layout system to create webpages if you don't know exactly how your content is going to look. So if you want everything just to fit in, Flexbox is perfect for that. Flexbox strengths are layout control in one dimension, both vertically or horizontally, adjustments to justification and alignment, overriding alignment for child elements settings. CSS Grid is better when you have a complex design to implement. In some use cases, we have complex designs that we want to build, and that's where the magic of CSS Grid shows itself. The two dimensional layout system is perfect to create a complex design. We can use it in our favor to create more complex and manageable web pages, when you need to a gap between block elements. Another thing that's very helpful in CSS Grid, one that we don't have in Flexbox is the gap property. We can define the gap between our rows or columns very easily without having to use the margin property, which can cause some side effects, especially when you're working with many break points. When you need to overlap elements, overlapping elements using CSS Grid is very easy. You just need to use the grid column and or grid row properties. And then you can have overlapping elements. If we were trying to achieve the same thing using Flexbox, we would need to use some hacks such as negative margins, transforms or absolute positioning. And when you need a layout-first design, CSS Grid has your back. When you already have your layout design structure, it's easier to build with CSS Grid. You have the two dimensional layout system at your fingertips, which is going to help a lot and allow you to use rows and columns together and position elements exactly where we want. Grid strengths are layout control in two dimensions, vertically and horizontally, organizing elements anywhere inside grid cells, adjusting positioning and overriding alignment on child element settings. CSS Grid and Flexbox both are designed to solve different sets of problems. There's no one better solution over another. The best work system that we can use is to use both Flexbox and CSS Grid in our projects together, since each has its strengths in different things. CSS Grid is better for the general construction of your page. Since it's easier to model your template with it, and you can create more asymmetrical and peculiar designs. CSS Grid is better when dealing with rows and columns. Flexbox is better aligning the content within the different elements of the webpage. In Flexbox designs, when you're dealing with rows or columns, this works better. Both Flexbox and Grid allow a powerful measure of control over their respective domains. However, their capabilities are bolstered when they're combined, utilizing their respective strengths to create an extremely fluid customizable, beautiful, smooth, and simple experience.