CSS Grid Guide

CSS Grid is a powerful layout system for the web. It allows you to create complex layouts with ease, making it a popular choice for modern web design.

Getting Started

CSS Grid is a two-dimensional layout system, meaning it can handle both rows and columns. Here's a basic example of how to set up a CSS Grid layout:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  text-align: center;
}

Grid Line Names

Grid line names are a way to refer to specific lines within the grid. This can be useful when you want to align items or create complex layouts.

.grid-container {
  display: grid;
  grid-template-columns: [start1] 1fr [end1] 1fr [start2] 1fr [end2];
  grid-template-rows: [top] 1fr [bottom];
  grid-gap: 10px;
}

Responsive Grid

CSS Grid is also responsive, meaning you can easily adjust the layout for different screen sizes. You can use media queries to change the number of columns or the size of the grid items.

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

Additional Resources

For more in-depth information on CSS Grid, check out our CSS Grid Deep Dive.