Catpow SCSS

background image

grd

グリッドレイアウト関連のプロパティを設定します。

Params

t
grid-template

rc
grid-template-columns

rr
grid-template-rows

tc
grid-template-columns

tr
grid-template-rows

ac
grid-auto-columns

ar
grid-auto-rows

f
grid-auto-flow

Keyword
  • c
    column
  • r
    row
  • d
    dense

j
justify-content

Keyword
  • s
    start
  • e
    end
  • c
    center
  • b
    space-between
  • a
    space-around
  • v
    space-evenly

a
align-content

Keyword
  • s
    start
  • e
    end
  • c
    center
  • b
    space-between
  • a
    space-around
  • v
    space-evenly

ji
justify-items

Keyword
  • s
    start
  • e
    end
  • c
    center
  • b
    space-between
  • a
    space-around
  • v
    space-evenly

ai
align-items

Keyword
  • s
    start
  • e
    end
  • c
    center
  • b
    space-between
  • a
    space-around
  • v
    space-evenly

g
grid-gap

scss
@import 'catpow';

@include grd((tc:a 1fr,g:20));
css
display: -webkit-grid;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto 1fr;
grid-template-columns: auto 1fr;
grid-gap: 20px;
scss
@import 'catpow';

@include grd((rc:200));
css
display: -webkit-grid;
display: -ms-grid;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));