Cards displayed in a list

bentsai · January 4, 2022, 3:38am

I started playing around with some custom CSS to display cards in a space in a list. It’s interesting that the connections still work.

I’m using the Stylus extension and this CSS:


article {
    position: static;
    padding: 5px;
    margin-left: 300px;
    max-width: 600px;
}

article .card {
    max-width: none;
}

.card-overlap-indicator {
    display: none;
}

bentsai · January 4, 2022, 4:00am

Here they are laid out in a grid. I wonder what the order of the cards is in the DOM.

.cards {
    padding-left: 18rem;
    max-width: 900px;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
}

article {
    position: static;
    padding: 1rem;
    max-width: 300px
}

article .card {
    max-width: none;
}

.card-overlap-indicator {
    display: none;
}