Flex and Grid Layouts in Penpot in Under 5 Minutes  🔗 **Source:** [Flex and Grid Layouts in Penpot in Under 5 Minutes](https://www.youtube.com/watch?v=qIVSF61x-uQ) > [!note]+ Document Notes > tags: [penpot, flex-layout, grid-layout, design-tokens, responsive-design] > author: Penpot > source: Penpot (YouTube) > reference: https://www.youtube.com/watch?v=qIVSF61x-uQ > date created: 2026-10-07 09:20 > > > [!info] Generated analysis — not the author's words. Sections below are machine-written > > from the captured source. Only text inside `> [!quote]` blocks is verbatim from the author. > > Do not quote or attribute any other line to the named author. > > # 🏷️ Title: Flex and Grid layouts in Penpot in under 5 minutes > <!-- deep-read:sections start --> ## 🧭 Table of contents - [📝 Summary](#-summary) - [📖 Main content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning styles assessment](#-learning-styles-assessment) - [📊 Accessibility assessment](#-accessibility-assessment) - [🌍 DEIB assessment](#-deib-assessment) - [✅ Logical validity](#-logical-validity) - [🛡️ DARVO analysis](#️-darvo-analysis) - [🎯 Conclusion](#-conclusion) - [🔄 Refactor appendix](#-refactor-appendix--flex-and-grid-layouts-in-penpot-in-under-5-minutes) ## 📝 Summary - **What happened.** Penpot's official channel posted a 4:31 tour of its Flex and Grid layouts on 2026-10-07. The transcript is 684 words in 7 paragraphs (00:00:00 to 00:04:20), and the description lists 7 chapters. - **The claim.** Penpot offers two auto-layout types for dynamic, responsive design, and both carry "the same properties as code." The speaker's argument is that designers can make layout decisions without losing them between design and code, and that any team member can read the matching CSS in the Inspect panel. - **What the tour covers.** How to create a layout (from a board or from existing elements), what flex layouts do (direction, wrap), what grid layouts do (columns, rows, units, spanning cells, named areas), shared layout properties (sizing, alignment, justification, gaps, padding), per-element properties (fill, min and max, fixed size, nesting, margins), and a closing note on design tokens. - **Design tokens.** The last chapter (00:03:53) says layouts "become even more valuable" with design tokens: one variable can update gaps, padding, and margins, and token themes can cover different breakpoint sizes inside one board. The tour names no token types, steps, or syntax, and points viewers to longer hands-on videos. - **Why it matters.** Penpot is an open-source design tool, and the tour positions flex and grid as the layout model for developers and designers who work from the same CSS vocabulary. - **Key stakeholders.** Penpot (publisher and product owner), UI designers, front-end developers who read the Inspect panel, design-system teams that use tokens, and contributors who follow the project on GitHub. - **Risks and tradeoffs.** The tour is 4:31 long, so it lists properties without edge cases, limits, or version numbers. "Same properties as code" is the vendor's claim and no CSS feature comparison appears in the audio. - **Commercial interest.** This is first-party marketing and education from the maker of the product it demonstrates. Every capability claim here is the vendor's, and this analysis did not test any of it. - **Bottom line.** A compact map of Penpot's layout vocabulary. Use it to learn the terms, then check the Help Center and your own files before you rely on a behavior. ## 📖 Main content **The core argument.** The speaker frames flex and grid as one system with two modes. Both mirror CSS properties, so decisions made on the canvas are the same decisions a developer reads in the Inspect panel (00:00:00, 00:01:26). Flex suits layouts that adapt to unpredictable sizes or numbers of elements (00:00:43). Grid suits layouts that need rows and columns at once (00:00:43 into 00:01:26). A third layer sets behavior per element inside a layout (00:02:52), and a fourth layer links layout values to design tokens (00:03:36). **Procedure as the speaker states it.** The tour is not a click-by-click walkthrough and names no menu items or shortcuts, so the steps below follow the order of the narration. 1. Choose a layout type: flex or grid. 2. Create it in one of two ways: from a board, then add elements into the layout, or from existing elements, by selecting a group or multiple elements and adding a new flex or grid layout (00:00:00). 3. For a flex layout, set the flow: a row (left to right or right to left) or a column (top to bottom or bottom to top) (00:00:43). 4. For a flex layout, set wrap behavior: let elements overflow the container, or wrap them into a new row or column when they exceed its width or height (00:00:43). 5. For a grid layout, set the number of columns and rows, their widths and heights, and the unit for each: pixels, percentages, fractions, or auto, mixed or uniform (00:01:26). 6. For a more advanced grid, span grid cells across multiple columns and rows, and label cells as named grid areas (00:01:26). 7. Set shared layout properties on either type: fixed size or fit-to-content, alignment inside the row and column, justification in the other direction (start, end, space between, space around, space evenly, and stretch for grid), gaps, and padding (00:02:10, 00:02:52). 8. Select an individual element inside the layout and set its own behavior: fill the available space (with minimum and maximum widths), fixed width or height, fit to its own contents if it holds a nested layout, independent alignment, and margins (00:02:52, 00:03:36). 9. Open the Inspect panel to read the CSS for named grid areas and every other layout property (00:02:10). 10. Optionally bind gaps, padding, and margins to design tokens, and use token themes for different breakpoint sizes inside one board (00:03:36). **Terms as the speaker uses them.** - **Flex layout.** The container flexes and its elements flow along a row or column. The speaker calls it the most flexible of the two (the caption reads "the most well, [music] flexible"). - **Flex wrap.** The option, for elements that exceed the layout's height or width, to start a new row or column instead of overflowing. The speaker names it "one of the most powerful features of flex layouts" (00:00:43). - **Grid layout.** Structure from columns and rows at the same time, with sizes in pixels, percentages, fractions, or auto. - **Named grid area.** A labeled set of grid cells that can span columns and rows. - **Justify.** Distributing elements in the direction opposite to alignment, including by leftover space (space between, around, evenly). - **Fit or hug.** Auto sizing that fits the layout to its elements. The speaker uses "fit" for layouts and elements, and "hug" for grid elements under the auto unit. - **Nested layout.** A flex or grid layout placed inside another layout's element. - **Design token.** A variable that drives layout properties. The tour doesn't define it further. **What the tour leaves unsaid.** It doesn't say which release ships these features, how wrap interacts with fixed sizes, how grids behave below the smallest breakpoint, or how tokens are created and applied. The description links a blog tutorial on responsive CSS Grid layouts and the Help Center page on flexible layouts for those details. **Contested or unverified in this source.** - "The same properties as code" has no side-by-side with CSS in the audio. - "Without worrying about any of your design decisions getting lost in translation" is an outcome claim with no workflow evidence from a design-to-code handoff. - The claim that token themes can cover breakpoints "all inside one board" gets a single sentence and no demonstration the transcript can confirm. ## 🗒️ Notes #### ⏱️ [00:00:00](https://www.youtube.com/watch?v=qIVSF61x-uQ&t=0) Intro - Opens with the two options for dynamic, responsive auto layouts: flex and grid. - Claims both have "the same properties as code" so design decisions don't get lost in translation. - The captions carry [music] cues inside sentences. The speech stays intelligible and "Penpot" is spelled correctly. #### ⏱️ [00:00:20](https://www.youtube.com/watch?v=qIVSF61x-uQ&t=20) How to create a Flex or Grid layout - Two entry points: build the layout from a board and add elements, or select a group or multiple existing elements and add a new flex or grid layout around them. - The paragraph timestamp is 00:00:00. The chapter begins about 20 seconds in, inside the same caption paragraph. #### ⏱️ [00:00:34](https://www.youtube.com/watch?v=qIVSF61x-uQ&t=34) What are Flex layouts? - You design how the container flexes and how its elements flow: row (left to right or right to left) or column (top to bottom or bottom to top). - Flex wrap lets elements that exceed the layout's height or width overflow, or wrap into a new row or column. - The speaker names two uses: components that adapt to a new layout context, and layouts that adapt to unpredictable sizes or numbers of elements. - The chapter spans the second caption paragraph (00:00:43) and the start of the grid explanation. > [!quote] [00:00:43] > One of the most powerful features of flex layouts is flex wrap. #### ⏱️ [00:01:24](https://www.youtube.com/watch?v=qIVSF61x-uQ&t=84) What are Grid layouts? - Grids create structure with columns and rows at the same time, with set counts, widths, heights, and units. - Units: pixels, percentages, fractions, or auto, used uniformly or mixed. Auto fits or hugs the grid elements. - Advanced grids let cells span multiple columns and rows and carry labels as named grid areas. - The speaker closes the chapter with "Every design decision you make is as code" and sends non-designers to the Inspect panel for the CSS. > [!quote] [00:01:26] > Every design decision you make is as code. #### ⏱️ [00:02:18](https://www.youtube.com/watch?v=qIVSF61x-uQ&t=138) Layout properties - Flex and grid share properties: fixed height and width, or fit to contents, mixed as needed. - Alignment works inside the row and column, and justification works in the other direction. - Justify values: start, end, and by leftover space (space between, space around, space evenly). Grid elements also have stretch. - Gaps set a specific space between elements. Padding sets spacing around the elements inside the layout. #### ⏱️ [00:03:06](https://www.youtube.com/watch?v=qIVSF61x-uQ&t=186) Flex and Grid element properties - Inside a layout, an element gains flex or grid element properties that govern that one element. - Options: fill the available space (with minimum and maximum widths), fixed width or height, fit to its own contents when it holds a layout, independent alignment, and margins. - Layouts can nest inside layouts. #### ⏱️ [00:03:53](https://www.youtube.com/watch?v=qIVSF61x-uQ&t=233) Layouts and design tokens - Layouts combine with design tokens so one variable can update gaps, padding, and margins. - Token themes can design for different breakpoint sizes inside one board. - Close: subscribe, see the hands-on videos for longer walkthroughs, and tell the channel in the comments what else to cover (final paragraph at 00:04:20). > [!quote] [00:03:36] > You can even use token themes to design for different [music] breakpoint sizes all inside one board. ## 📚 References The transcript itself contains no links; the following come from the video description or are primary sources for named entities. - [Tutorial: How to create responsive CSS Grid layouts in Penpot](https://penpot.app/blog/tutorial-how-to-create-responsive-css-grid-layouts-in-penpot/): the description's pointer for a deeper grid walkthrough. - [Penpot Help Center: flexible layouts](https://help.penpot.app/user-guide/designing/flexible-layouts/): official documentation; check here for exact behavior and limits. - [Penpot app](https://design.penpot.app): the design tool. - [Penpot community](https://community.penpot.app): forum for questions and feature discussion. - [Penpot help](https://help.penpot.app): the wider documentation site. - [Penpot on GitHub](https://github.com/penpot): source, issues, and releases. - [Penpot Fest](https://penpotfest.org): the project's community event, listed in the description. - The description also lists Mastodon, Bluesky, X, LinkedIn, and Instagram profiles. They don't bear on the layout content. ## 🗣️ Paraphrase Penpot gives you two kinds of auto layout, flex and grid, and both use the same properties as CSS. You can start a layout from a board and drop elements in, or select existing elements and wrap them in a new layout. Flex layouts are the more flexible kind. You pick whether elements flow in a row or a column and in which direction. Flex wrap decides what happens when elements outgrow the container: they overflow, or they wrap onto a new row or column. The speaker recommends flex for components that must adapt to a new context and for layouts whose number or size of elements isn't known in advance. Grid layouts handle rows and columns together. You set how many of each, how big they are, and which unit each uses: pixels, percentages, fractions, or auto. Cells can span several columns and rows and take names as grid areas. Everything you set shows up as CSS in the Inspect panel, so a developer can read the same decisions. Both types share sizing, alignment, justification, gaps, and padding. Each element inside a layout also gets its own controls: fill the space with minimum and maximum widths, fix a size, fit its own contents, align independently, and set margins. Layouts nest. The tour ends by saying that design tokens can drive gaps, padding, and margins from one variable, and that token themes can cover different breakpoints in a single board. ## 📰 Newsletter **Penpot's layout tour, in 4 minutes.** Penpot, the open-source design tool, published a 4:31 overview of its Flex and Grid layouts. Flex handles one direction at a time and wraps when elements outgrow the container. Grid handles rows and columns together, with pixel, percent, fraction, and auto units, spanning cells, and named areas. The Inspect panel shows each property as CSS. Per the vendor, these are the same properties as code, which would make handoff to a front-end developer a matter of reading the panel. The last 40 seconds cover design tokens: one variable can update gaps, padding, and margins, and token themes can serve breakpoints inside one board. The tour gives no steps for that part, so use the Help Center for the how. Links: [Flexible layouts help](https://help.penpot.app/user-guide/designing/flexible-layouts/), [CSS Grid tutorial](https://penpot.app/blog/tutorial-how-to-create-responsive-css-grid-layouts-in-penpot/), [the video](https://www.youtube.com/watch?v=qIVSF61x-uQ). ## ✅ Action items #### DevRel - Developer advocacy: build one landing-page layout in Penpot with flex and grid, then export the CSS from the Inspect panel and compare it with a hand-written stylesheet. - Education: use the flex versus grid split (one direction versus rows and columns) as a teaching unit in a design-to-code workshop. - Developer experience: document a handoff checklist that tells developers where to find layout CSS in the Inspect panel. - Developer marketing: when you cite "same properties as code," cite the Help Center page and note it's the vendor's claim. - Community management: collect reports of flex or grid properties that don't map cleanly to CSS in one forum thread. - Internal/external/cross-project: ask the Penpot community which release introduced token themes for breakpoints. #### OSPO - Policy and governance: no direct action from this source; nearest relevance: if Penpot becomes a team design tool, record its license and governance in the tool inventory. - License compliance: no direct action from this source. - Security management: no direct action from this source. - Software inventory: list Penpot (hosted or self-hosted) with an owner and version if teams adopt it. - Developer support: no direct action from this source; nearest relevance: share a layout how-to alongside the CSS-in-Inspect workflow. - Community engagement: track Penpot's release notes for layout and token changes that affect your design stack. - Strategic alignment: no direct action from this source. #### Community - Maintainers: no direct action from this source. - Contributors: no direct action from this source; nearest relevance: design contributions to a project could ship as Penpot files that carry their own layouts. - Sponsors: no direct action from this source. - Ecosystem: no direct action from this source. #### WordPress - Core: no action. This is a design-tool tour, not core code. - Core Performance: no action from this source. - Core AI: no action from this source. - **Core Program Team:** no action from this source. - Mobile: no direct action; nearest relevance: token themes per breakpoint map to mobile layout variants if the claim holds. - Playground: no action from this source. - Community: no action from this source. - Training: add a short lesson that maps flex and grid to the CSS flexbox and grid ideas block-theme authors already use. - Marketing: no action from this source. - Support: no action from this source. - Design: evaluate Penpot for block-theme mockups; rebuild one existing pattern layout with flex and grid and note where the CSS diverges from the theme's real styles. - Documentation: no direct action; nearest relevance: layout vocabulary (gap, padding, justify) lines up with block layout settings in the editor. - Photos: no action from this source. - TV: no action from this source. - Polyglots: no action from this source. - Accessibility: no direct action; nearest relevance: wrapping and reflow in flex layouts affect reading order and WCAG 1.4.10 reflow, so check order after wrap. - Meta: no action from this source. - CLI: no action from this source. - Hosting: no action from this source. - Tide: no action from this source. - Openverse: no action from this source. - Themes: use the tokens-to-layout idea as a comparison point for theme.json spacing presets. - Plugins: no direct action from this source; nearest relevance: plugin admin UI mockups could use flex layouts to test wrapping. #### The WPOCC - Programs: no direct action from this source. - Projects: no direct action from this source; nearest relevance: a design-tooling sprint could standardize on open-source tools. - Funding experiments: no direct action from this source. ### FAIR - Technical independence: Penpot is open source (the description's Contribute link points to GitHub), which fits a vendor-independent design workflow. Verify license and self-hosting in Penpot's docs. - Policies and covenants: no direct action from this source. - Productized governance artifacts: no direct action from this source. ## 🧪 Hypotheses 1. A flex layout with wrap enabled reflows 12 equal cards to fewer columns as the container narrows, with no manual rearranging. 2. The CSS the Inspect panel shows for a grid with fractions, pixels, and auto columns matches hand-written `grid-template-columns` output for the same design. 3. Named grid areas appear in the Inspect panel as `grid-template-areas` that a developer can paste into a stylesheet with no edits. 4. One token that drives a layout gap updates every layout that references it in a single change. 5. Token themes give a single board two different breakpoint layouts, and switching themes changes the layout properties without rebuilding the board. 6. Nesting a flex layout inside a grid cell keeps the child element's alignment settings independent of the parent's. ## 📊 Methodology - **H1.** Build a 12-card flex row with wrap, resize the board to three widths, and count rows at each width. - **H2 and H3.** Build one grid with mixed units and 3 named areas. Copy the Inspect CSS, render it in a plain HTML page, and diff the output against the canvas in Chrome and Firefox. - **H4.** Bind the gap of 3 layouts to one token, change the token value, and record which layouts update. - **H5.** Create two token themes with different gap and padding values, apply each to the same board, and screenshot both. - **H6.** Nest a flex layout inside a grid cell, vary the child's alignment and margins, and check that the parent grid doesn't change. - **Controls.** Use the same Penpot version and file for every test, and record the version so results map to a release. ## ❓ Questions - Which release added each feature shown (flex wrap, named grid areas, token themes), and does any need a feature flag? - How close is "the same properties as code" for justify values and `fit` or `hug` sizing, and where does it diverge from CSS? - What do the Inspect panel's CSS exports look like for nested layouts? - Which token types can drive layout properties, and can a token set values for gap, padding, and margin together? - How do token themes handle breakpoints: by board width, or by manual theme choice? - Does wrap behave the same for flex layouts that mix fixed and fill elements? - How does grid handle content that exceeds a fixed cell size? - What does the Help Center say about reading order when elements wrap? ## 🔮 Future research - **CSS fidelity.** A property-by-property comparison of Penpot's layout controls and the CSS they export would test the central claim. This source asserts the match and shows none. - **Handoff outcomes.** Teams that use the Inspect panel as the handoff could report how often developers rewrite exported CSS. Nobody in this source measures it. - **Token themes and breakpoints.** The closing claim needs a worked example with real breakpoints, including how themes and layouts interact. - **Accessibility of exported layouts.** Wrapping and reordering can change reading order. A check of exported output for WCAG 1.3.2 (Meaningful Sequence) is untested here. - **Parity tracking.** A public comparison of Penpot's layout and token features with other design tools would show which gaps remain. ## 💡 Implications - **Practice.** Learn flex for one-direction flows and wrap, and grid for two-dimensional structure. The tour's split matches how CSS authors choose between the two. - **Policy.** If a team adopts Penpot, set a rule for which layout values come from tokens, so spacing changes happen in one place. - **Security.** No direct security content. Exported CSS is plain text, but review it as you'd review any pasted code before it ships. - **Education.** The tour is a compact vocabulary list for design students: gap, padding, margin, justify, align, span, named area. - **Funding.** Layout and token features are where open-source design tools compete with commercial ones, and community funding can target that work. ## 🧠 Learning styles assessment - **Reading level estimate.** Flesch-Kincaid Grade Level on the transcript is about grade 10 (sentences of 20 to 35 words, with domain terms like justify, hug, and breakpoint). Flesch Reading Ease is about 50. The audience needs basic familiarity with CSS or auto layout. #### 👀 Visual learners - Present: the tour presumably demonstrates layouts on screen; the audio can't confirm what is shown. - Improve: overlay property names as on-screen labels when each one is introduced, and show the Inspect CSS beside the canvas. #### 🔊 Aural learners - Present: steady narration in a consistent order, with chapters that mirror the audio. - Improve: [music] cues sit inside sentences in the captions at 00:00:00, 00:00:43, 00:01:26, and later. Duck the music under speech. #### 🗣️ Verbal learners - Present: the narration names each property and its options (row, column, wrap, pixels, fractions, auto). - Improve: add a glossary line in the description for justify, hug, and named grid area. #### 🧩 Kinesthetic learners - Present: none beyond naming the two creation paths; no click path is spoken. - Improve: link a practice file, with a short task such as "wrap 12 cards into a flex layout and change the gap." #### 🧠 Logical learners - Present: a clear split of flex (one axis, wrap) from grid (two axes, spans, areas), then shared and per-element properties. - Improve: state the rule for choosing between flex and grid in one sentence and show one counterexample. #### 🧑‍🤝‍🧑 Social learners - Present: the closing asks viewers to comment on what to cover next, and the description links the forum. - Improve: pose a discussion prompt, such as "which layout in your product is flex and which is grid?" #### 🧘‍♀️ Solitary learners - Present: 4:31 with 7 chapters, so a viewer can jump to one topic and rewatch. - Improve: add a self-check, such as "rebuild a nav bar with flex and read its CSS." #### 🌿 Naturalistic learners - Present: nothing explicit. - Improve: no strong natural-world tie exists for this topic. Analogies to shelves (flex) and tables (grid) would help any learner and cost nothing. ## 📊 Accessibility assessment #### Screen reader semantics - Present: YouTube supplies player landmarks, chapters, and a machine-readable auto-transcript. - Improve: on-screen demonstrations aren't described in the audio. WCAG 2.2 AA 1.2.5 (Audio Description, Prerecorded) and 1.1.1 (Non-text Content) aren't met for visual-only steps. #### Keyboard navigation - Present: the YouTube player is keyboard operable with visible focus, and chapters allow jump navigation. - Improve: the tour doesn't say whether layout controls in Penpot work by keyboard. The tour adds no barrier itself (2.1.1 and 2.4.7 pass through the platform). #### Contrast and readability - Present: unverifiable from a transcript. - Improve: if the Penpot UI is shown at small scale, zoom into panels when a property is named. 1.4.11 (Non-text Contrast) is the nearest criterion for thin UI borders. #### Text resizing and reflow - Present: the player scales and captions resize independently. - Improve: any burned-in text can't resize, so 1.4.4 (Resize Text) and 1.4.10 (Reflow) fail for text baked into frames. #### Media and captions - Present: auto-captions exist, the speech is accurate in this transcript, and the video has 7 chapters. - Improve: caption the [music] cues as sound information and publish human-reviewed captions. 1.2.2 (Captions, Prerecorded) is met in substance but not verified as human-reviewed. #### Forms and interactions - Present: no forms in the video. - Improve: the UI shown has its own questions, such as keyboard access to layout controls and target sizes (2.5.8). The tour doesn't address them. #### Standards reference - Gaps against WCAG 2.2 AA: **1.2.5** (no audio description for on-screen steps), **1.1.1** (visual-only demonstration), **1.4.4 and 1.4.10** (burned-in text, if any). Highest impact: describing the UI steps in audio, which also helps every viewer. ## 🌍 DEIB assessment #### Cultural breadth - Present: the description links an international community forum and the Penpot Fest event. - Improve: add translated captions. The tour uses English only, and terms like "hug" and "justify" need localization. #### Inclusive language - Present: plain, direct language with no exclusionary terms. - Improve: define idioms and domain words for newcomers, including "hug the grid elements" and "lost in translation." #### Neurodiversity support - Present: 7 chapters and a predictable order (create, flex, grid, shared properties, element properties, tokens). - Improve: add a one-slide recap per chapter and slow the narration where several options are listed in a row, as with justify values at 00:02:10. #### Representation - Present: one unnamed narrator and a tool-focused tour. - Improve: show designers and developers of different backgrounds using layouts in real projects. #### Psychological safety - Present: a neutral, welcoming tone with an open invitation to say what else to cover. - Improve: say that layouts have a learning curve and point to the longer hands-on videos earlier than 00:04:00. ## ✅ Logical validity #### Strong reasoning - **Structured contrast, 00:00:43 to 00:01:26.** Flex is for one axis and unpredictable content, grid is for two axes and fixed structure. The split is a sound way to choose between them. - **Shared then specific, 00:02:10 to 00:03:36.** Properties common to both come first, then per-element overrides. The order lets a viewer learn each idea once. - **Handoff inference, 00:01:26 to 00:02:10.** If the Inspect panel shows layout CSS, then non-designers can read decisions without asking. The inference holds only if the CSS matches the design, which the tour asserts and doesn't show. #### Fallacies - **Unsupported universal, 00:00:00.** "design as code without worrying about any of your design decisions getting lost in translation" claims a complete handoff. Fix: list the properties that map one-to-one and the ones that don't. - **Hasty generalization, 00:03:36.** "even use token themes to design for different [music] breakpoint sizes all inside one board" is stated without a demonstration the transcript captures. Fix: show one board in two themes. - **Undisclosed interest (low severity).** The publisher is the product's vendor and the tour is promotional. This isn't a reasoning error, but the framing is one-sided. Fix: note known limits and link the Help Center for them. #### Tone of voice - Product-education register: upbeat, declarative, and organized, with second-person address ("you design how the container should flex"). It includes no caveats and no comparison with other tools. ## 🛡️ DARVO analysis Not applicable to this source. DARVO describes a response to accusation or criticism, and this is a product tutorial with no accuser and no defensive posture. For completeness: **Deny**: nothing is denied. **Attack**: no critics or competitors are named. **Reverse victim/offender**: no such move appears. ## 🎯 Conclusion Penpot's tour presents flex and grid as two modes of one layout system that mirrors CSS, with an Inspect panel that shows the matching code, per-element controls, and design tokens that can drive spacing and breakpoint themes. As a vocabulary map it works: 7 chapters cover creation, direction and wrap, columns and rows, shared properties, element properties, and tokens. As evidence it's thin, because it's first-party, 4:31 long, and untested against CSS or against a real design-to-code handoff. **Next steps for readers:** read the Help Center page on flexible layouts, rebuild one layout of your own with flex and one with grid, and compare the Inspect CSS with what you'd write by hand. For the token claims, find a hands-on video or the docs before you plan a workflow around them. ## 🔄 Refactor Appendix — Flex and Grid layouts in Penpot in under 5 minutes > Density: 4:31 source. Emitted: 4 Literature atoms, 1 Permanent candidate. Resonance > filter applied: the music cues, subscribe call, and social links were dropped as non-claims. > > Konik claim-header rules: present tense, declarative, ≤10 words, searchable, unique. > > Atomicity: one declarative sentence per atom. "and"/"also" → split. > > Tag pool: #bmf · #addendum · #xref · #articleseed · #storystem · #share · #aphorisms ### 📚 Literature Split Pad #### [H1] Penpot layouts claim the same properties as CSS > [!quote] [00:00:00] > Flex and grid layouts have the same properties as code, [music] so you can design as code **Context & use**: - 00:00:00, the core claim of the tour, stated at the start and repeated at 00:01:26. - This is the vendor's claim about its own product. The tour doesn't compare property lists. **Tags**: #xref #share <!-- atomicity: 1 idea ✓ --> #### [H2] Flex wrap handles unpredictable content > [!quote] [00:00:43] > One of the most powerful features of flex layouts is flex wrap. **Context & use**: - 00:00:43, the speaker's pick for the standout flex feature, followed by overflow versus wrap. - Use it as the reason to choose flex for components and for content of unknown size. **Tags**: #xref <!-- atomicity: 1 idea ✓ --> #### [H3] Every layout decision appears as CSS > [!quote] [00:01:26] > Every design decision you make is as code. **Context & use**: - 00:01:26, followed by sending any role to the Inspect panel to read the CSS for named grid areas and other properties. - Pair with H1 for the handoff argument. **Tags**: #xref #share <!-- atomicity: 1 idea ✓ --> #### [H4] Design tokens can drive layout spacing > [!quote] [00:03:36] > Layouts become even more valuable when you combine them with design tokens to update layout properties like gaps, padding, and margins **Context & use**: - 00:03:36, the only design-token content in the tour: one variable updates gaps, padding, and margins, and token themes cover breakpoints in one board. - The tour gives no steps. Use it as a pointer to the Help Center and hands-on videos. **Tags**: #xref #articleseed <!-- atomicity: 1 idea ✓ --> ### 🧠 Atomic Split Pad #### [P1] A layout model shared with CSS reduces handoff loss **Claim** (one sentence, Courtney's voice): When a design tool's layout properties match CSS and show up in an inspect panel, I can treat the layout as a spec a developer reads, not a picture they interpret. **Evidence pointer**: [[#H1]] · [[#H3]] **Scope & conditions**: Rests on a first-party 4:31 tour. The property match isn't demonstrated, and the tour names no limits, so it holds only until I test exported CSS against hand-written CSS. **Links**: - [[Penpot Governance Analysis]] — because applies-in Penpot's pitch as an open-source design tool that targets developer handoff <!-- atomicity: 1 idea ✓ --> ### ✏️ Fleeting Queue - [F1] Check the Help Center for which token types drive layout gap, padding, and margin, and how token themes handle breakpoints — https://help.penpot.app/user-guide/designing/flexible-layouts/ #fleeting #inbox - [F2] Compare Inspect panel CSS for a grid with named areas against hand-written `grid-template-areas` — test on one small layout #fleeting #inbox ### → Things 3 (max 2 actions) - [ ] Rebuild one layout in design.penpot.app with flex and one with grid, then diff the Inspect CSS against hand-written CSS — 30 min #things <!-- deep-read:sections end --> 📄 **Full text:** [[Full Document Contents/Articles/Flex and Grid Layouts in Penpot in Under 5 Minutes.md|Flex and Grid Layouts in Penpot in Under 5 Minutes by Penpot]] ## Highlights - [00:00:00] There's two options for creating dynamic responsive auto layouts in Penpot. Flex and grid. Flex and grid layouts have the same properties as code, [music] so you can design as code without worrying about any of your design decisions getting lost in translation. You can create a flex or grid layout from a board and add elements into the layout, or [music] create a layout from existing elements by selecting a group or multiple elements and adding a new flex or grid layout. Flex layouts are the most well, [music] flexible. You design how the container should flex and the flex elements should flow. [00:00:43] >> [music] >> You can choose between flowing as a row, left to right or right to left, and flowing as a column, top to bottom or bottom to top. >> [music] >> One of the most powerful features of flex layouts is flex wrap. When the flex elements exceed the height or width of their flex layout, you can choose to let them overflow the container or wrap, starting a new row or a new column. This makes flex layouts ideal for components that need to adapt to a new layout context, or any layout that needs to adapt to unpredictable sizes or numbers of elements. Grid layouts are handy if you want to ([View Highlight](https://read.readwise.io/read/01m4b919fdwzshp983mk69cmay)) - Note: [H1] Penpot layouts claim the same properties as CSS - Tags: atom/literature/h1 - [00:01:26] create structure using both columns and rows at the same time. You design the number of columns and rows you want, >> [music] >> their widths and heights, and the units you want to use for each column and row. Use the same units for all your measurements, or mix it up between pixels, percentages, fractions, or auto to fit or hug the grid elements. For more advanced grids, you can set grid cells to span multiple columns and rows. And even label these cells as named grid areas. Every design decision you make is as code. No matter what your role is, you can go to the inspect panel and check [00:02:10] out the CSS for your named grid areas and every other property in your layout. Flex and grid layouts share a lot of properties. They can both have a fixed height and width or have the height and width fit their contents. You can mix and match these properties to suit your layout. You can not only choose to align elements inside their row and column, but also how to justify the content in the other direction, too. >> [music] >> There's start and end, but you can also justify the elements based on the leftover space in the layout with the space between, space around, and space evenly values. Grid elements also have the stretch option. ([View Highlight](https://read.readwise.io/read/01m4b91cgex1w54kzer9zypvwv)) - Note: [H3] Every layout decision appears as CSS - Tags: atom/literature/h3 - [00:02:52] >> [music] >> The gaps are there for when you want a specific gap between your [music] elements. And the padding gives you control over the spacing around the elements inside your layout. When an element is inside a flex or grid layout, it gains special flex element or grid element properties. If you select a flex or grid element, you can choose how that individual element behaves inside the layout. You can choose if it fills the available space in the layout with the option for minimum and maximum widths or if it should have a fixed width or [music] height. If the element has a flex or grid layout itself, you can nest layouts [00:03:36] inside layouts, then you can also choose whether to fit the height and width of the element to its own contents. It can also be aligned independently from the other elements in the [music] layout and have its own margins to have more control over spacing. Layouts become even more valuable when you combine them with design tokens to update layout properties like gaps, padding, and margins [music] from one variable. You can even use token themes to design for different [music] breakpoint sizes all inside one board. Subscribe to learn more about Penpot layouts. Check out the hands-on videos for longer walkthroughs, and please let us know in the comments ([View Highlight](https://read.readwise.io/read/01m4b91f2tw11dybty318y8jp0)) - Note: [H4] Design tokens can drive layout spacing - Tags: atom/literature/h3