The idea of grids has been around for some time. We can see it in editorial layouts like newspapers, magazines, books, and even maps. Grids help to organize and structure content in a way that is meaningful and easy to understand.
In the past, lists, tables, and floats were used to achieve web page layouts, but these methods have their limitations. With the advancement of mobile devices, web pages needed to adapt to be viewable on a multitude of screen sizes. In 2012, CSS grid was introduced as a companion tool to the Flexbox, which was released in 2009. Together these tools helped web pages break out of the rigid and static layouts of the past and into the responsive and adaptable pages we have come to expect. So, what's the difference between Flexbox and CSS grid? Click on tabs below to learn a little more about each layout method.
Flexbox is ideal for content alignment and is one-dimensional in its capabilities. It can adjust and shift web elements in a row or column layout. Since its function is linear, this makes it a great option for small-scale layouts.
CSS grid works in two dimensions. This allows us to adjust, shift, and reorder web components in columns and rows simultaneously. We can tell these components to grow, shrink, hide, or even overlap one another to create some truly complex and dynamic layouts.
In this lesson, you will learn the fundamentals of using the CSS grid and how to customize your grid to create dynamic and flexible web layouts.
