Penpot Tutorials

Introduction to Flex and CSS Grid layouts | Penpot Hands-On Demo


Listen Later

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.

    ...more
    View all episodesView all episodes
    Download on the App Store

    Penpot TutorialsBy