Grid layout

<div class="wrap">
    <div class="grid-1">Head</div>
    <div class="grid-1-2">Head 2</div>
    <div class="grid-2">Main</div>
    <div class="grid-2-2">Main 2</div>
    <div class="grid-3">Side</div>
    <div class="grid-4">Footer</div>
</div>Code language: HTML, XML (xml)

.wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 50px 50px 50px;
    grid-template-areas:
        "head head2 . side"
        "main main2 . side"
        "footer footer footer footer";
    grid-gap: 5px;
}
.grid-1 {
    grid-area: head;
    background: #289DCC;
}
.grid-1-2 {
    grid-area: head2;
    background: #6BC1E2;
}
.grid-2 {
    grid-area: main;
    background: #6BC1E2;
}
.grid-2-2 {
    grid-area: main2;
    background: #289DCC;
}
.grid-3 {
    grid-area: side;
    background: #289DCC;
}
.grid-4 {
    grid-area: footer;
    background: #289DCC;
}Code language: CSS (css)

<div class="wrap">
    <div class="grid-1">Head</div>
    <div class="grid-2">Main</div>
    <div class="grid-3">Side</div>
    <div class="grid-4">Footer</div>
</div>Code language: HTML, XML (xml)

.wrap {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 2fr;
    grid-template-rows: 50px 50px 50px;
    grid-template-areas:
        "head head . side"
        "main main . side"
        "footer footer footer footer";	
    grid-gap: 5px;
}
.grid-1 {
    grid-area: head;
    background: #289DCC;
}
.grid-2 {
    grid-area: main;
    background: #6BC1E2;
}
.grid-3 {
    grid-area: side;
    background: #289DCC;
}
.grid-4 {
    grid-area: footer;
    background: #289DCC;
}Code language: CSS (css)

Inny sposób zapisu:

.wrap {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
    grid-template-rows: 50px;
    grid-gap: 5px;
}
.grid-1 {
    grid-column-start: 1;
    grid-column-end: 2;
    background: #289FCC;
}
.grid-2 {
    grid-column-start: 2;
    grid-column-end: 3;
    background: #6BC1E2;
}
.grid-3 {
    grid-column-start: 3;
    grid-column-end: 4;
    background: #4BB0D6;
}
.grid-4 {
    grid-column-start: 4;
    grid-column-end: 5;
    background: #078FC2;
}
.grid-5 {
    grid-column-start: 5;
    grid-column-end: 6;
    background: #04678D;
}Code language: CSS (css)

.wrap {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
    grid-template-rows: 50px;
    grid-gap: 5px;
}
.grid-1 {
    grid-column: 1 / 2;
    background: #289FCC;
}
.grid-2 {
    grid-column: 2 / 3;
    background: #6BC1E2;
}
.grid-3 {
    grid-column: 3 / 4;
    background: #4BB0D6;
}
.grid-4 {
    grid-column: 4 / 5;
    background: #078FC2;
}
.grid-5 {
    grid-column: 5 / 6;
    background: #04678D;
}Code language: CSS (css)

Inny sposób zapisu:

.wrap {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
    grid-template-rows: 50px 50px 50px 50px 50px;
    grid-gap: 5px;
}
.grid-1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    background: #289FCC;
}
.grid-2 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    background: #6BC1E2;
}
.grid-3 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
    background: #4BB0D6;
}
.grid-4 {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 4;
    grid-row-end: 5;
    background: #078FC2;
}
.grid-5 {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 5;
    grid-row-end: 6;
    background: #04678D;
}Code language: CSS (css)

.wrap {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
    grid-template-rows: 50px 50px 50px 50px 50px;
    grid-gap: 5px;
}

.grid-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background: #289FCC;
}

.grid-2 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background: #6BC1E2;
}

.grid-3 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    background: #4BB0D6;
}

.grid-4 {
    grid-column: 4 / 5;
    grid-row: 4 / 5;
    background: #078FC2;
}

.grid-5 {
    grid-column: 5 / 6;
    grid-row: 5 / 6;
    background: #04678D;
}Code language: CSS (css)