Grid Areas

by ninty9notout

HTML

<div class="section">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>




</div>

CSS

.section {
    display: grid;
    grid-template-areas:
    "a a b c d e f"
    "a a g h i j k";
    grid-gap: 8px;
}

.item {
    background-color: #efefef;
    width: 100%;
    padding-top: 100%;
    border-radius: 4px;
}