| Interactive Media Design

Grid Item Positioning with span

We can also use the span keyword to provide the number of tracks an item should span. Using the previous example we'll use span to achieve the same result.

.box1 {
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row-start: 1;
    grid-row-end: span 2;
}

/* or the shorthand properties */

.box1 {
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
}

/* or the ultimate shorthand... */

.box1 {
    grid-area: 1 / 1 / span 2 / span 3
}

/*
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: span 2;
    grid-column-end: span 3;
*/

NOTE

Using span may be more intuitive than referencing a grid line.

Example

<main class="grid-container">
    <div class="box1 box">One</div>
    <div class="box2 box">Two</div>
    <div class="box3 box">Three</div>
    <div class="box4 box">Four</div>
    <div class="box5 box">Five</div>
</main>

.grid-container {
    background-color: rgb(219, 216, 216);
    border-radius: 5px;
    border: 1px solid grey;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;
    padding: 10px;
}

.box {
    background-color: rgb(134, 169, 235);
    border: 2px solid rgb(34, 72, 175);
    border-radius: 5px;
    align-items: center;
}

.box1 {
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row-start: 1;
    grid-row-end: span 2;
}

.box2 {
    grid-column-start: 1;
    grid-row-start: 3;
    grid-row-end: span 2;
}
One
Two
Three
Four
Five

Further Review

This YouTube video was created by Steve Griffith.

References