Grid

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