CSS Grid has transformed how we design and layout content on the web. It offers a two-dimensional layout system, providing a more flexible and efficient way to design web pages. For those still getting a grasp of CSS Grid or looking for a quick reference guide, here’s a handy cheat sheet to help you master the basics.

Basic Terminology:

1. Grid Container: The element on which ’display: grid;’ or ’display: inline-grid;’ is applied. It’s the parent of all grid items.
2. Grid Item: The children of the grid container.
3. Grid Line: The dividing lines that form the structure of the grid. They can be vertical or horizontal.
4. Grid Cell: The space between two adjacent row and two adjacent column grid lines.
5. Grid Track: The space between two grid lines, either horizontal (rows) or vertical (columns).
6. Grid Area: The rectangular area between four grid lines. It can contain one or more grid cells.

Setting Up A Grid:

To create a grid, you can define columns and rows on a container.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 columns where middle column is twice the size of others */
  grid-template-rows: auto 150px; /* 2 rows, one with automatic height and another with fixed height */
}

Grid Gap:

Create space between grid items.

.container {
  grid-gap: 15px; /* Gap between rows & columns */
  grid-row-gap: 15px; /* Gap only between rows */
  grid-column-gap: 15px; /* Gap only between columns */
}

Placement of Grid Items:

1. Using Line Numbers:

• ’grid-row-start’, ’grid-row-end’, ’grid-column-start’, and ’grid-column-end‘.

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

2. Using Span:

• You can let an item span multiple columns or rows using the ’span’ keyword.

.item {
  grid-column: span 2; /* Spans across 2 columns */
  grid-row: span 1; /* Spans across 1 row */
}

3. Using Grid Area:

• Define a template with ’grid-template-areas’ and place items using the ’grid-area’ property.

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

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

Alignment and Justification:

1. Align items (Vertically):

   • ’align-items’: This property aligns grid items along the row axis.
     • ’start’, ’end’, ’center’, ’stretch’

2. Justify items (Horizontally):

   • ’justify-items’: This property aligns grid items along the column axis.
     • ’start’, ’end’, ’center’, ’stretch’

3. Align content:

   • ’align-content’: This property aligns the whole grid content along the row axis if there’s extra space.
     • ’start’, ’end’, ’center’, ’stretch’, ’space-around’, ’space-between’

4. Justify content:

   • ’justify-content’: This property aligns the whole grid content along the column axis if there’s extra space.
     • ’start’, ’end’, ’center’, ’stretch’, ’space-around’, ’space-between’

Responsive Grids:

Combine CSS Grid with media queries to create responsive layouts. For instance:

.container {
  grid-template-columns: repeat(2, 1fr);
}

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

Conclusion

CSS Grid revolutionizes the realm of web design by introducing a two-dimensional layout system that offers unparalleled flexibility and efficiency. Whether it’s defining columns and rows, manipulating spaces between grid items, or placing and spanning them across the grid, CSS Grid provides designers and developers with a robust set of tools. The added convenience of alignment, justification, and the potential for seamless responsive designs further cements its essential role in modern web development. For both novices aiming to delve into the world of web design and seasoned developers seeking a quick refresher, this cheat sheet captures the foundational elements of the CSS Grid. As with any tool, regular practice and application will lead to mastery. Dive into your next project with these Grid properties at your fingertips!