CSS Grid Layout tutorial | Grid vs Flex layout and some examples

Juan explains, in this mini tutorial, the basic notions on how to use our brand new CSS Grid Layout feature.
This functionality is a completely new and unique way of distributing the elements of a layout in a bi-dimensional and responsive manner. This new way of laying out the elements translates straight into CSS code that saves time and makes things easier for devs.
---
Penpot is the first open-source collaborative design tool that bridges the gap between designers and developers.
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 -
community.penpot.app
Design: penpot.app​​
Help: help.penpot.app​
Contribute: github.com/penpot
Flex Layout: penpot.app/layout
Penpot Fest: penpotfest.org
Follow us:
* X: / penpotapp ​​
* Instagram: / penpot.app
* Github: github.com/penpot
* Mastodon: fosstodon.org/@penpot/​
* LinkedIn: / penpotdesign
Penpot: Bring Design Collaboration between Designers and Developers.

[@omnaraiya]

I just discovered penpot and will be using it to start my next project. This looks awesome!

[@Penpot]

thanks!!!

the new version rocks, Amazing like always!

[@user-ev6fj5up9w]

🔥🔥🔥2.0

[@rafaelpuyana]

Amazing !!

[@incyphe]

This makes Figma look like Invision.

[@user-ev6fj5up9w]

Bro next Extension system....!🎉

[@maverick456-33]

Support TailwindCSS code natively !