px
<div class="hold-px"> <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> .item6-blok .hold-px { display: grid; grid-template-columns: 90px 90px 90px 90px; }
item 1
item 2
item 3
item 4
%
<div class="hold-procent"> <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> .item6-blok .hold-procent { display: grid; grid-template-columns: 25% 25% 25% 25%; }
item 1
item 2
item 3
item 4
fr
<div class="hold-fr"> <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> .item6-blok .hold-fr { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
item 1
item 2
item 3
item 4
auto
<div class="hold-auto"> <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> .item6-blok .hold-auto { display: grid; grid-template-columns: auto auto auto auto; }
item 1
item 2
item 3
item 4
auto + fr
<div class="hold-auto-fr"> <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> .item6-blok .hold-auto-fr { display: grid; grid-template-columns: auto 1fr 1fr 1fr; }
item 1
item 2
item 3
item 4