# UI design with Flex and Grid | Hands-On Demo, 28th October **URL:** \ **Category:** Events and Announcements\ **Tags:** live-streams, video, hands-on\ **Created:** [October 8, 2026, 9:15am UTC](https://community.penpot.app/t/ui-design-with-flex-and-grid-hands-on-demo-28th-october/10947 "2026-10-08T09:15:53Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [October 8, 2026, 9:15am UTC](https://community.penpot.app/t/ui-design-with-flex-and-grid-hands-on-demo-28th-october/10947/1 "2026-10-08T09:15:54Z")
Finally, it’s time for another live session! Let’s get hands-on with layouts. 🗓 Save the date: **Wednesday 28th October**. [![](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/e/ee80d56ec9d0ae123d02bdf59af1bcf6de0f17ae.jpeg "UI design with Flex and Grid | Penpot Hands-On Demo") ](https://www.youtube.com/watch?v=PyhKmWu4zO4) In this session, I’ll demo Flex and Grid, and walk through how we can combine these layouts for flexible, responsive UI design that works for both designers and developers. We’ll explore the benefits of the declarative design approach, and I’ll explain what declarative design actually means! ## Details **Date:** Wednesday, October 28th **Time:** PM 15-16 UTC. (Convert to your local timezone with [ZoneStamp](https://zonestamp.toolforge.org/1793199600)) **Stream on:** [PeerTube](https://peertube.kaleidos.net/w/t5q7oGpkU4oVdhpHFGBQX4), [YouTube](https://youtube.com/live/PyhKmWu4zO4?feature=share) or [LinkedIn](https://www.linkedin.com/events/7513694277273776129/) ## We’re going to cover… - Using Flex and Grid layouts for real UI design work in Penpot - Combining Flex and Grid for complex and responsive layout structures - Comparing declarative design to other design approaches - Using design tokens with layouts - Catching up on some of the newest features in Penpot you might have missed This will be a live session, so I (and the Penpot team) can **answer your questions in real time**. Be sure to join us live! If you can’t make it live or already have a question in mind, please let me know in the replies below. Have you watched our previous hands-on sessions? Find them all in our [complete Hands-on demo playlist](https://www.youtube.com/playlist?list=PLgcCPfOv5v56_iRm-lwkdNtgXEP2M-vUA)! ---
**Author:** ![LendingAndrewm](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@LendingAndrewm](https://community.penpot.app/u/LendingAndrewm)\ **Post date:** [October 12, 2026, 9:23am UTC](https://community.penpot.app/t/ui-design-with-flex-and-grid-hands-on-demo-28th-october/10947/2 "2026-10-12T09:23:11Z")
Unfortunately I won’t be able to make it on the 28th, but one question I’ve got is around real-world strategies for how to create efficient reusable tables in my PenPot designs. TL;DR: Need help creating multiple CSS Grid table instances in a project that I can edit/update at source without slowing my browser to a crawl. # The challenge Our business is B2B and tends to deal with displaying a lot of data in various forms. The challenge I tend to face quite often is including instances of an example table of data, say with 6 columns and 10 rows in high fidelity visuals for a new feature across multiple pages (boards) for presentation. This could be across layers or just on one. From my perspective, my main goal is to try to retain the ability to alter the parent table component if those in charge decide they want a column or row removed/added so it’s updated across the pages it’s used on (a task that’s obviously technically trivial with PenPot’s Edit Grid feature, however increasingly difficult when more instances are used, with browser slowdown and instance glitching being an ever-present issue). # How I tackle it (at the moment) Workflow wise, I tend to use a table container with one header row, one body row (which is sometimes linked to a ‘body row’ parent component so I don’t have to redefine all the column widths of detached instances if things change down the line) and a footer (screenshot below). ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/5/53c647064c68b0d72fe283cab43409e3fa6a949c.png) The header and the body rows have the same CSS grid definition. I then dupe the body rows for what I need, input the example content and use instances of this table parent component in the layouts of the pages (could be anywhere from 3 - 10 pages per layer on average). I’m aware this causes a lot of nested linking but I’m not sure how to do it any other way while keeping it editable without having to revisit each detached instance, or to edit the first then come through deleting and copy/pasting the updated version. # Alternate strategies? The only workaround I’ve devised on larger projects where I know this will be an issue is to create the original table, export it as an image, import that image back in, use it in a board as a parent component and then farm instances of it out to use in the layouts - replacing the image when an update comes through…but it’s a trade-off of more time and lower-fidelity images next to crisp vectors for the sake of keeping ‘one source of truth’ for the table. Any advice would be appreciated. Happy to answer any questions on it and/or alter my workflow to suit if there’s a better way. Thanks! ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [October 28, 2026, 1:47pm UTC](https://community.penpot.app/t/ui-design-with-flex-and-grid-hands-on-demo-28th-october/10947/3 "2026-10-28T13:47:12Z")
Hello friends! If you want to follow along during the hands-on demo today, download the following file and upload it into your Penpot! [Hands-on 18 demo file.penpot](https://community.penpot.app/uploads/short-url/eZfQhrr0GemeCD4l4rOJRvXPChd.penpot) (1.4 MB) ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [October 29, 2026, 11:17am UTC](https://community.penpot.app/t/ui-design-with-flex-and-grid-hands-on-demo-28th-october/10947/4 "2026-10-29T11:17:41Z")
This sounds like you’ve worked out a sensible workaround, but it’s not great that you need to do this for performance reasons! Is this an issue you experience with WebGL enabled? I’d love to know if that makes a difference, and if not, whether you could share an example file with the team so they can improve the performance for files like this? ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [October 30, 2026, 3:55pm UTC](https://community.penpot.app/t/ui-design-with-flex-and-grid-hands-on-demo-28th-october/10947/5 "2026-10-30T15:55:10Z")
Today I had an excuse to continue on to make the design more responsive, using just flex layouts. [Hands-on 18 demo file - flex goodness.penpot](https://community.penpot.app/uploads/short-url/jjQZH41U7LS5KBOpY1OSbV59Qa4.penpot) (1.2 MB)