logo

Tutorial CSS Grid Layout | Diferencias entre Grid y Flex layout y algunos ejemplos

time2 yr agoview4 views

Juan nos explica en este mini tutorial, las nociones básicas de cómo usar nuestra nueva funcionalidad: CSS Grid Layout.

Esta funcionalidad es una forma completamente novedosa y única que permite distribuir los elementos dentro de un layout de manera bidimensional y automática . Esta distrubución en grid tiene una implementación directa en CSS, lo que facilita el trabajo en la fase de desarrollo.

Penpot is the first open-source collaborative design tool that bridges the gap between designers and developers.

Penpot allows a true real-time collaboration thanks to features like Flex and Grid 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

Síguenos:

  • X: https://twitter.com/penpotapp ​​
  • Instagram: https://www.instagram.com/penpot.app/
  • Github: https://github.com/penpot
  • Mastodon: https://fosstodon.org/@penpot/​
  • LinkedIn: https://www.linkedin.com/company/penpotdesign

Penpot: Bring Design Collaboration between Designers and Developers

0:00 - Penpot 2.0 release intro 0:27 - Diferencia entre CSS Grid Layout y Flex Layout 2:48 - Beneficios de CSS Grid Layout 4:46 - Dinos qué te ha parecido

Loading comments...