Introduction to CSS Grid & Flex Layout: Hands-on Demo!

Events and Announcements
1

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.

:spiral_calendar: Date: Wednesday, October 2nd

:watch: Time: UTC 2-3 PM (Convert to your local timezone using TimezoneWizard)

Save the date and watch it on YouTube, Peertube or LinkedIn!

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]
  • How to create CSS Flex Layouts in Penpot [Tutorial]
  • 5 reasons why CSS Grid Layout is key for designers [Article]
  • Learning Center guides [Guide and templates]

Extra: This live is part of our new series that will help you master Penpot. Enjoy the whole playlist!

:point_right: Hit the ‘Notify Me’ bell icon on the YouTube video to stay in the loop and get ready for Oct. 2nd!

6 Likes
2

Links to Tutorial are broken

3

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! :slightly_smiling_face:

2 Likes
4

Thanks for the call out, @aquades ! They’re all fixed now : ))

1 Like
5

Thanks for the suggestion, @candidexmedia We’re likely going to add PeerTube as well. :raised_hands: 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!

2 Likes
6

Hi! Here’s the link to Peertube: Penpot Hands-on - Introduction to Flex and Grid layout - Penpot Peertube

:raised_hands:

1 Like
7

Thank you, @Elena_Alcalde_Rueda! Will make sure to tune in or catch up. :blush:

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.

8

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.

9

Wonderful, thank you!

10

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 (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 :slight_smile:

4 Likes
11

Question by Dennis Krijgsman: ​​Is this in pixels or is rem em etc also available?
Answer: Please, find some details at this user story