CSS Grid Layout tutorial | Basics

In this tutorial, Juan walks us through the basics of how to leverage the power of this incredible new feature: CSS Grid Layout. He explains how to create a grid, manage the space, align cells, establish direction of content, duplicate content, etc.
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.

[@opeyemiadetifa]

I fucking love Penpot. Thank you for giving us grid.

[@Penpot]

Thankssss! Any feedback is welcome!

[@BGdev305]

I agree!

[@MalewiczHype]

This is going to be huge!

[@Penpot]

🙃

[@darkone311]

I absolutely love this and what penpot has done. I mean I've been learning html css and its taking forever to sink in. But this will allow me to move on with projects and then still have time to learn the backend. Thank you.

[@webdevkaizen]

Amazing! Thank you for your hard work!

[@montalemedien]

I am very excited

[@michaelschultze3595]

Awesome ❤

[@lmlSLASHlml]

I noticed each area can have 1 element. What if i wanted to have an image like you did and a text on the bottom left corner of each image in each area ? So 2 elements in the same area?