Are you wondering about the difference between the layout tools CSS grid and flexbox? Looking for some good references? Take a look at the free resources linked on this page.


First, let’s see how the World Wide Web Consortium (W3C) defines these two layout modules:

CSS Grid Layout Module

A two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.

W3C https://www.w3.org/TR/css-grid-1/

CSS Flexible Box Layout Module

A CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

W3C https://www.w3.org/TR/css-flexbox-1/

Online Resources

CSS Grid

CSS Grid Full Course by freeCodeCamp.org

A comprehensive guide to Grid — originally created by Chris.House and maintained by CSS-Tricks.com — about the most powerful layout system available in CSS.

Flexbox

Flexbox CSS in 20 Minutes by TraversyMedia

A comprehensive guide to CSS flexbox layout by CSS-Tricks.com. You will find answers to everything about flexbox as well as a browser support chart.

Happy Learning!