{"id":8260,"date":"2024-02-09T11:51:10","date_gmt":"2024-02-09T10:51:10","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=8260"},"modified":"2026-09-09T16:22:37","modified_gmt":"2026-09-09T15:22:37","slug":"react-css-grid-layout-helpers","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/react-css-grid-layout-helpers\/","title":{"rendered":"React CSS-Grid Layout helpers"},"content":{"rendered":"\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"tsx\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">\nexport function GridColumns(props: { children?: React.ReactNode, className?: string, style?: React.CSSProperties, columns: string, gap?: string, alignItems?: React.CSSProperties[\"alignItems\"] }) {\n    return &lt;div className={props.className} style={{ display: \"grid\", gridTemplateColumns: props.columns, columnGap: props.gap, width: \"100%\", alignItems: props.alignItems ?? \"stretch\", ...props.style }}>\n        {props.children}\n    &lt;\/div>;\n}\n\n\nexport function GridAutoColumns(props: { children?: React.ReactNode, className?: string, justify?: React.CSSProperties[\"justifyContent\"] }) {\n    return &lt;div className={props.className} style={{ display: \"grid\", gridAutoFlow: \"column\", gridAutoColumns: \"max-content\", columnGap: \"1rem\", justifyContent: props.justify ?? \"start\" }}>\n        {props.children}\n    &lt;\/div>;\n}\n\nexport function GridRows(props: { children?: React.ReactNode, className?: string, style?: React.CSSProperties, rows: string, gap?: string, alignItems?: React.CSSProperties[\"alignItems\"] }) {\n    return &lt;div className={props.className} style={{ display: \"grid\", gridTemplateRows: props.rows, rowGap: props.gap, width: \"100%\", alignItems: props.alignItems ?? \"stretch\", ...props.style }}>\n        {props.children}\n    &lt;\/div>;\n}\n\nimport type { Property } from \"csstype\";\nimport type { ReactNode } from \"react\";\n\ntype AlignProps = {\n    h?: Property.JustifyItems;\n    v?: Property.AlignItems;\n    children: ReactNode;\n} &amp; React.HTMLAttributes&lt;HTMLDivElement>; \/\/ \ud83d\udc48 alle standaard div-props\n\nexport function Align({ h, v, children, ...restOfProps }: AlignProps) {\n    let style: React.CSSProperties = {};\n\n    if (h || v)\n        style = { ...style, display: \"grid\" };\n\n    if (h) {\n        style = { ...style, width: \"100%\", justifyItems: h };\n    }\n\n    if (v) {\n        style = { ...style, height: \"100%\", alignItems: v };\n    }\n    return &lt;div style={ style } {...restOfProps }>\n        { children }\n        &lt;\/div>;\n}\n\n\nexport const when = (value: boolean, e: React.ReactNode) => value ? e : &lt;>&lt;\/>;\nexport const onlyWhen = (value: boolean, fn: () => JSX.Element) => value ? fn() : &lt;>&lt;\/>;\n\n\n\n\n&lt;>\n{when(!!importResult, &lt;>I am processed but not visible when false&lt;\/>)}\n{onlyWhen(!!importResult, () => &lt;>I am not processed when false&lt;\/>})}\n&lt;\/>\n\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8260","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/8260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=8260"}],"version-history":[{"count":8,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/8260\/revisions"}],"predecessor-version":[{"id":10271,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/8260\/revisions\/10271"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=8260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=8260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=8260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}