Assuming something like
Should just be
grid-template-columns: repeat(4, 1fr);
That makes the element with the class “products” a grid container, and says it should have four columns, equal width, and should repeat that for each row (and each row should be equal height). The children of it are grid items, and you can put whatever you want in them. Note with the rows being equal height, that means they’ll take the height of the tallest item, so best to try to ensure the contents are a consistent height.
Grid syntax is a bit difficult to grok at first, and the temptation is to be really specific about where elements are (things like having template areas, and specific grid tracks etc). But generally it only needs a few simple rules. It’s not really like the grid frameworks in Bootstrap et al either – it doesn’t need any special wrapper elements with special classes, it’s just a way of saying “I want to lay the children of this element out in some 2d way”