{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/cheatsheets-for-flex-grid-anchor-positioning-and-invoker-commands/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Cheatsheets for flex, grid, anchor positioning and invoker commands\",\n  \"cover\": \"/blogs/cheatsheets/cards.png\",\n  \"date\": \"2026-07-27\",\n  \"type\": [\"announcement\", \"cheatsheet\"]\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `For CSS Day this year we created a set of cheatsheets explaining Flexbox, Grid, Anchor positioning and Invoker commands.`), mdx(\"p\", null, `They came out beautifully and a lot of people really liked them at our booth, so we decided to make them available as free downloads at `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/cheatsheets\"\n  }), `polypane.app/cheatsheets`), `.`), mdx(\"h2\", {\n    \"id\": \"css-day-swag\"\n  }, `CSS Day swag`), mdx(\"p\", null, `This year we had a booth at CSS Day in Amsterdam, and it was a ton of fun to talk to so many Polypane users (the crowd as well as the speaker line-up was full of them!) and to meet so many people for who Polypane was new and who were excited to try it out.`), mdx(\"img\", {\n    src: CSSday3,\n    className: \"imgshadow\",\n    alt: \"Polypane booth at CSS Day 2026\"\n  }), mdx(\"p\", null, `Of course we made sure to bring stickers, badges and pins, but for our booth at CSS Day we also wanted to create some swag that wasn't just 'thing with our logo', but something that you'd actually want to keep and use.`), mdx(\"p\", null, `Having recently struggled a lot with Anchor positioning and always forgetting the exact syntax for Grid areas made those easy topics to pick because, if nothing else, we would find them useful ourselves.`), mdx(\"p\", null, `Flex to go along with Grid and the very exciting new Invoker commands were natural choices to go along with those two, so that's how we ended up with the four cheatsheets we made.`), mdx(\"img\", {\n    src: CSSday1,\n    className: \"imgshadow\",\n    alt: \"Someone holding an Anchor positioning cheatsheet\",\n    className: \"imgshadow\"\n  }), mdx(\"i\", null, \"Photo by \", mdx(\"a\", {\n    href: \"https://richardtheemling.com/\"\n  }, \"Richard Theemling\"), \" for CSS Day\"), mdx(\"p\", null, `The cheatsheets aren't Polypane-specific, they're just nice-looking references for these topics that (for the print versions) you can keep on your desk and refer to for a quick lookup of 'how to do that thing again'.`), mdx(\"img\", {\n    src: CSSday2,\n    className: \"imgshadow\",\n    alt: \"Someone holding an Invokers cheatsheet\",\n    className: \"imgshadow\"\n  }), mdx(\"i\", null, \"Photo by \", mdx(\"a\", {\n    href: \"https://richardtheemling.com/\"\n  }, \"Richard Theemling\"), \" for CSS Day\"), mdx(\"h2\", {\n    \"id\": \"the-cheatsheets\"\n  }, `The cheatsheets`), mdx(\"p\", null, `We had the cheatsheets printed on very nice card stock with a matte finish and rounded corners and wanted to make sure at least some of that came across in the online version, so as you pick one of the cards on `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/cheatsheets\"\n  }), `polypane.app/cheatsheets`), ` you'll see a nice rendering of the card with the same matte finish as you mouse over it. Definitely recommend checking out that page (and bookmarking it for later) if you want to see the cards in all their glory.`), mdx(\"p\", null, `If you just want to download them, you can scroll down to download them directly from this page. All downloads are free and print-ready (they have a 3mm bleed and are in A5 format).`), mdx(\"h3\", {\n    \"id\": \"flexbox-cheatsheet\"\n  }, `Flexbox Cheatsheet`), mdx(\"img\", {\n    src: flexPNG,\n    alt: \"Flexbox Cheatsheet\",\n    className: \"imgshadow\",\n    style: {\n      maxWidth: '80%',\n      borderRadius: '0.5rem'\n    }\n  }), mdx(\"div\", {\n    style: {\n      display: 'flex',\n      gap: '1rem',\n      flexWrap: 'wrap',\n      justifyContent: 'center'\n    }\n  }, mdx(\"a\", {\n    href: flexPDF,\n    download: \"Flexbox Cheatsheet.pdf\",\n    className: \"download-button\"\n  }, \"Download as PDF\"), mdx(\"a\", {\n    href: flexPNG,\n    download: \"Flexbox Cheatsheet.png\",\n    className: \"download-button\"\n  }, \"Download as PNG\")), mdx(\"h3\", {\n    \"id\": \"grid-cheatsheet\"\n  }, `Grid Cheatsheet`), mdx(\"img\", {\n    src: gridPNG,\n    alt: \"Grid Cheatsheet\",\n    className: \"imgshadow\",\n    style: {\n      maxWidth: '80%',\n      borderRadius: '0.5rem'\n    }\n  }), mdx(\"div\", {\n    style: {\n      display: 'flex',\n      gap: '1rem',\n      flexWrap: 'wrap',\n      justifyContent: 'center'\n    }\n  }, mdx(\"a\", {\n    href: gridPDF,\n    download: \"Grid Cheatsheet.pdf\",\n    className: \"download-button\"\n  }, \"Download as PDF\"), mdx(\"a\", {\n    href: gridPNG,\n    download: \"Grid Cheatsheet.png\",\n    className: \"download-button\"\n  }, \"Download as PNG\")), mdx(\"h3\", {\n    \"id\": \"anchor-cheatsheet\"\n  }, `Anchor Cheatsheet`), mdx(\"img\", {\n    src: anchorPNG,\n    alt: \"Anchor Cheatsheet\",\n    className: \"imgshadow\",\n    style: {\n      maxWidth: '80%',\n      borderRadius: '0.5rem'\n    }\n  }), mdx(\"div\", {\n    style: {\n      display: 'flex',\n      gap: '1rem',\n      flexWrap: 'wrap',\n      justifyContent: 'center'\n    }\n  }, mdx(\"a\", {\n    href: anchorPDF,\n    download: \"Anchor Cheatsheet.pdf\",\n    className: \"download-button\"\n  }, \"Download as PDF\"), mdx(\"a\", {\n    href: anchorPNG,\n    download: \"Anchor Cheatsheet.png\",\n    className: \"download-button\"\n  }, \"Download as PNG\")), mdx(\"h3\", {\n    \"id\": \"invoker-cheatsheet\"\n  }, `Invoker Cheatsheet`), mdx(\"img\", {\n    src: invokerPNG,\n    alt: \"Invoker Cheatsheet\",\n    className: \"imgshadow\",\n    style: {\n      maxWidth: '80%',\n      borderRadius: '0.5rem'\n    }\n  }), mdx(\"div\", {\n    style: {\n      display: 'flex',\n      gap: '1rem',\n      flexWrap: 'wrap',\n      justifyContent: 'center'\n    }\n  }, mdx(\"a\", {\n    href: invokerPDF,\n    download: \"Invoker Cheatsheet.pdf\",\n    className: \"download-button\"\n  }, \"Download as PDF\"), mdx(\"a\", {\n    href: invokerPNG,\n    download: \"Invoker Cheatsheet.png\",\n    className: \"download-button\"\n  }, \"Download as PNG\")), mdx(\"h2\", {\n    \"id\": \"want-them-printed-and-shipped-to-you\"\n  }, `Want them printed and shipped to you?`), mdx(\"p\", null, `We're planning on making them available as printed A5 cards in the future, so if you'd like to be notified when that happens, please `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/newsletter\"\n  }), `sign up for our newsletter`), ` and we'll let you know when they're available.`), mdx(\"p\", null, `Or catch us at a conference and we'll be happy to give you a set of printed cards for free!`), mdx(\"h2\", {\n    \"id\": \"got-suggestions\"\n  }, `Got suggestions?`), mdx(\"p\", null, `If you have any suggestions for other cheatsheets you'd like to see, or if you have any feedback on the ones we made, please `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/support\"\n  }), `let us know`), `!`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"tableOfContents":{"items":[{"url":"#css-day-swag","title":"CSS Day swag"},{"url":"#the-cheatsheets","title":"The cheatsheets","items":[{"url":"#flexbox-cheatsheet","title":"Flexbox Cheatsheet"},{"url":"#grid-cheatsheet","title":"Grid Cheatsheet"},{"url":"#anchor-cheatsheet","title":"Anchor Cheatsheet"},{"url":"#invoker-cheatsheet","title":"Invoker Cheatsheet"}]},{"url":"#want-them-printed-and-shipped-to-you","title":"Want them printed and shipped to you?"},{"url":"#got-suggestions","title":"Got suggestions?"}]},"excerpt":"For CSS Day this year we created a set of cheatsheets explaining Flexbox, Grid, Anchor positioning and Invoker commands. They came out beautifully and a lot of…","frontmatter":{"title":"Cheatsheets for flex, grid, anchor positioning and invoker commands","cover":"/blogs/cheatsheets/cards.png","date":"2026-07-27","updated":null},"fields":{"slug":"/blog/cheatsheets-for-flex-grid-anchor-positioning-and-invoker-commands/","date":"2026-07-26T22:00:00.000Z","ogFileName":"cheatsheets-for-flex-grid-anchor-positioning-and-invoker-commands"}}},"pageContext":{"slug":"/blog/cheatsheets-for-flex-grid-anchor-positioning-and-invoker-commands/"}},"staticQueryHashes":["4164364741","425175329"]}