gapプロパティのギャップについて

まずはgridでサンプル

// css

.grider{

	 all:unset;

	width:80%;

	display:grid;

	grid-template-columns: repeat(2, 50%);

	grid-template-rows: repeat(3, 1fr);

	gap:24px;

	background:gray;

}

.grider > div{

	all:unset;

}



//html

<div class="grider">

	<div style="background:tomato;">AAAA</div>

	<div style="background:skyblue;">BBBB</div>

	<div style="background:limegreen;">CCCC</div>

	<div style="background:yellow;">DDDD</div>

	<div style="background:magenta;">EEEE</div>

</div>

つづいてflexでサンプル

//css

.flexer{

	all:unset;

	width:80%;

	display:flex;

	flex-flow:row wrap;

	gap:24px;

	background:gray;

}

.flexer > div{

	all:unset;

	flex: 0 1 50%;

} 



//html

<div class="flexer">

	<div style="background:tomato;">AAAA</div>

	<div style="background:skyblue;">BBBB</div>

	<div style="background:limegreen;">CCCC</div>

	<div style="background:yellow;">DDDD</div>

	<div style="background:magenta;">EEEE</div>

</div>

結論

gridの場合は『fr』にするとgapを反映した数値で計算してくれる。

flexの場合は幅を指定する際に『calc((親幅 - gap) / 子数)』で計算せにゃならん。

//css

.flexer2{

	all:unset;

	width:80%;

	display:flex;

	flex-flow:row wrap;

	gap:24px;

	background:gray;

}

.flexer2 > div{

	all:unset;

	flex: 0 1 20%;

} 

felxに関してはレスポンシブなコントロール感を全否定しているような気がする。