List as cards in preview mode

[phinnik]

This css snippet helps to achieve this:

Edit mode	Preview mode

Just set property cssclasses=list_card_style and you are ready

Snippet:

.markdown-preview-view.list_card_style ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.markdown-preview-view.list_card_style ul li {
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.391);
    padding: 15px;
    border-radius: 10px;
}


.markdown-preview-view.list_card_style .list-bullet {
    display: none;
}

---

[_tttt]

Thank you very much for sharing

[Bluemoondragon07]

Simple and beautiful! Thanks for sharing!

[Domster]

Thank you for sharing.

I have attempted to incorporate LaTeX formulas within the cards, but it appears that the cards do not resize to accommodate the equations. As I am relatively new to CSS, I couldn’t figure out any solution to that and GPT also couldn’t help me. I would be glad if there is a method to modify the cards to behave more like flexboxes, adjusting their size appropriately to fit the content.