|||

First List Item inside CSS Multi Column Layout is offset

An annoying thing when using CSS Columns pops up every now and again:

  • When having list items (<li>) inside the columns, the items in the first column are often times a bit off. This happens across browsers in Chromium, Firefox and Safari (current stable version from Thu 15. Dec).
  • Setting the list items to anything but display: list-item gets rid of the issue – at the cost of not looking like, well, list items anymore. No bueno!
  • Getting rid of the list items vertical margin migitates the offset as well.
    • The missing spacing between items can then be resolved by adding a single direction padding, in my a case padding-bottom did the trick.
  • It’s not beautiful, but it gets the job done: list items are now evenly distributed

Up next Presenting the Peak Starter Kit at the Statamic Meetup Berlin Here’s a (re-)recording of the talk I gave yesterday (Dec 1, 2022) at the Statamic Meetup Berlin. It’s about why the Peak Starter Kit is a brilliant Favorite apps in recent weeks: mymind & Craft During the past weeks I rediscovered my passion for two apps I’ve abandonded previously. Right now both fit really well into my digital life and
Latest posts Pros and Cons of Reflect Notes App A Love Letter to Sublime Internet Lazy.so is an amazing tool. Here's why I don't keep it Look Around You Don’t ask what the world needs Carl Sagan has shown the absurdity of not acting against climate change back in 1990 On the plus sides of being a web designer Friday Deployment A success message that communicates the opposite of success Do not demand to be appreciated Craft Docs vs Bear Notes Figma AI Rant Epomaker TH80 Pro Polyamor, aber mit PKM apps 🫣 Ironie, die Fabi Rommel Helft der Natur Stimmen im Kopf - Flohmarkt croox website online Tiny Garden Paradise Oktober in Europa Figma Rant: forever assembling iCloud Drive Rant Schwiegerfuchs Same Vibe Tailwind and Web Craftsmanship Buttons with CSS Expand Basic Markdown Formatting in Apple Notes Cannot Divide by Zero in Peak Picture Partial Applying a Growth Mindset (Doodle) When Gmail Messages deleted in Apple Mail keep coming back