Вариант 1:
1
2
3
|
1 2 3 4 5 |
<div class="grid template-1"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.grid { background: #fff; display: grid; grid-gap: 10px; } .grid .col { background-color: #337AB7; display: grid; place-items: center; color: #fff; font-weight: bold; padding: 30px; font-size: 28px; } .grid.template-1 { grid-template-columns: repeat(3, 1fr); } |
Вариант 2:
1
2
3
4
|
1 2 3 4 5 6 |
<div class="grid template-2"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.grid { background: #fff; display: grid; grid-gap: 10px; } .grid .col { background-color: #337AB7; display: grid; place-items: center; color: #fff; font-weight: bold; padding: 30px; font-size: 28px; } .grid.template-2 { grid-template: repeat(2, 1fr)/repeat(2, 1fr); } |
Вариант 3:
1
2
3
|
1 2 3 4 5 |
<div class="grid template-3"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.grid { background: #fff; display: grid; grid-gap: 10px; } .grid .col { background-color: #337AB7; display: grid; place-items: center; color: #fff; font-weight: bold; padding: 30px; font-size: 28px; } .grid.template-3 { grid-template: "sidebar a" "sidebar b"; } .grid.template-3 > :nth-child(1) { grid-area: sidebar; } |
Вариант 4:
1
2
3
|
1 2 3 4 5 |
<div class="grid template-4"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.grid { background: #fff; display: grid; grid-gap: 10px; } .grid .col { background-color: #337AB7; display: grid; place-items: center; color: #fff; font-weight: bold; padding: 30px; font-size: 28px; } .grid.template-4 { grid-template: "a sidebar" "b sidebar"; } .grid.template-4 > :nth-child(3) { grid-area: sidebar; } |
Александр, а как их сделать разной ширины?
Например, для 4 варианта, так:
.grid.template-4 { grid-template: "a sidebar" "b sidebar"; grid-template-columns: auto 300px; }