CSS Grid Layout tutorial | Basics

Published: 08 April 2024
on channel: Penpot

49,569

126

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 -
https://community.penpot.app

Design: https://penpot.app
Help: https://help.penpot.app
Contribute: https://github.com/penpot
Flex Layout: https://penpot.app/layout
Penpot Fest: https://penpotfest.org

Follow us:
X:   / penpotapp
Instagram:   / penpot.app
Github: https://github.com/penpot
Mastodon: https://fosstodon.org/@penpot/
LinkedIn:   / penpotdesign

Penpot: Bring Design Collaboration between Designers and Developers.

On this page of the site you can watch the video online CSS Grid Layout tutorial | Basics with a duration of hours minute second in good quality, which was uploaded by the user Penpot 08 April 2024, share the link with friends and acquaintances, this video has already been watched 49,569 times on youtube and it was liked by 126 viewers. Enjoy your viewing!

13,912

323