Cacher is the code snippet organizer for pro developers

<!-- card layout -->

<div style="
    display: flex;
    /* Put a card in the next row when previous cards take all width */
    flex-wrap: wrap;

    margin-left: -8px;
    margin-right: -8px;
">
    <!-- CARD -->
    <div style="
        flex-basis: 25%; /* There will be 4 cards per row */

        padding-left: 8px;
        padding-right: 8px;
    ">
        ...
    </div>


</div>

<!-- same height columns -->

<div style="display: flex;">

    <!-- Column -->
    <div style="
        flex: 1;
        /* Space between columns */
        margin: 0 8px;

        /* Layout each column */
        display: flex;
        flex-direction: column;
    ">
        <!-- Cover -->
        ...

        <!-- Content -->
        <div style="
            /* Take available height */
            flex: 1;
        ">
            ...
        </div>

        <!-- Button sticks to the bottom -->
        ...
    </div>

    <!-- Repeat with other columns -->
    ...
    
</div>