Grid in JavaScript

A grid places the children of one element in rows and columns. You declare it on the parent with display: grid, and its direct children become the grid items. grid-template-columns lists the columns from left to right; new rows are made as needed.

The unit fr is one share of the free width, so repeat(2, 1fr) is short for 1fr 1fr: two equal columns. gap is the space between the cells, both between the columns and between the rows. For example, a photo gallery in two equal columns:

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

A grid fits better than a wrapping flex row when every row must line up in the same columns: in a flex row each line sizes its own items, so a lone card on the last line can stretch across it. The check draws nothing, so it can't tell you whether the cards line up (that is for your eyes). It prints which declarations win on .products and the rule each one comes from. With your rule it must print:

> the style of .products (1 element, window 1024 px wide)
  ul.products "Mug $12 Buy Notebook Out of st"
    display: grid   <- .products
    grid-template-columns: repeat(3, 1fr)   <- .products
    gap: 16px   <- .products
    list-style: none   <- .products
    padding: 0   <- .products

Your task: at the top of the .products rule, set display to grid, then grid-template-columns to repeat(3, 1fr), then gap to var(--gap).

Assignment
Follow the Coding Tutorial to turn the product list into a grid of three equal columns, with the shop's gap between the cards.

Hint
All three declarations go in the .products rule that is already there, above list-style. The check prints gap: 16px because it fills in var(--gap) from :root.