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