#Grid

import { girdSystem } from "@poodle/system";

grid system support CSS Grid.



const listSystem = compose(flexSystem);


export const system = createSystem(listSystem);


const styles = system({
    theme: {
        spacing: {
            scale: "1.5rem",
        },
    },
    gridTemplateRows: "50px 20px",
    gridRowGap: "scale-2"
});


// Styles result
//  { gridTemplateRows: "50px 20px" },
//  { gridRowGap: "3rem" },
PropTypeDescription
alignContentResponsiveProp<CSS.Property.AlignContent>The CSS align-content property
alignSelfResponsiveProp<CSS.Property.AlignSelf>The CSS align-self property
gridAreaResponsiveProp<CSS.Property.GridArea>The CSS grid-area property
gridAutoColumnsResponsiveProp<CSS.Property.GridAutoColumns>The CSS grid-auto-columns property
gridAutoFlowResponsiveProp<CSS.Property.GridAutoFlow>The CSS grid-auto-flow property
gridAutoRowsResponsiveProp<CSS.Property.GridAutoRows>The CSS grid-auto-rows property
gridColumnResponsiveProp<CSS.Property.GridColumn>The CSS grid-row property
gridColumnEndResponsiveProp<CSS.Property.GridColumnEnd>The CSS grid-column-end property
gridColumnGapResponsiveProp<CSS.Property.GridColumnGap>The CSS grid-column-gap property

Support spacing
gridColumnStartResponsiveProp<CSS.Property.GridColumnStart>The CSS grid-column-start property
gridGapResponsiveProp<CSS.Property.GridGap>The CSS grid-gap property

Support spacing
gridRowResponsiveProp<CSS.Property.GridRow>The CSS grid-row property
gridRowEndResponsiveProp<CSS.Property.GridRowEnd>The CSS grid-row-end property
gridRowGapResponsiveProp<CSS.Property.GridRowGap>The CSS grid-row-gap property

Support spacing
gridRowStartResponsiveProp<CSS.Property.GridRowStart>The CSS grid-row-start property
gridTemplateAreasResponsiveProp<CSS.Property.GridTemplateAreas>The CSS grid-template-areas property
gridTemplateColumnsResponsiveProp<CSS.Property.GridTemplateColumns>The CSS grid-template-columns property
gridTemplateRowsResponsiveProp<CSS.Property.GridTemplateRows>The CSS grid-template-rows property
justifyContentResponsiveProp<CSS.Property.JustifyContent>The CSS justify-content property
justifySelfResponsiveProp<CSS.Property.JustifySelf>The CSS justify-self property