A CSS snippet for a responsive list of items

Starting a collection ...

CSS still scares me. Even after using it everyday for years I'm always fascinated by the number of ways that exist to do something and the new features that come out each year.

Exhibit A: A quick codepen search

I figured a good idea would be to rapid-fire document useful CSS patterns as I use them. Here's a quick and simple one that doesn't need much explaining.

With CSS grid, you can repeat grid columns as you like and place items in them. By using repeat() along with auto-fit, the browser will handle sizing and wrapping within columns. Similarly, minmax() allows you to set constraints on each element. This makes for some interesting applications, i.e a responsive list of objects:

The styles on the classs buttonList demonstrate the result:

.buttonList {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 1px;
  background: #e1e1e1;
  border-top: 1px solid #e1e1e1;
}

(inspect and change size to see, or edit the max-width property)

And you could imagine where using something like this might come in handy, i.e if we had an item in a store catalog (styles from this course):