Grid layout
grid layout 1
<div class="hold">
<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 {
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;
}
.item-1 {
grid-area: head;
background: #289DCC;
}
.item-1-2 {
grid-area: head2;
background: #6BC1E2;
}
.item-2 {
grid-area: main;
background: #6BC1E2;
}
.item-2-2 {
grid-area: main2;
background: #289DCC;
}
.item-3 {
grid-area: side;
background: #289DCC;
}
.item-4 {
grid-area: footer;
background: #289DCC;
}
Head
Head 2
Main
Main 2
Side
Footer
grid layout 2
<div class="hold">
<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 {
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;
}
.item-1 {
grid-area: head;
background: #289DCC;
}
.item-2 {
grid-area: main;
background: #6BC1E2;
}
.item-3 {
grid-area: side;
background: #289DCC;
}
.item-4 {
grid-area: footer;
background: #289DCC;
}
Head
Main
Side
Footer
grid layout 3
<div class="hold">
<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 {
display: grid;
grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
grid-template-rows: 50px;
grid-gap: 5px;
}
.item-1 {
grid-column-start: 1;
grid-column-end: 2;
background: #289FCC;
}
.item-2 {
grid-column-start: 2;
grid-column-end: 3;
background: #6BC1E2;
}
.item-3 {
grid-column-start: 3;
grid-column-end: 4;
background: #4BB0D6;
}
.item-4 {
grid-column-start: 4;
grid-column-end: 5;
background: #078FC2;
}
.item-5 {
grid-column-start: 5;
grid-column-end: 6;
background: #04678D;
}
.hold {
display: grid;
grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
grid-template-rows: 50px;
grid-gap: 5px;
}
.item-1 {
grid-column: 1 / 2;
background: #289FCC;
}
.item-2 {
grid-column: 2 / 3;
background: #6BC1E2;
}
.item-3 {
grid-column: 3 / 4;
background: #4BB0D6;
}
.item-4 {
grid-column: 4 / 5;
background: #078FC2;
}
.item-5 {
grid-column: 5 / 6;
background: #04678D;
}
item 1
item 2
item 3
item 4
item 5
grid layout 4
<div class="hold">
<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 {
display: grid;
grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
grid-template-rows: 50px 50px 50px 50px 50px;
grid-gap: 5px;
}
.item-1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
background: #289FCC;
}
.item-2 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
background: #6BC1E2;
}
.item-3 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #4BB0D6;
}
.item-4 {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 4;
grid-row-end: 5;
background: #078FC2;
}
.item-5 {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 5;
grid-row-end: 6;
background: #04678D;
}
.hold {
display: grid;
grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
grid-template-rows: 50px 50px 50px 50px 50px;
grid-gap: 5px;
}
.item-1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
background: #289FCC;
}
.item-2 {
grid-column: 2 / 3;
grid-row: 2 / 3;
background: #6BC1E2;
}
.item-3 {
grid-column: 3 / 4;
grid-row: 3 / 4;
background: #4BB0D6;
}
.item-4 {
grid-column: 4 / 5;
grid-row: 4 / 5;
background: #078FC2;
}
.item-5 {
grid-column: 5 / 6;
grid-row: 5 / 6;
background: #04678D;
}
item 1
item 2
item 3
item 4
item 5