Grid row and column span practice


by Jeremy Caudle
code

For a little while now, Apple has been displaying info about their new products in this nifty grid layout during their events. I took a shot at making one based on the new iPad Pro slide shown during the April 20, 2021 event. It’s a pretty fancy looking and powerful machine, along with the new iMacs.

All-day battery life
ProMotion
Four speaker audio
Thunderbolt
11" and 12.9"
Up to 2TB storage
Up to 16GB memory
Center Stage
Up to 2x faster storage
Studio-quality mics
5G
12.9" Liquid Retina Display XDR
iPad Pro
Apple Pencil
M1 Chip
LiDAR
Wide and Ultra Wide cameras
Face ID
Wi-Fi 6

View the code:

HTML and JS 
<div class="code-block">
            <div class="base-container grid-row-1">All-day battery life</div>
            <div class="base-container grid-row-1">ProMotion</div>
            <div class="base-container grid-row-1">Four speaker audio</div>
            <div class="base-container grid-row-2 grid-col-1-span-3">Thunderbolt</div>
            <div class="base-container grid-row-3-span-2 grid-col-1-span-3 sub-grid">
                <div class="base-container grid-row-1-span-2">11" and 12.9"</div>
                <div class="base-container">Up to 2TB storage</div>
                <div class="base-container">Up to 16GB memory</div>
            </div>
            <div class="base-container grid-row-5 grid-col-1-span-3">Center Stage</div>
            <div class="base-container grid-row-6">Up to 2x faster storage</div>
            <div class="base-container grid-row-6">Studio-quality mics</div>
            <div class="base-container grid-row-6 grid-col-3-span-3">5G</div>
            <div class="base-container grid-row-1-span-2 grid-col-4-span-4">12.9" Liquid Retina Display XDR</div>
            <div class="base-container grid-row-3-span-3 grid-col-4-span-4">iPad Pro</div>
            <div class="base-container grid-row-6 grid-col-6-span-5">Apple Pencil</div>
            <div class="base-container grid-col-8-span-3 grid-row-1-span-3 extra-border-rad">M1 Chip</div>
            <div class="base-container grid-col-8-span-2 grid-row-4">LiDAR</div>
            <div class="base-container grid-col-10 grid-row-4-span-2">Wide and Ultra Wide cameras</div>
            <div class="base-container">Face ID</div>
            <div class="base-container">Wi-Fi 6</div>
        </div>
CSS 
.hidden {
                display: none;
                }

            .code-block {
                background-color: #333;
                margin: 1rem auto;
                color: white;
                padding: 1rem;
            }

            .base-container {
                padding: 1rem;
                margin: 1rem;
                border: solid 1px black;
            }

            @supports (display:grid) {

                @media (min-width: calc(1280px + 2rem)) {

                .code-block {
                    display: grid;
                    width: 1280px;
                    height: 720px;
                    grid-template-columns: repeat(10, 1fr);
                    grid-template-rows: repeat(6, 1fr);
                    gap: .5rem;
                    padding: .5rem;
                }

                div.sub-grid {
                    grid-template-columns: repeat(2, 1fr);
                    grid-template-rows: repeat(2, 1fr);
                    gap: .5rem;
                    background-color: #333;
                    place-items: center;
                }

                .sub-grid > div {
                    width: 100%;
                    height: 100%;
                }

                .base-container {
                    background-color: black;
                    padding: 0;
                    margin: 0;
                    border: none;
                    border-radius: 1rem;
                    display: grid;
                    place-items: center;
                    color: white;
                    font-family: 'Helvetica', 'Arial Narrow', Arial, sans-serif;
                    text-align: center;
                }

                .extra-border-rad {
                    border-radius: 2rem;
                }

                .grid-row-1 { grid-row: 1 / 2; }
                .grid-row-1-span-2 { grid-row: 1 / span 2; }
                .grid-row-1-span-3 { grid-row: 1 / span 3; }
                .grid-row-2 { grid-row: 2 / 3; }
                .grid-row-3 { grid-row: 3 / 4; }
                .grid-row-3-span-2 { grid-row: 3 / span 2; }
                .grid-row-3-span-3 { grid-row: 3 / span 3; }
                .grid-row-4 { grid-row: 4 / 5; }
                .grid-row-4-span-2 { grid-row: 4 / span 2; }
                .grid-row-5 { grid-row: 5 / 6; }
                .grid-row-6 { grid-row: 6 / 7; }

                .grid-col-1 { grid-column: 1 / 2;}
                .grid-col-1-span-3 { grid-column: 1 / span 3;}
                .grid-col-2 { grid-column: 2 / 3;}
                .grid-col-3 { grid-column: 3 / 4;}
                .grid-col-3-span-2 { grid-column: 3 / span 2;}
                .grid-col-3-span-3 { grid-column: 3 / span 3;}
                .grid-col-4 { grid-column: 4 / 5;}
                .grid-col-4-span-4 { grid-column: 4 / span 4;}
                .grid-col-5 { grid-column: 5 / 6;}
                .grid-col-6 { grid-column: 6 / 7;}
                .grid-col-6-span-5 { grid-column: 6 / span 5;}
                .grid-col-7 { grid-column: 7 / 8;}
                .grid-col-7-span-3 { grid-column: 8 / span 3;}
                .grid-col-8 { grid-column: 8 / 9;}
                .grid-col-8-span-2 { grid-column: 8 / span 2;}
                .grid-col-8-span-3 { grid-column: 8 / span 3;}
                .grid-col-9 { grid-column: 9 / 10;}
                .grid-col-10 { grid-column: 10 / 11;}

                }

            }

Tags