Penpot Grid Layout vs Guides  🔗 **Source:** [Penpot Grid Layout vs Guides](https://www.youtube.com/watch?v=SGEx_dAiXdY) [00:00:00] Background grids versus grid layouts, the difference is huge. Background grids are guides used to help you manually position design elements by eye. You can apply these to a penpot board from the guide section of the design panel. [music] There's options for columns, rows, and square grid guides. And then you can drag or use X and Y coordinates to align your design elements to your guides. >> [music] >> Grid layouts automate layouts based on the design rules you provide. So whatever content you add to your grid, it'll get slotted into the layout according to the columns and rows. You can [music] use flexible units for your rows and columns to make it responsive like auto to fit the content. And you can choose how each grid item behaves [music] inside the grid. Full height and [00:00:42] width works well with percentages of a container or FR units for [music] units to fill a proportion of the container. Your grid cells can also span multiple columns and rows. From the manual grid cell tab, [music] you can set the start and end points of the selected cells column and row. You can reference the column and row line numbers from the grid editor view. [music] And you can even name that grid cell area from the area tab. The coolest part? This grid is already CSS code. Go to the inspect panel and you can grab all the grid CSS properties. [music] It'll look exactly the same in the browser as it does in penpot. And that named grid area? Yep, that is in the code too. Was this helpful? Do you have any other questions? Let [music] me know [00:01:26] in the comments and subscribe for more videos like this., Penpot Grid Layout vs Guides, Penpot, 01m4x7cyabqrrfsw3e7zkjq1nt.