Grid layout

grid layout 1

<div class="hold-1">
	<div class="item item-1">Head</div>
	<div class="item item-1-2">Head 2</div>
	<div class="item item-2">Main</div>
	<div class="item item-2-2">Main 2</div>
	<div class="item item-3">Side</div>
	<div class="item item-4">Footer</div>
</div>
.hold-1 {
	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;
}
.hold-1 .item-1 {
	grid-area: head;
	background: #289DCC;
}
.hold-1 .item-1-2 {
	grid-area: head2;
	background: #6BC1E2;
}
.hold-1 .item-2 {
	grid-area: main;
	background: #6BC1E2;
}
.hold-1 .item-2-2 {
	grid-area: main2;
	background: #289DCC;
}
.hold-1 .item-3 {
	grid-area: side;
	background: #289DCC;
}
.hold-1 .item-4 {
	grid-area: footer;
	background: #289DCC;
}
Head
Head 2
Main
Main 2
Side
Footer

grid layout 2

<div class="hold-2">
	<div class="item item-1">Head</div>
	<div class="item item-2">Main</div>
	<div class="item item-3">Side</div>
	<div class="item item-4">Footer</div>
</div>
.hold-2 {
   	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;
}
.hold-2 .item-1 {
	grid-area: head;
	background: #289DCC;
}
.hold-2 .item-2 {
	grid-area: main;
	background: #6BC1E2;
}
.hold-2 .item-3 {
	grid-area: side;
	background: #289DCC;
}
.hold-2 .item-4 {
	grid-area: footer;
	background: #289DCC;
}
Head
Main
Side
Footer

grid layout 3

<div class="hold-3">
    <div class="item item-1">item 1</div>
    <div class="item item-2">item 2</div>
    <div class="item item-3">item 3</div>
    <div class="item item-4">item 4</div>
    <div class="item item-5">item 5</div>
</div>

Inny sposób zapisu:

.hold-3 {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
	grid-template-rows: 50px;
	grid-gap: 5px;
}
.hold-3 .item-1 {
	grid-column-start: 1;
	grid-column-end: 2;
	background: #289FCC;
}
.hold-3 .item-2 {
	grid-column-start: 2;
	grid-column-end: 3;
	background: #6BC1E2;
}
.hold-3 .item-3 {
	grid-column-start: 3;
	grid-column-end: 4;
	background: #4BB0D6;
}
.hold-3 .item-4 {
	grid-column-start: 4;
	grid-column-end: 5;
	background: #078FC2;
}
.hold-3 .item-5 {
	grid-column-start: 5;
	grid-column-end: 6;
	background: #04678D;
}
.hold-3 {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
	grid-template-rows: 50px;
	grid-gap: 5px;
}
.hold-3 .item-1 {
	grid-column: 1 / 2;
	background: #289FCC;
}
.hold-3 .item-2 {
	grid-column: 2 / 3;
	background: #6BC1E2;
}
.hold-3 .item-3 {
	grid-column: 3 / 4;
	background: #4BB0D6;
}
.hold-3 .item-4 {
	grid-column: 4 / 5;
	background: #078FC2;
}
.hold-3 .item-5 {
	grid-column: 5 / 6;
	background: #04678D;
}
item 1
item 2
item 3
item 4
item 5

grid layout 4

<div class="hold-4">
    <div class="item item-1">item 1</div>
    <div class="item item-2">item 2</div>
    <div class="item item-3">item 3</div>
    <div class="item item-4">item 4</div>
    <div class="item item-5">item 5</div>
</div>

Inny sposób zapisu:

.hold-4 {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
	grid-template-rows: 50px 50px 50px 50px 50px;
	grid-gap: 5px;
}
.hold-4 .item-1 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	background: #289FCC;
}
.hold-4 .item-2 {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	background: #6BC1E2;
}
.hold-4 .item-3 {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 3;
	grid-row-end: 4;
	background: #4BB0D6;
}
.hold-4 .item-4 {
	grid-column-start: 4;
	grid-column-end: 5;
	grid-row-start: 4;
	grid-row-end: 5;
	background: #078FC2;
}
.hold-4 .item-5 {
	grid-column-start: 5;
	grid-column-end: 6;
	grid-row-start: 5;
	grid-row-end: 6;
	background: #04678D;
}
.hold-4 {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
	grid-template-rows: 50px 50px 50px 50px 50px;
	grid-gap: 5px;
}

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

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

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

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

.hold-4 .item-5 {
	grid-column: 5 / 6;
	grid-row: 5 / 6;
	background: #04678D;
}
item 1
item 2
item 3
item 4
item 5