CSS Grid Template Area

Greem

Jan 30, 2025

--

Share

.parent {
  grid-template-areas: 
      "title title title"
      "intro intro intro"
      "img img img"
      "btn btn btn"
      "projects projects projects"
}

.parent > .title {
  grid-area: title;
}

.parent > .hero-intro {
  grid-area: intro;
}

.parent > .hero-cta-btn {
  grid-area: btn;
}

.parent > .hero-img {
  grid-area: img;
}

.parent > .hero-project {
  grid-area: projects;
}

@media (min-width: 35rem){
  .parent {
    grid-template-areas: 
        "intro btn btn"
        "title title title"
        "img img img"
        "projects projects projects"
        "projects projects projects";
  }
}

@media (min-width: 45rem){
  .parent {
    grid-template-areas: 
        "intro btn projects"
        "title title title"
        "img img img";
  }
}