On gists

Flex with gap

CSS CSS trick

demo1.css Raw #

/* https://coryrylan.com/blog/css-gap-space-with-flexbox */


.emulated-flex-gap {
  --gap: 12px;
  display: inline-flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
  width: calc(100% + var(--gap));
}

.emulated-flex-gap > * {
  margin: var(--gap) 0 0 var(--gap);
}

demo-my-solution.css Raw #

/* https://jsbin.com/bofitujaho/2/edit?html,css,output */ 

* {
  box-sizing: border-box;
}

div {
	
	
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	border: 0px solid black;
	gap: 20px;
	border: 3px solid black;
	
}

span 
{
	background: red;
	 
	width: calc(25% - 15px);
	/*
		((pocet sloupcu - 1 ) * gap)  / poctem sloupcu
	*/
}