Responsive Layouts: Flex, Grid and Multi-Column

In this book, I will explain the three best-known responsive layouts: the flexbox, the grid and the multi-column layout. Flexbox is a one-dimensional layout that only works in one dimension at a time, either horizontally or vertically. The grid layout is a two-dimensional layout that distributes the elements horizontally and vertically at the same time. The multi-column layout is a special layout for magazines and newspapers where the text should flow in columns with spacing, rules and so on. I'll explain all the properties and their values and how they affect the distribution of elements on the screen. Let's get started.