Basic

.container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
	

Nested

.container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.container .container {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
	

Percentages

(Percentage row gaps only appear when height is specified, disabled in polyfill for now).

.container
	display: flex;
	flex-wrap: wrap;
	gap: 6%;
}
	

Ems

.container
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
}
	

Nested Combination (% > px, px > %, em > px, etc)

.container
	display: flex;
	flex-wrap: wrap;
	gap: 6%;
}

.container .container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
	

Percentage gaps aren't that reliable if the width of the container is not 100% of it's parent.

.container
	display: flex;
	flex-wrap: wrap;
	gap: 6%;
}

.container .container {
	display: flex;
	flex-wrap: wrap;
	gap: 3%;
}
	

Margin + Gap

.container
	display: flex;
	flex-wrap: wrap;
	margin: 20px;
	gap: 3%;
}
	

Justify End

.container
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 3%;
}
	

Space Evenly

.container
	display: flex;
	flex-wrap: wrap;
	gap: 3%;
	justify-content: space-evenly;
}
	

Grid

.container {
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
	--gap: 20px;
	gap: var(--gap);
	max-width: 400px;
}

.item {
	flex: calc(50% - var(--gap));
}
	

Columns and Rows Independently

.container {
	display: flex;
	flex-wrap: wrap;
	row-gap: 40px;
}

.container .container {
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
}
	

When container doesn't have flex

.container {
	display: grid;
	gap: 40px;
	margin-left: 40px;
}