Full-bleeds in CSS Grid

March 17, 2021
by Jeremy Caudle
code

A couple weeks or months ago I saw and briefly read over Josh Comeau's post about how to do a full-bleed using CSS grid. The layout features a full-bleed class to pop elements out of the grid and drawing more attention to them. I'd like to see how I could put something like that into place on my site, so I tried out the CSS Josh shared in his article.

Delicious Dishes of Japan

Kinugasa Tonkatsu Ramen

There’s a great little ramen shop next to Kinugasa Station that specializes in Tonkotsu ramen. It’s seriously good and I recommend it. They even have a graphic of a pig taking a bath in a ramen bowl, on their ramen bowls!

Katsuya’s Curry Udon Negi Katsudon

Yakiniku Boss

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis luctus quam. Nam malesuada odio facilisis dui consequat, et imperdiet sapien aliquet. Nunc lectus ante, viverra non lectus quis, pretium cursus mauris. Morbi vitae pretium enim, id pulvinar tellus. Sed blandit accumsan nibh a blandit. Proin eu augue ac metus egestas posuere. Curabitur congue luctus lectus, et interdum nisl pretium ut. Nam malesuada sagittis ex. Mauris felis leo, vulputate et tellus quis, pellentesque congue dolor.

Duis elementum sollicitudin mollis. Cras neque libero, porttitor eget laoreet sed, pharetra id metus. Sed finibus, odio vel finibus efficitur, elit leo faucibus neque, ultricies pulvinar tortor libero sit amet ex. Praesent congue dui enim, ut viverra tortor pellentesque in. Nulla eros urna, efficitur et auctor id, tempor nec arcu.

View the code:

HTML and JS

<div class="code-block wrapper">
            
            <h2>Delicious Dishes of Japan</h2>

            <section>
                <h3>Kinugasa Tonkatsu Ramen</h3>
                <p>There’s a great little ramen shop next to Kinugasa Station that specializes in Tonkotsu ramen. It’s seriously good and I recommend it. They even have a graphic of a pig taking a bath in a ramen bowl, on their ramen bowls!</p>
            </section>
            <img src="https://jeremycaudle.com/ygg/resources/kinugasatonkotsuramen.jpeg" alt="Photo of delicious tonkotsu ramen." class="full-bleed" width="1000" height="1083" />

            <section>
                <h3>Katsuya’s Curry Udon Negi Katsudon </h3>
                <p>There’s a great little ramen shop next to Kinugasa Station that specializes in Tonkotsu ramen. It’s seriously good and I recommend it. They even have a graphic of a pig taking a bath in a ramen bowl, on their ramen bowls!</p>
            </section>
            <img src="https://jeremycaudle.com/ygg/resources/189e2156-2134-4b4a-b55c-19331833afea.jpeg" alt="Katsuya’s Curry Udon Negi Katsudon" class="full-bleed" width="1000" height="750" />

            <section>
                <h3>Yakiniku Boss</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis luctus quam. Nam malesuada odio facilisis dui consequat, et imperdiet sapien aliquet. Nunc lectus ante, viverra non lectus quis, pretium cursus mauris. Morbi vitae pretium enim, id pulvinar tellus. Sed blandit accumsan nibh a blandit. Proin eu augue ac metus egestas posuere. Curabitur congue luctus lectus, et interdum nisl pretium ut. Nam malesuada sagittis ex. Mauris felis leo, vulputate et tellus quis, pellentesque congue dolor.</p>
                <p>Duis elementum sollicitudin mollis. Cras neque libero, porttitor eget laoreet sed, pharetra id metus. Sed finibus, odio vel finibus efficitur, elit leo faucibus neque, ultricies pulvinar tortor libero sit amet ex. Praesent congue dui enim, ut viverra tortor pellentesque in. Nulla eros urna, efficitur et auctor id, tempor nec arcu. </p>
            </section>
            <img src="https://jeremycaudle.com/ygg/resources/c9fe90d8-3b55-4f31-883d-25b97af0752f.jpeg" alt="Photo of yakiniku restaurant logo and metal chopsticks." class="full-bleed" width="1000" height="1083" />


        </div>

CSS

/* Post classes */

            .code-block {
                font-family: Helvetica, Arial, sans-serif;
                font-size: 20px;
            }

            .code-block p, .code-block ul, .code-block ol {
                font-family: Georgia, 'Times New Roman', Times, serif;
                line-height: 1.5;
            }

            .code-block h2 {
                color: red;
                font-size: 3rem;
                font-variant: small-caps;
                border-bottom: 5px solid red;
                margin-bottom: 1rem;
            }

            .code-block section {
                margin: 5rem 0 2rem 0;
            }

            .code-block section > h3 {
                margin-top: 0;
            }

            .code-block h3 {
                margin: 2em 0 1rem 0;
                color: #333;
            }

            .code-block h + p {
                margin: 1em 0;
            }

            .code-block * + p {
                margin-top: 0;
            }

            .code-block img {
                display: block;
            }

            .code-block section > p:last-of-type {
                margin-bottom: 2em;
            }

            /* Full-bleed grid styling shared by Josh Comeau on his website: https://www.joshwcomeau.com/css/full-bleed/ along with a support query*/

            @supports (display: grid) {

            .wrapper {
                display: grid;
                grid-template-columns: 1fr min(65ch, calc(100% - 64px)) 1fr;
                grid-column-gap: 32px;
            }

            .wrapper > * { 
                grid-column: 2; /* Children of the wrapper class are assigned to column 2. */
            }

            .full-bleed {
                width: 100%;
                height: auto;
                grid-column: 1 / -1;
            }

        }