Tutorial

Tutorial: How to create CSS Flex and Grid layout components in Penpot

To create consistency across your design system and help speed up the design process, you can save Penpot flex and grid layouts as reusable components.

Laura Kalbag

Laura Kalbag

— 7 min read
Tutorial: How to create CSS Flex and Grid layout components in Penpot
Some of the grid layout components available in my Basic layouts template.

In Penpot, you can create flexible layouts for your designs using flex and grid layouts. Flex and grid are two ways to create modern web layouts in CSS code. But you don’t need to understand CSS to use them in Penpot!

When you design a web app or site using Penpot’s flex and grid layouts, a developer can use the code generated from your design, displaying the layout exactly as you designed it. No translation, interpretation, or complex handoff discussions needed.

A bento grid layout in Penpot. In the components sidebar, there are five different bento grid layout components.
Download my Basic layouts template to see several examples of flex and grid layouts. The template doubles as a library, and each layout is also a layout component.

Even if you’re not designing for the web, flex and grid layouts provide an easy way to create layouts by setting rules for a group of elements rather than moving and aligning your objects manually one by one. Defining the layout at the container level makes it quicker to achieve pixel precision and much faster to update and add new elements.

A heading layout with padding on the left and right sides, and a column gap between the columns. The Layout spacing input box in the Design panel has a value of 30.
The flex layout for this site’s header tells the items inside the layout to flow in one row without wrapping onto a second row, aligning vertically left and horizontally centered. There’s 30px of horizontal and vertical padding defined around all the items and a 30px gap between each item.

You can apply flex and grid layouts to whole boards or groups of layers and nest different layouts inside each other for more complex layouts.

If you want to reuse a flex or grid layout, you can save it as a component to use again in the same file or even another project. These layouts are useful for speeding up the design process and creating consistency across your design system.

How to use layout components

Use layout components from a shared library to quickly add flex and grid layouts to your own projects. You can download templates that include layout components from Penpot’s Libraries & Templates collection or create a shared library from one of your team’s files. If you’re looking for a quick start, you can copy a layout component from an existing file and paste it into a new one.

Use a layout component from a shared library

Get started quickly with the layout components in my Basic layouts template. Start by importing the template into your Penpot team:

1: Import the library or template’s Penpot file to your Penpot team

  1. Use the options icon button alongside any project in your team and choose Import Penpot files.
  2. Select the file from your computer to import it into your Penpot project.
You can find the Import Penpot files option in the options menu on the Penpot project dashboard.

2: Add the shared library to your Penpot file

  1. Enter the file where you want to use the shared library.
  2. Open the Libraries modal from the Assets tab in the left sidebar.
  3. Use the + icon button alongside your chosen library to connect the library to your file.
The Libraries dialog in Penpot showing the option to publish the current file library or connect shared libraries.
You can connect multiple libraries to your Penpot file and include them when exporting your file.

3: Find the component you want to use

  1. In the Assets tab in the left sidebar, navigate to the components under the name of the shared library.
  2. Explore any component groups using the > chevron icon button to expand each group.
A card image and text component selected in the Assets panel and being dragged on to Penpot’s canvas.
Drag a component from the Assets panel to use it on the canvas.

4: Drag the component from the sidebar onto the canvas and detach the layout from the component

You must first detach the instance from the component before you can add any new layers inside a layout component. Right-click the component on the canvas or the Layers panel in the left sidebar and choose Detach instance.

Right-clicking a component on the canvas in Penpot brings up a menu with the option to Detach instance.
Detaching an instance of a component means you can make changes to your main component without overriding this instance.

5: Use your layout

You can now put other layers inside your layout layer to automatically position them according to its flex or grid layout.

The same card component as before but with a fluffy cat image and a caption saying “a caption about the cute cate.”
Once you’ve detached the instance, you can make changes to your component.

Use a layout component from another file

You can easily use a layout from my Basic layouts template (or any other file!) by copying it to your own. Start by importing the file into your Penpot dashboard and opening it up:

  1. Copy the layout component layer from the Layers panel in the left sidebar of your original file.
  2. Right-click the layer and choose Copy, or use the Ctrl/Cmd + C keyboard shortcut to copy the selected layer.
  3. Paste the layout layer into your new file.
  4. Right-click an existing layer, choose Paste, or use the Ctrl/Cmd + V keyboard shortcut to paste the layout layer into your new file.
  5. You must first detach the instance from the component before you can add any new layers inside a layout component. Right-click the component on the canvas or the Layers panel in the left sidebar and choose Detach instance.
  6. You can now put other layers inside your layout layer to automatically position them according to its flex or grid layout.

Create a layout component

You can create a layout component from either a board or a layer. Option 1 is to create an empty layout component using a board. Note that when using a flex layout, the board’s layout will be invisible until you add a layer inside because flex layouts adapt to their contents.

A board with grid layout on Penpot’s canvas that has visible pink column and row lines. Another board with flex layout does not have any layout lines.
You can tell the layer’s layout type from the Layers list icons. Layers with a flex layout have an icon representing two columns, and layers with a grid layout have an icon representing a 2x2 grid.

Option 2 is to create a layout component from a layer. Any layers inside the layout will be saved as part of the layout component, and these layers can be useful for previewing how the layout displays.

A group that is also a component in the Penpot layers’s list. Inside the group is eight pink rectangle layers.
When you create a layout component, the layer icon is replaced by the diamond-shaped component icon. If you create a layout for a layer that doesn’t contain any other layers, Penpot will create the layout on a new group that contains your original layer.
  1. Select your board or layer from the layers list in the left sidebar’s Layers panel.
  2. Use the + icon button alongside the Layouts section in the right sidebar’s Design panel to create a grid or flex layout for that container. Read more about creating flex and grid layouts in Penpot.
  3. If you have any layers inside your layout layer or board, they will be automatically positioned according to the layout. Change their positioning for your component as needed.
  4. Right-click the layout layer and choose Create component, or use the ctrl/cmd + K keyboard shortcut to create a component. If you can’t see the option to create a component, it might be because you have another main component inside your layout layer. Main components can’t contain other main components.
Two layout boards on the Penpot canvas that have been saved as layout components in the local library.
Once created, you can find your layout component under Local Library Components in the Assets tab in the left sidebar. Name and organize your components to make them easier to find and reuse. “Group” doesn’t make a good component name!

Share your layout components

Have you recently created any reusable layout components that helped your project? You can share them with the Penpot community by contributing a library or template or even share your case study on the Penpot community. We’d love to hear from you.

Check out our other blogs, from informative topic guides to tutorials on how to get the most out of Penpot.

Tutorial: How to create CSS Flex layouts in Penpot
Create CSS Flex layouts without learning how to code. This tutorial shows you how to use Penpot’s flexible layout tools using our sales dashboard UI template.
Penpot BlogLaura Kalbag
Tutorial: How to create responsive CSS Grid layouts in Penpot
With Penpot, you can create CSS Grid layouts without any code. This tutorial explores creating a bento grid layout for a sales dashboard UI.
Penpot BlogLaura Kalbag
Why you should use Penpot’s flexible layouts for your responsive designs
Penpot uses CSS Flex and Grid layouts, so you can build modern and responsive layouts (without knowing how to code!) that will work the same on the web.
Penpot BlogLaura Kalbag
How to make the switch from Figma to Penpot
There are many reasons designers or developers might migrate to Penpot. Penpot’s browser-based software is free and open-source, so you’ll always own your work.
Penpot BlogPaula Tienza

More from our blog