Tricky times with CSS Grid


by Jeremy Caudle
code

Moo Mini Cards are a great way to get some of your photos printed. They used to make a nifty frame, that fit about 20 or so cards, that allowed you to place mini cards inside in landscape or portrait orientation. I tried to recreate the style of the frame using CSS grid, and I am scratching my head at the moment. I don't think I'll get it working right today, so I'll give it a try some other time.

image
image
image

View the code:

HTML and JS 
<section class="code-block">
            <div class="subsection">
                <div class="photo-block"><img src="" alt="image" width="550" height="220" class="ramen"></div>
                <div class="photo-block"><img src="" alt="image" width="550" height="220" class="katsu"></div>
            </div>
            <div class="vert-photo-block"><img src="" alt="image" width="220" height="550" class="yakiniku"></div>

        </section>
CSS 
:root {
                --katsu-pic: url(https://jeremycaudle.com/ygg/resources/189e2156-2134-4b4a-b55c-19331833afea.jpeg);
                --ramen-pic: url(https://jeremycaudle.com/ygg/resources/kinugasatonkotsuramen.jpeg);
                --yakiniku-pic: url(https://jeremycaudle.com/ygg/resources/c9fe90d8-3b55-4f31-883d-25b97af0752f.jpeg);
            }

            .code-block {
                padding: 1rem;
                margin: 3rem auto;
                background-color: black;
                width: 100%;
                max-width: 880px;
								min-height: 600px;
            }

            .code-block div.photo-block {
                padding: 27.5px;
                background-color: black;
                width: 100%;
                height: auto;
                max-width: 605px;
                max-height: 550px;
            }

            .code-block div.vert-photo-block {
                padding: 27.5px;
                background-color: black;
                max-width: 275px;
                max-height: 550px;
            }

            img {
                display: block;
            }

            img.katsu {
                background-image: var(--katsu-pic);
                background-size: cover;
                background-position: 50% 50%;
                width: 100%;
                height: auto;
                max-width: 550px;
                max-height: 220px;
            }

            img.ramen {
                background-image: var(--ramen-pic);
                background-size: cover;
                background-position: 50% 50%;
                width: 100%;
                height: auto;
                max-width: 550px;
                max-height: 220px; 
            }

            img.yakiniku {
                background-image: var(--yakiniku-pic);
                background-size: cover;
                background-position: 50% 50%;
                background-origin: -90deg;
                height: 100%;
                width: auto;
                max-width: 220px;
                max-height: 550px; 
            }

            @supports (display: grid) {
                .code-block {
                    display: grid;
                    grid-auto-flow: column dense;
                }

                .code-block div {
                    display: grid;
                    place-items: normal;
                }

                .code-block div.subsection {
                    display: grid;
                    place-items: normal start;
                }
            }

Tags