Grid minmax()
przykład 1
<div class="hold"> <div>item 1</div> <div>item 2</div> <div>item 3</div> </div>
.hold { display: grid; grid-template-columns: minmax(200px, 500px) 1fr 1fr; grid-template-rows: 70px; grid-gap: 5px; }
szerokość .gridMM-1 = 100%
item 1
item 2
item 3
szerokość .hold-1 = 50%
item 1
item 2
item 3
przykład 2
<div class="hold"> <div>item 1</div> <div>item 2</div> <div>item 3</div> </div>
.hold { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr); grid-template-rows: 70px; grid-gap: 5px; }
INNY SPOSÓB ZAPISU CSS: .hold { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); grid-template-rows: 70px; grid-gap: 5px; }
szerokość .hold-2 = 100%
item 1
item 2
item 3
szerokość .hold-2 = 50%
item 1
item 2
item 3