grid

A mega shortcut that allows you to set values for everything at once. Specifically, it can be used to specify values for the following properties:

• grid-template-rows;
• grid-template-columns;
• grid-template-areas;
• grid-auto-rows;
• grid-auto-columns;
• grid-auto-flow.

This block of code:

        
          
          .container {  grid: 50px 150px / 2fr 1fr;}
          .container {
  grid: 50px 150px / 2fr 1fr;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

...will be equivalent to this code:

        
          
          .container {  grid-template-rows: 50px 150px;  grid-template-columns: 2fr 1fr;}
          .container {
  grid-template-rows: 50px 150px;
  grid-template-columns: 2fr 1fr;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The default value. This keyword resets values for all properties included in this shortcut.

        
          
          .container {  display: grid;  grid: none;}
          .container {
  display: grid;
  grid: none;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

You can specify acceptable values for the shortcut grid-template:

        
          
          .container {  display: grid;  grid: repeat(4, 150px) / 1fr 200px 1fr;}
          .container {
  display: grid;
  grid: repeat(4, 150px) / 1fr 200px 1fr;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

You can also specify names for lines:

        
          
          .container {  display: grid;  grid:    [row1-start] 25px [row1-end row2-start] 25px [row2-end]    / auto 50px auto;}
          .container {
  display: grid;
  grid:
    [row1-start] 25px [row1-end row2-start] 25px [row2-end]
    / auto 50px auto;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Let's create two rows and two columns:

        
          
          .container {  display: grid;  grid: 200px 100px / 30% 30%;}
          .container {
  display: grid;
  grid: 200px 100px / 30% 30%;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The keyword auto-flow lets the browser understand what to create when necessary: columns or rows.

If auto-flow is on the right side of the slash, automatic columns will be created:

        
          
          .container {  display: grid;  grid: 200px 100px / auto-flow 30%;}
          .container {
  display: grid;
  grid: 200px 100px / auto-flow 30%;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

If auto-flow is on the left side of the slash, automatic rows will be created:

        
          
          .container {  display: grid;  grid:  auto-flow 30% / 200px 100px;}
          .container {
  display: grid;
  grid:  auto-flow 30% / 200px 100px;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The keyword auto-flow can be supplemented with dense. It instructs the browser that elements should try to fill up the free cells. More about how this keyword works can be found in the article on grid-auto-flow.

It's important to place this word immediately after auto-flow:

        
          
          .container {  display: grid;  grid:  auto-flow dense 30% / 200px 100px;}
          .container {
  display: grid;
  grid:  auto-flow dense 30% / 200px 100px;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

💡 Before succumbing to the temptation to write everything in one property, think twice (or even three times) about the readability of the code. Consider that grids are not such a simple technology. Not every colleague will be able to read this shortcut.

        
          
          .container {  grid:    [row1-start] "header header header" 1fr [row1-end]    [row2-start] "footer footer footer" 25px [row2-end]    / auto 50px auto;}
          .container {
  grid:
    [row1-start] "header header header" 1fr [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          .container {  grid-template-areas:    "header header header"    "footer footer footer";  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];  grid-template-columns: auto 50px auto;}
          .container {
  grid-template-areas:
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
}

        
        
          
            
            Copy
            Copied
            Failed to copy