A little lost using grid

1

I’m trying to create an ecommerce page and I’m trying to create a display of listings with pictures. I figured that using grid would be best with this but I’m stumped as to how to achieve a 4 column grid of pictures that are links for some reason. I’m using the FCC: Personal Portfolio example page as a guide but it’s a little complicated and I’m having trouble understanding what all the CSS really does.

my code so far

If anyone could give me advice on how to start, i’d appreciate it greatly.

2

Assuming something like

section.products
  a.product
  a.product
  a.product
  a.product

Should just be

.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 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”

1 Like
3

Thanks so much. I’m glad to have been able to start somewhere :grinning:

1 Like