Digital Ocean logo

CSS-Tricks is joining the DigitalOcean community! We are so excited to be joining forces. Learn more about this change here. As a special welcome offer, enjoy $100 of free credit to try DigitalOcean on us.

Direct link to the article grid-template


The grid-template CSS property is a shorthand that allows you to define grid columns, rows, and areas in a CSS grid container with one declaration.

.grid-container {
  display: grid;
    "header  header"
    "sidebar main"   1fr
    "footer  footer" min-content
    / 250px   
Avatar of Mojtaba Seyedi
Mojtaba Seyedi on (Updated on )