drago.cc

Using CSS grid with grid-area can be useful in certain circumstances, and especially for stacking elements without using position: absolute. For example, there's a particularly clever trick that can be used to make textarea and input elements automatically resize based on their contents.

Here's what the different versions of the shorthand translate to:

/* 4 */
grid-area: 0 / 0 / 1 / 1;
grid-area: 0 / /* grid-row-start /                            */
           0 / /* grid-column-start /                         */
           1 / /* grid-row-end /                              */
           1;  /* grid-column-end;                            */

/* 3 */
grid-area: 0 / 0 / 1;
grid-area: 0 / /* grid-row-start /                            */
           0 / /* grid-column-start /                         */
           1;  /* grid-row-end /                              */
               /* <grid-column-start's custom-ident or auto>; */

/* 2 */
grid-area: 0 / 0;
grid-area: 0 / /* grid-row-start /                            */
           0;  /* grid-column-start /                         */
               /* <grid-row-start's custom-ident or auto> /   */
               /* <grid-column-start's custom-ident or auto>; */

/* 1 */
grid-area: 0;
grid-area: 0; /* grid-row-start /                            */
              /* <grid-row-start's custom-ident or auto> /   */
              /* <grid-row-start's custom-ident or auto> /   */
              /* <grid-row-start's custom-ident or auto>;    */