Grid
grid の Utility クラスです。
GridTemplateColumns
grid-template-columns で 1~12 分割が可能です。また、none も設定可能です。
- ab-grid-cols-x:
grid-template-columns: repeat(x, minmax(0, 1fr)); - ab-grid-cols-none:
grid-template-columns: none;
GridTemplateRows
grid-template-rows で 1~12 分割が可能です。また、none も設定可能です。
- ab-grid-rows-x:
grid-template-rows: repeat(x, minmax(0, 1fr)); - ab-grid-rows-none:
grid-template-rows: none;
GridAutoFlow
grid-auto-flow を指定可能です。
- ab-grid-flow-row:
grid-auto-flow: row; - ab-grid-flow-col:
grid-auto-flow: column; - ab-grid-flow-dense:
grid-auto-flow: dense; - ab-grid-flow-row-dense:
grid-auto-flow: row dense; - ab-grid-flow-col-dense:
grid-auto-flow: column dense;
GridColumn
grid-column と grid-column-start, grid-column-end を指定可能です。 grid-column は auto, 1~12, full を指定可能です。
- ab-col-auto:
grid-column: auto; - ab-col-span-x:
grid-column: span x / span x; - ab-col-span-full:
grid-column: 1 / -1;
また、start と end の指定も可能です。auto と grid line を利用した 1~13 で指定可能です。
- ab-col-start-auto:
grid-column-start: auto; - ab-col-start-x:
grid-column-start: x;
GridRow
grid-row と grid-row-start, grid-row-end を指定可能です。 grid-row は auto, 1~12, full を指定可能です。
- ab-row-auto:
grid-row: auto; - ab-row-span-x:
grid-row: span x / span x; - ab-row-span-full:
grid-row: 1 / -1;
また、start と end の指定も可能です。auto と grid line を利用した 1~13 で指定可能です。
- ab-row-start-auto:
grid-row-start: auto; - ab-row-start-x:
grid-row-start: x;
Responsive
各種 class は ab-{breakpoint}-{property} でレスポンシブ対応しています。