/ Gists / Flexbox Solver
On gists

Flexbox Solver

CSS CSS trick

solver.css Raw #

/*

https://kentondejong.medium.com/this-css-1-liner-will-improve-your-flexbox-7e40e977ef5c

*/

.parent {
  --gap: 20px;
  --columns: 5;
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
		
}

.child {
	
flex: 0 1 calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
	
}