grid-area
grid-area is shorthand for placing items at specific points in a grid, whether that's spanning rows or columns. You can either set all the values on the grid item itself, or you can use grid-template-areas and specific row and column definitions in conjunction with grid-area. For grid-area alone, the 4 values are grid-row-start, grid-column-start, grid-row-end, and grid-column-end. These do exactly what you think: specify the bounds of the grid item. If you use 3 values, grid-column-end will set to auto unless you use a custom-indent for grid-column-start, then it will use that value. Same concept goes for supplying 2 values where both grid-row-end and grid-column-end behave this way. If you use grid-template-areas, you can type out where items will exist on a grid via name, and the only value you need to give to each child's grid-area is the named spaces you want them to fill. Looking at the example of this style, I feel like it's only usable if you plan on filling the entire grid with your elements because I'm not sure how you'd specify spaces between items using names. Maybe you could just specify rows/columns with specific widths and include names for them that don't get used by children, but that feels a little complicated.
Resources
Demo
CSS
IS
AWESOME