This Penpot Hands-on Demo will introduce you to “Flex and Grid Layouts.” We’ll go over the basics, examine their differences, and explain how they translate into code. Don’t miss it—join us to learn, ask questions, and get the most out of Penpot!

Managing comments across different channels simultaneously is a bit challenging, so feel free to drop your questions in our Community space and we'll answer them as soon as we can: https://community.penpot.app/t/introduction-to-grid-flex-layout-hands-on-demo/6588

Check out these useful links to help you make the most out of Flex and Grid Layout with Penpot:

• Tutorial: Creating responsive CSS Grid Layouts in Penpot: https://penpot.app/blog/tutorial-how-to-create-responsive-css-grid-layouts-in-penpot/
• Tutorial: How to create CSS Flex Layouts in Penpot: https://penpot.app/blog/tutorial-css-flex-layouts-in-penpot/
• Article: 5 reasons why CSS Grid Layout is key for designers: https://penpot.app/blog/5-reasons-why-css-grid-layout-is-key-for-designers/
• Visit our Learning Center guides: https://penpot.app/learning-center#flexible_layouts
• Download libraries and templates at: https://penpot.app/libraries-templates

Penpot is the first open-source design and prototyping tool for Product teams.

Penpot allows a true collaboration between designers and developers thanks to features like Flex Layout and Code Inspect. It’s the only one that can be web based or self-hosted. The tool works with open web standards (SVG) avoiding vendor lock-in and giving teams absolute freedom in their designs.

You can use it for your mockups, webs, apps and any other type of UX & UI Design

Penpot Community: https://community.penpot.app App: https://design.penpot.app​​ Help: https://help.penpot.app​ Learning Center: https://penpot.app/learning-center Contribute: https://github.com/penpot Penpot Fest: https://penpotfest.org

Follow us: *Mastodon: https://fosstodon.org/@penpot/​ *X: / penpotapp ​​ *LinkedIn: / penpotdesign
*Instagram: / penpot.app
*Github: https://github.com/penpot

Penpot: Design as code.