普段、等間隔配置カラムのレイアウトのために、「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;
}
}
}