grid-area

A duplicitous property 🧐, which can either specify to the element which named area it needs to occupy, or serve as a shortcut for simultaneously specifying values for four properties: grid-column-start, grid-column-end, grid-row-start and grid-row-end.

An example that indicates a named area: the block item1 will occupy the area content within the grid layout.

        
          
          .item1 {  grid-area: content;}
          .item1 {
  grid-area: content;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Now an example specifying all four values in one line. When specifying values in this way there is a slippery spot: values are specified in the following order row-start / column-start / row-end / column-end. That is, first we specify both starts, then both ends.

        
          
          .item2 {  grid-area: 1 / col4-start / last-line / 6;}
          .item2 {
  grid-area: 1 / col4-start / last-line / 6;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

It is important to specify the values in the correct order. The first pair of values relates to the starting position: the first is for grid-row-start, the second for grid-column-start. The second pair of values corresponds to the ending positions: the third is for grid-row-end, and the fourth for grid-column-end.

Use the available values of the properties grid-column-start, grid-column-end, grid-row-start and grid-row-end, separating them with a slash.

Or write a keyword indicating the named area within the grid layout.