CSS

grid-template

A short way to declare all rows and columns within a grid container at once.

Time to read: less than 5 min

Briefly

A shortcut for the properties grid-template-rows, grid-template-columns. It allows you to write all values in one line. The main thing is not to get confused when reading afterward 😅

Example

Four rows of 150 pixels and three columns will be created: 1fr, 200 pixels, and 1fr in size:

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

How to write

You can specify all columns and rows at once, separating them with a slash /. Rows come first, followed by columns, don't mix them up!

Use all available values for the properties grid-template-rows and grid-template-columns, separating them with a slash.

Tips

Поддержка в браузерах:
О Baseline

In practice

Advice 1

🛠 In this same property, you can also set the value for grid-template-areas. But in my opinion, then the code turns into a mess and becomes completely unreadable. It’s better to use this property separately:

Better like this?

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

Or like this?

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

But there is a technical possibility, it’s up to you! 😉

Read also

We use cookies for the analytics