Introduction to Grid Properties

CSS grid approaches layout differently. As the name implies, it allows you to lay things out in a grid. While flexbox is loosey-goosey (zombly-wombly?) about where it places items and is rather flexible in its placement of those items (sometimes annoyingly so), the grid allows you both more precise control over where and how an element will be displayed and the flexibility necessary to make responsive design easy. It is, by far, the most powerful layout weapon available for dispatching zombies, but with its increase in power comes an equal increase in complexity.

Fractioning zombies: A special unit for grid

The fr unit represents a fraction of the remaining space in a grid. Your layout may have leftover space for a variety of reasons. You might want a few columns that are fixed in size, and one that flexes with screen size, or a row that flexes with the content that is put into it. You can also do things such as proportional widths. For example, having a column that’s three times the size of another column: 3fr to 1fr. The fr unit, in short, helps you knock out the horde of screen-size problems a responsive site runs into. It gives you the flexibility to have rigidly lined-up content whose layout doesn’t break at the first sign of unusual screen size or irregular length of content.