Note

等間隔配置カラムのレイアウト

普段、等間隔配置カラムのレイアウトのために、「c-column」というクラスで管理しています。
IEが切れるならGridを使いたい。

Grid,Flex共に 以下のような同じHTMLとします。

<ul class="c-column -col-3 -gap-c-50 -gap-r-60">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

 


 

display: grid;

 

自分自身で完結するのがGridです。
所々ある「mq-up」や「mq-updown」などはメディアクエリを管理するmixinです。
「-col-3」や「-gap-c-50」などのクラスを使い分けることで、カラム数や余白を変えることができます。

/* ------------------------------------------------------------
 c-column
------------------------------------------------------------ */
.c-column{
	display: grid;


	/* ------------------------------------------------------------
	 column
	------------------------------------------------------------ */
	/* ---------- -col-3 ---------- */
	&.-col-3{
		@include mq-up(md){
			grid-template-columns: repeat(3, 1fr);
		}
		@include mq-updown(md,sm){
			grid-template-columns: repeat(2, 1fr);
		}
		@include mq-down(sm){
			grid-template-columns: repeat(1, 1fr);
		}
	}

	/* ---------- -col-4 ---------- */
	&.-col-4{
		@include mq-up{
			grid-template-columns: repeat(4, 1fr);
		}
		@include mq-updown{
			grid-template-columns: repeat(3, 1fr);
		}
		@include mq-down(sm){
			grid-template-columns: repeat(1, 1fr);
		}
	}


	/* ------------------------------------------------------------
	 gap column
	------------------------------------------------------------ */
	/* ----- -gap-c-50 ----- */
	&.-gap-c-50{
		@include mq-up{
			column-gap: 5.0rem;
		}
		@include mq-down{
			column-gap: 3.0rem;
		}
	}


	/* ------------------------------------------------------------
	 gap row
	------------------------------------------------------------ */
	/* ----- -gap-r-60 ----- */
	&.-gap-r-60{
		@include mq-up{
			row-gap: 6.0rem;
		}
		@include mq-down{
			row-gap: 5.0rem;
		}
	}

}

 


 

display: flex;

 

flexを使う場合は、
子要素でマージン、自分自身にネガティブマージンを使い 余白を設定します。
CSS変数を使うことで 少しだけまともになりましたが、、、

また、IEでカラム落ちを防ぐために、IEのみで -0.1px 引きます。
※JavaScripで、ユーザーエージェントをから bodyに「ua-ブラウザ名」というクラスを付与します。

/* ------------------------------------------------------------
 calc
 IEでのカラム落ちを防ぐ
------------------------------------------------------------ */
@mixin calc( $property , $value ) {
	#{$property}: calc( #{$value} );

	body.ua-ie &,
	body.ua-edge &{
		#{$property}: calc( ( #{$value} ) - 0.1px );
	}
}


/* ------------------------------------------------------------
 c-column
------------------------------------------------------------ */
.c-column{
	display: flex;
	flex-wrap: wrap;
	margin-top: calc( var( --row-gap , 0px ) * -1 );
	margin-left: calc( var( --column-gap , 0px ) * -1 );

	> *{
		margin-top: var( --row-gap , 0px );
		margin-left: var( --column-gap , 0px );
	}


	/* ------------------------------------------------------------
	 column
	------------------------------------------------------------ */
	/* ---------- -col-3 ---------- */
	&.-col-3{
		> *{
			@include mq-up(md){
				@include calc( width , "100% / 3 - var( --column-gap , 0px )" );
			}
			@include mq-updown(md,sm){
				@include calc( width , "100% / 2 - var( --column-gap , 0px )" );
			}
			@include mq-down(sm){
				width: 100%;
			}
		}
	}

	/* ---------- -col-4-md ---------- */
	&.-col-4-md{
		> *{
			@include mq-up{
				@include calc( width , "100% / 4 - var( --column-gap , 0px )" );
			}
			@include mq-updown{
				@include calc( width , "100% / 3 - var( --column-gap , 0px )" );
			}
			@include mq-down(sm){
				width: 100%;
			}
		}
	}


	/* ------------------------------------------------------------
	 gap column
	------------------------------------------------------------ */
	/* ----- -gap-c-50 ----- */
	&.-gap-c-50{
		@include mq-up{
			--column-gap: 5.0rem;
		}
		@include mq-down{
			--column-gap: 3.0rem;
		}
	}


	/* ------------------------------------------------------------
	 gap row
	------------------------------------------------------------ */
	/* ----- -gap-r-60 ----- */
	&.-gap-r-60{
		@include mq-up{
			--row-gap: 6.0rem;
		}
		@include mq-down{
			--row-gap: 5.0rem;
		}
	}
}