Different width grid layout

Question

I am trying to create a grid-layout like:

I do not want to use any frameworks or apis online and want to accomplish this using pure CSS, HTML and JS if needed. Here's what I tried:

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

.grid{
    width: 70%;
    margin: auto;
    margin-top: 120px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: 200px 100px;
    grid-gap: 1rem;
}
.grid-item{
    background-color: #1EAAFC;
    background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    color: #fff;
    border-radius: 4px;
    grid-column: span 2;
    border: 6px solid #171717;
}

However, this leads me to:

Any help is appreciated!

Answer 1

This layout can be achieved using grid-template-areas

The HTML would be:

<section class="grid">
    <div class="grid-area1"></div>
    <div class="grid-area2"></div>
    <div class="grid-area3"></div>
    <div class="grid-area4"></div>
    <div class="grid-area5"></div>
</section>

The CSS for this would be:

 .grid {
    display:grid;
  grid-template-columns: [Margins] 0.2fr 1.9fr 0fr 3.5fr 0.2fr [Margins]; 
  grid-template-rows: 0.2fr 2.3fr 0.5fr 1.4fr 1.8fr 0.2fr; 
  gap: 10px 10px; 
  grid-template-areas: 
    ". . . . ."
    ". grid-area1 . grid-area2 ."
    ". grid-area3 grid-area3 grid-area2 ."
    ". grid-area3 grid-area3 grid-area4 ."
    ". grid-area5 grid-area5 grid-area5 ."
    ". . . . ."; 
}

    .grid > * {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        color: #333;
        font-family: sans-serif;
        border: 6px solid #333;
}

.grid-area1 { grid-area: grid-area1; }
.grid-area2 { grid-area: grid-area2; }
.grid-area4 { grid-area: grid-area4; }
.grid-area5 { grid-area: grid-area5; }
.grid-area3 { grid-area: grid-area3; }

Output is:

This is a fully responsive layout, every single card can be made into its own separate grid container depending on the use case

In accordance to The Myth's request, a responsive version for mobile could be written as:

CSS would be changed to:

    .grid {
        min-height: 100vh;
        display: grid;
        margin-inline: 1rem;
        grid-template-areas:
            "grid-area1"
            "grid-area2"
            "grid-area3"
            "grid-area4"
            "grid-area5";
        gap: 10px 10px;
    }

    .grid>* {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
        color: #333;
        font-family: sans-serif;
        border: 6px solid #333;
    }

    @media only screen and (min-width: 38rem) {
        .grid {

            grid-template-columns: [Margins] 0.2fr 1.9fr 0fr 3.5fr 0.2fr [Margins];
            grid-template-rows: 0.2fr 2.3fr 0.5fr 1.4fr 1.8fr 0.2fr;

            grid-template-areas:
                ". . . . ."
                ". grid-area1 . grid-area2 ."
                ". grid-area3 grid-area3 grid-area2 ."
                ". grid-area3 grid-area3 grid-area4 ."
                ". grid-area5 grid-area5 grid-area5 ."
                ". . . . .";
        }


        .grid-area1 {
            grid-area: grid-area1;
        }

        .grid-area2 {
            grid-area: grid-area2;
        }

        .grid-area4 {
            grid-area: grid-area4;
        }

        .grid-area5 {
            grid-area: grid-area5;
        }

        .grid-area3 {
            grid-area: grid-area3;
        }
    }

Output is

The transition from mobile to PC could be made smooth by .grid > * {transition: width .2s ease;}