Grid układ siatki
układ siatki – przykład 1
<div class="hold"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
.hold {
border: 1px dashed white;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
gap: 3px;
}
.item {
background: #289DCC;
}
1
2
3
4
5
6
układ siatki – przykład 2
<div class="hold"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
.hold {
border: 1px dashed white;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 70px 70px;
gap: 3px;
}
.item {
background: #289DCC;
}
1
2
3
4
5
6
układ siatki – przykład 3
<div class="hold"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
.hold {
border: 1px dashed white;
width: 400px;
height: 200px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 70px 70px;
gap: 3px;
}
.item {
background: #289DCC;
}
1
2
3
4
5
6
układ siatki – przykład 4
<div class="hold"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
.hold {
border: 1px dashed white;
width: 400px;
height: 200px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 70px 70px;
gap: 3px;
}
.item {
background: #289DCC;
width: 50px;
height: 50px;
}
1
2
3
4
5
6