CSS still scares me. Even after using it every day for years I'm always fascinated by the number of ways that exist to do something and the new features that...
CSS still scares me. Even after using it every day 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 class 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):