Loading…
4
TIL that one line of CSS can replace a whole div, and I found it in the MDN docs at 1am
I was building a card grid last Tuesday and had six nested divs doing nothing but centering stuff. Then I read that `place-items: center` on the grid parent handles both axes in one shot. Cut my markup from 40 lines to 12 and the layout did not break on mobile. I have been writing Flexbox plus margin auto like a chump for three years. Does anyone else keep a running list of these one liners, or do you just stumble on them by accident like me?
2 comments
Log in to join the discussion
Log In2 Comments
kai77913h ago
Place-items center feels slick until you need that one card to break out of the grid and sit at the top on its own, then you're back to digging through the spec for exceptions. Same with Flexbox shortcuts people love to brag about, like gap plus wrap, works great until a long word in a title blows the whole row apart and you have no idea why. The 40 lines you cut were probably doing stuff you forgot about, like the min-width that kept the layout from squishing on a phone. Fewer lines is not always less to debug, sometimes it just hides the mess somewhere you won't look for a month.
1
jennifer_fisher13h ago
Three years of Flexbox and margin auto here too, but kai779's point about hidden min-width bugs made me rethink the whole fewer lines thing.
1