Micro.blog’s new Photo Collections feature is an excellent way to built out sets of photos (all at once or over time). The built-in layout is perfectly adequate for many use cases. Due to that, I’m leaving the Micro.blog default as the Sumo default.

However, if you’d like, you can use the following CSS to give it a more sumo like feel. Before you add this, you must understand that this will override the default rounded corners, spacing, and sizing for all collections across your entire site. Additionally, it will unify the design across all device sizes (for better or worse). If you’ve made other modifications to Sumo Theme, there might be conflicts (although unlikely). Lastly, if it does break stuff on your blog, it’s as simple as deleting the code to revert to how it was.

All you have to do is add this to your custom CSS within the Micro.blog dashboard:

.microblog_collection img {
    width: calc(100% / 3) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius: 0 !important;
    margin: 0 !important;
}

Yes, I broke a cardinal rule of web design and used way too many !important properties. But by doing it this way, I greatly minimized the amount of code needed to achieve the proper result (due to screen size media properties that are added by default).