CSS Grid Cheat Sheet

CSS Grid Layout is a powerful layout system that allows you to create complex two-dimensional layouts with rows and columns. Here’s a cheat sheet covering key CSS Grid properties and concepts:

Creating a Grid Container

Define a Grid Container:

.container {
  display: grid;
}

Grid with Rows and Columns:

.container {
  display: grid;
  grid-template-rows: 100px 200px;
  grid-template-columns: 1fr 2fr;
}

Shorthand for Rows and Columns:

.container {
  display: grid;
  grid-template: 100px 200px / 1fr 2fr;
}

Grid Items

Place an Item in a Specific Cell:

.item {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

Shorthand for Placing:

.item {
  grid-area: 1 / 2 / 2 / 3;
}

Grid Lines and Gaps

Row and Column Gaps:

.container {
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}

Shorthand for Gaps:

.container {
  grid-gap: 10px 20px;
}

Responsive Grid

Auto-Fill and Minmax:

.container {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

Media Query for Responsive Grid:

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

Aligning Items

Align Items in a Row:

.container {
  justify-content: center; /* Horizontal alignment */
  align-items: center; /* Vertical alignment */
}

Align Items in Columns:

.container {
  justify-items: center; /* Horizontal alignment */
  align-content: center; /* Vertical alignment */
}

Naming Grid Lines

Name Grid Lines:

.container {
  grid-template-rows: [row1-start] 100px [row1-end row2-start] 200px [row2-end];
  grid-template-columns: [col1-start] 1fr [col1-end col2-start] 2fr [col2-end];
}

Place Items Using Named Lines:

.item {
  grid-row: row1-start / row2-end;
  grid-column: col1-start / col2-end;
}

Nested Grids

Create Nested Grids:

.outer-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.inner-container {
  display: grid;
  grid-template-rows: 100px 200px;
}

Place Items in Nested Grid:

.inner-item {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

This cheat sheet provides a quick reference for key CSS Grid properties and concepts. Adjust the values based on your specific layout requirements.