Quick CSS Grid One-Liner Tip

1. The Tip: Use the grid shorthand property to simplify your CSS grid definitions and reduce code duplication.

2. The Problem: Writing out individual grid-template-rows, grid-template-columns, grid-row-gap, and grid-column-gap properties can be tedious and error-prone, especially for complex grids.

3. The Solution:

Before:

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}

After:

.grid-container {
  display: grid;
  grid: repeat(3, 1fr) / repeat(2, 1fr) 10px 10px;
}

4. Why It Works: The grid shorthand property allows you to define multiple grid properties in a single line, using a specific syntax: grid-template-rows / grid-template-columns grid-row-gap grid-column-gap.

5. Where to Use It: Use this shorthand in any CSS grid container where you need to define both rows and columns, such as layouts, dashboards, or responsive designs.

6. Bonus: You can also use the grid shorthand to define a grid with a single row or column, like this: grid: 1fr / repeat(3, 1fr) 10px;, which can be useful for simple, one-dimensional grids.