# Introduction to CSS Grid & Flex Layout: Hands-on Demo! **URL:** \ **Category:** Events and Announcements\ **Tags:** design\ **Created:** [September 18, 2024, 6:23am UTC](https://community.penpot.app/t/introduction-to-css-grid-flex-layout-hands-on-demo/6588 "2024-09-18T06:23:14Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![Elena\_Alcalde\_Rueda](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/elena_alcalde_rueda/32/115_2.png) [@Elena\_Alcalde\_Rueda](https://community.penpot.app/u/Elena_Alcalde_Rueda)\ **Post date:** [September 18, 2024, 6:23am UTC](https://community.penpot.app/t/introduction-to-css-grid-flex-layout-hands-on-demo/6588/1 "2024-09-18T06:23:14Z")
You are all invited to a new Penpot Hands-on Demo! This time we’ll **introduce you to Flex and CSS Grid Layouts on Wednesday, October 2nd**. @LauraKalbag, Design and Developer educator at Penpot, will go over the basics, examine their differences, and explain how they translate into code. This **new approach to autolayout method holds so much potential** that designers will be excited to study and understand every detail. > **[Introduction to Flex and CSS Grid Layouts | Penpot Hands-On Demo](https://www.youtube.com/live/64O8qi51Jqc)** > > This Penpot Hands-on Demo will introduce you to “Flex and CSS Grid Layouts.” We’ll go over the basics, examine their differences, and explain how they transl... 🗓 Date: Wednesday, October 2nd ⌚ Time: UTC 2-3 PM (Convert to your local timezone using [TimezoneWizard](https://timezonewizard.com/)) Save the date and watch it on [YouTube](https://youtube.com/live/64O8qi51Jqc), [Peertube](https://peertube.kaleidos.net/w/ezGSQMzaxQyvhhU9Tw3hnv) or [LinkedIn](https://www.linkedin.com/events/7237720417728118785/comments/)! If you already have some **questions about Flex and Grid layouts,** feel free to drop them in the comments below or ask them live! To get the most out of Flex and Grid Layout with Penpot, check out these resources: - Creating responsive CSS Grid Layouts in Penpot [[Tutorial](https://penpot.app/blog/tutorial-how-to-create-responsive-css-grid-layouts-in-penpot/)] - How to create CSS Flex Layouts in Penpot [[Tutorial](https://penpot.app/blog/tutorial-css-flex-layouts-in-penpot/)] - 5 reasons why CSS Grid Layout is key for designers [[Article](https://penpot.app/blog/5-reasons-why-css-grid-layout-is-key-for-designers/)] - Learning Center guides [[Guide and templates](https://penpot.app/learning-center#flexible_layouts)] Extra: This live is part of our new series that will help you master Penpot. Enjoy the [whole playlist](https://www.youtube.com/playlist?list=PLgcCPfOv5v56_iRm-lwkdNtgXEP2M-vUA)! 👉 Hit the ‘Notify Me’ bell icon on the YouTube video to stay in the loop and get ready for Oct. 2nd! ---
**Author:** ![aquades](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/aquades/32/6022_2.png) [@aquades](https://community.penpot.app/u/aquades)\ **Post date:** [September 24, 2024, 9:05pm UTC](https://community.penpot.app/t/introduction-to-css-grid-flex-layout-hands-on-demo/6588/2 "2024-09-24T21:05:56Z")
Links to Tutorial are broken ---
**Author:** ![candidexmedia](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/candidexmedia/32/9178_2.png) [@candidexmedia](https://community.penpot.app/u/candidexmedia)\ **Post date:** [September 24, 2024, 10:06pm UTC](https://community.penpot.app/t/introduction-to-css-grid-flex-layout-hands-on-demo/6588/3 "2024-09-24T22:06:28Z")
Thank you for this! Would it be possible to get a link to the Peertube playlist as well? I’m not sure if there will be a parallel live on there as well, but if so, would love a link too! 🙂 ---
**Author:** ![Elena\_Alcalde\_Rueda](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/elena_alcalde_rueda/32/115_2.png) [@Elena\_Alcalde\_Rueda](https://community.penpot.app/u/Elena_Alcalde_Rueda)\ **Post date:** [September 25, 2024, 6:32am UTC](https://community.penpot.app/t/introduction-to-css-grid-flex-layout-hands-on-demo/6588/4 "2024-09-25T06:32:48Z")
Thanks for the call out, @aquades ! They’re all fixed now : )) ---
**Author:** ![Elena\_Alcalde\_Rueda](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/elena_alcalde_rueda/32/115_2.png) [@Elena\_Alcalde\_Rueda](https://community.penpot.app/u/Elena_Alcalde_Rueda)\ **Post date:** [September 25, 2024, 7:14am UTC](https://community.penpot.app/t/introduction-to-css-grid-flex-layout-hands-on-demo/6588/5 "2024-09-25T07:14:35Z")
Thanks for the suggestion, @candidexmedia We’re likely going to add PeerTube as well. 🙌 The reason we initially decided against it was that managing comments across three different channels simultaneously is a bit challenging. But we’ll figure it out! Cheers! ---
**Author:** ![Elena\_Alcalde\_Rueda](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/elena_alcalde_rueda/32/115_2.png) [@Elena\_Alcalde\_Rueda](https://community.penpot.app/u/Elena_Alcalde_Rueda)\ **Post date:** [September 30, 2024, 10:53am UTC](https://community.penpot.app/t/introduction-to-css-grid-flex-layout-hands-on-demo/6588/6 "2024-09-30T10:53:02Z")
Hi! Here’s the link to Peertube: [Penpot Hands-on - Introduction to Flex and Grid layout - Penpot Peertube](https://peertube.kaleidos.net/w/g5F9Se2PK2934EFrLSuJ16) 🙌 ---
**Author:** ![candidexmedia](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/candidexmedia/32/9178_2.png) [@candidexmedia](https://community.penpot.app/u/candidexmedia)\ **Post date:** [September 30, 2024, 6:07pm UTC](https://community.penpot.app/t/introduction-to-css-grid-flex-layout-hands-on-demo/6588/7 "2024-09-30T18:07:39Z")
Thank you, @Elena_Alcalde_Rueda! Will make sure to tune in or catch up. 😊 > The reason we initially decided against it was that managing comments across three different channels simultaneously is a bit challenging. But we’ll figure it out! I’m curious to know what Penpot is using for cross-channel comment management. ---
**Author:** ![Elena\_Alcalde\_Rueda](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/elena_alcalde_rueda/32/115_2.png) [@Elena\_Alcalde\_Rueda](https://community.penpot.app/u/Elena_Alcalde_Rueda)\ **Post date:** [October 1, 2024, 6:00am UTC](https://community.penpot.app/t/introduction-to-css-grid-flex-layout-hands-on-demo/6588/8 "2024-10-01T06:00:42Z")
Hi! For managing live sessions we use Streamyard, with the option to manage comments in real time. For managing almost all social media channels we use Sprout Social. ---
**Author:** ![candidexmedia](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/candidexmedia/32/9178_2.png) [@candidexmedia](https://community.penpot.app/u/candidexmedia)\ **Post date:** [October 1, 2024, 9:53pm UTC](https://community.penpot.app/t/introduction-to-css-grid-flex-layout-hands-on-demo/6588/9 "2024-10-01T21:53:52Z")
Wonderful, thank you! ---
**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 2, 2024, 3:21pm UTC](https://community.penpot.app/t/introduction-to-css-grid-flex-layout-hands-on-demo/6588/10 "2024-10-02T15:21:07Z")
Hey friends, thank you so much for joining me for this hands-on session. We covered a lot! You can download my demo file below: [Hands-on Intro to Flex + Grid Example.penpot](https://community.penpot.app/uploads/short-url/dDzr578t8HF26LWyAg74AdrzYVn.penpot) (5.4 MB) If I didn’t get to your question or you have any more questions, please feel free to ask them here, and I’ll get back to you as soon as possible 🙂 ---
**Author:** ![Elena\_Alcalde\_Rueda](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/elena_alcalde_rueda/32/115_2.png) [@Elena\_Alcalde\_Rueda](https://community.penpot.app/u/Elena_Alcalde_Rueda)\ **Post date:** [October 3, 2024, 5:40am UTC](https://community.penpot.app/t/introduction-to-css-grid-flex-layout-hands-on-demo/6588/11 "2024-10-03T05:40:27Z")
**Question** by Dennis Krijgsman: ​​Is this in pixels or is rem em etc also available? **Answer** : Please, find some details at [this user story](https://tree.taiga.io/project/penpot/us/4419)