Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Praesent mauris. Fusce nec tellus sed augue semper porta.

Suspendisse consequat ornare venenatis. Suspendisse mi quam, consequat sit amet lectus vitae.

Getting Started with Grid

Lorem ipsum dolor sit amet, consectetur adipiscing elit:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Grid Template Areas

Vestibulum ante ipsum primis in faucibus:

.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar content ads"
    "footer footer footer";
}

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

Responsive Layouts

Lorem ipsum dolor sit amet, consectetur adipiscing elit:

@media (min-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

Common Grid Patterns

Aliquam erat volutpat. Donec nec urna vitae lacus:

/* Card grid with minimum sizes */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

"Lorem ipsum dolor sit amet. CSS Grid revolutionizes web layout design."
— CSS Grid Guide