{"id":8260,"date":"2024-02-09T11:51:10","date_gmt":"2024-02-09T10:51:10","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=8260"},"modified":"2024-02-09T12:12:01","modified_gmt":"2024-02-09T11:12:01","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\">export function AutoRowColumns(props: { children?: React.ReactNode }) {\n    return &lt;div style={{ display: \"grid\", gridAutoFlow: \"column\", gridAutoColumns: \"max-content\", columnGap: \"1rem\" }}>\n        {props.children}\n    &lt;\/div>;\n}\n\n\nexport function HAlign(props: { align: \"left\" | \"center\" | \"right\"; children?: ReactNode; }) {\n    return &lt;div style={{ display: \"grid\", width: \"100%\", justifyItems: props.align }}>\n        {props.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":4,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/8260\/revisions"}],"predecessor-version":[{"id":8270,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/8260\/revisions\/8270"}],"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}]}}