Re: [csswg-drafts] [css-grid-3] Designer/developer feedback on masonry layout (#10233)

@ddamato Thank you for your reply! I am admittedly not _super_ experienced with CSS, so there might be something obvious I am missing.

Here is a demo of the layout I think would be good with horizontal masonry:
`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Layout Test</title>

    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
        body {
            background-color: #cae7ff;
        }
        .table {
            width: 100%;
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: 1fr;
            margin-inline: auto;
        }
        .table__column {
            --row-height: 125px;
            display: grid;
            grid-template-rows: repeat(26, var(--row-height));
            overflow: auto;
            border-right: 1px solid black;
            background: repeating-linear-gradient(
                to bottom,
                gray,
                gray var(--row-height),
                white var(--row-height),
                white calc(var(--row-height) * 2)
            );
        }
        .card {
            color: white;
            text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
            font-size: 1.5rem;
            border-radius: 6px;
            margin-block: 0.5rem;
            padding: 5%;
            word-break: break-all;
        }
    </style>

    <script>
        document.addEventListener("DOMContentLoaded", (event) => {
            const list_of_cards = document.querySelectorAll(".card");

            // Randomly position, size, and color the cards
            list_of_cards.forEach(element => {
                element.style.gridRowStart = Math.floor(Math.random() * 8) + 1; 
                element.style.gridRowEnd = `span ${Math.floor(Math.random() * 3) + 1}`; 
                element.style.backgroundColor = `#${Math.floor(Math.random()*16777215).toString(16).padStart(6, '0')}`;
            });
        });
    </script>
</head>
<body>
    <div class="table">
        <div class="table__column">
            <div class="card">Card</div>
            <div class="card">Card</div>
            <div class="card">Card</div>
            <div class="card">Card</div>
            <div class="card">Card</div>
            <div class="card">Card</div>
            <div class="card">Card</div>
            <div class="card">Card</div>
        </div>
        <div class="table__column"></div>
        <div class="table__column"></div>
        <div class="table__column"></div>
        <div class="table__column"></div>
    </div>
</body>
</html>`

I think seeing the problem visually might do it more justice than my attempt at explaining it in writing. Grid doesn't have an equivalent to flex-grow where cards can grow to fill in a fraction of the space. They have to span discrete columns and you have to explicitly provide this ahead of time.

Sorry if I am wrong, I don't mean to derail the conversation, but is this not a problem that could be solved with  grid-template-columns: masonry; ? Is it already possible to do this with just CSS?

-- 
GitHub Notification of comment by Aps-x
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10233#issuecomment-2259395646 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 31 July 2024 00:07:32 UTC