@import './variable';

@mixin grid(

    $dsp: g,
    $g: null,
    
    $t:null,
    $tc: null,
    $tr: null, 
    $ta: null, 

    $r:null,
    $rg: null,
    $rs:null,
    $re:null,

    $c:null,
    $cs:null,
    $ce:null,
    $cg:null,

    $af:null,
    $ac:null,
    $ar:null,

    $a: null,
    $gap:null,

    
    $ji: null,
    $ai: null,
    $jc: null,
    $aic: null,
    $js: null,
    $as: null,
    $ps: null

    ) {
    display: map-get($gridVal, $dsp);
    grid: $g;

    grid-template: $t;
    grid-template-columns: $tc;
    grid-template-rows: $tr;
    grid-template-areas: $ta;

    grid-column: $c;
    grid-column-start: $cs;
    grid-column-end:$ce;
    grid-column-gap:$cg;

    grid-row: $r;
    grid-row-gap:$rg;
    grid-row-start:$rs;
    grid-row-end:$re;

    grid-area: $a;

    grid-gap: $gap;

    grid-auto-flow: map-get($flowVal, $af);
    grid-auto-columns: $ac;
    grid-auto-rows: $ar;

    justify-items:  map-get($itemsVal, $ji);
    align-items: map-get($itemsVal, $ai);
    justify-content:  map-get($contentVal, $jc);
    align-content:map-get($contentVal, $aic);
    justify-self:   map-get($contentVal, $js);
    align-self: map-get($contentVal, $as); 
    place-self: map-get($contentVal, $ps);
}