Two sentences from Rachel Andrew that explain when to reach for which layout choice:
…Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two
Susy provides you with the tools to build your own grid layouts that match the needs of your website. It gives you the freedom and flexibility to build any design that you can imagine. It doesn’t matter if your design …
The grid-template-rows and grid-template-columns properties are the primary CSS properties for establishing a grid layout, once the element is a grid context (display: grid;).
There are also -ms-grid-columns and -ms-grid-rows, which are the old IE version of …
The grid-row and grid-column properties define which row or column an element will be displayed on.
.element {
grid-row: 1 / 2;
grid-column: 3 / -1;
}Here’s an explicit 3 × 3 grid where these properties are used to …
Let’s say you have a bunch of images you want to display, and the goal is to get them edge-to-edge on the browser window with no gaps. Just because you think that would be cool. They are of all different …
