Grid minmax()

.item-1 { background-color: #289FCC; }
.item-2 { background-color: #6BC1E2; }
.item-3 { background-color: #078FC2; }
.item-4 { background-color: #4BB0D6; }

przykład 1

<div class="hold-1">
	<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>
.hold-1 {
	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-2">
	<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>
.hold-2 {
	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-2 {
	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