.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
  gap: 20px;
}

.grid-item {
  background: lightblue;
  padding: 20px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 columns */
  grid-template-rows: auto 1fr auto;   /* 3 rows */
  gap: 1rem;
}

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

/* Mobile first approach */
@media (min-width: 768px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.item {
  grid-column: 1 / 3;        /* Start at line 1, end at line 3 */
  grid-row: 2 / 4;           /* Start at row 2, end at row 4 */
  grid-area: 1 / 2 / 3 / 4;  /* row-start / col-start / row-end / col-end */
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;     /* Align items horizontally */
  align-items: center;       /* Align items vertically */
  justify-content: space-between; /* Align grid tracks */
  align-content: center;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

.dashboard {
  display: grid;
  grid-template-areas:
    "nav nav nav"
    "sidebar content content"
    "sidebar content content";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: 60px 1fr 1fr;
  height: 100vh;
}

.nav { grid-area: nav; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 1rem;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}