Both types of grids can stretch to scale to the frame size: You can define the position of the grid on the page.Ĭolumn grids can be fixed to the left, right, or center while row grids can be fixed to the top, bottom, or center of a frame. With column and row grids, you have more flexibility in the setup. This grid option is perfect for precise alignment, such as designing iconography or logos: You can define the size and color of the uniform grid. Grid is a uniform grid, or as we mentioned earlier, a modular grid. In Figma, there are three types of grids to choose from: Grid, Columns, and Rows. This type of grid establishes a vertical rhythm, which makes it easier for users to scan the page and creates a neat and organized visual design: A baseline is the imaginary line on which the text sits. This type of grid consists of a number of equal-width vertical columns that help align and separate content.Ĭolumn grids are especially useful in designing responsive layouts for different screen sizes, as the number of columns can vary, which allows for content to be easily shifted around:īaseline grids are useful for text-heavy designs, such as magazines or books. Modular grids are commonly used for website layouts, especially ones that display a lot of content:Ĭolumn grids are exactly what they sound like: grid systems that organize content into columns. This type of grid provides the freedom and flexibility to arrange design elements and structure them into any layout. Modular grids are basic grids that consist of evenly spaced-out horizontal and vertical lines. Some common grids used in design include modular grids, column grids, and baseline grids. You can use different types of grids depending on the context. Understanding grid systemsĪ grid system is a tool that helps create the composition and layout of a design while keeping design elements consistently aligned and spaced evenly. Then we’ll walk through a step-by-step example of using Figma’s grid features to create responsive web pages. In this article, we’ll talk about what grid systems are used for and the types of grids in Figma. With a powerful tool like Figma, designers can take advantage of its grid capabilities to create different layouts for multiple screen sizes while maintaining precise placement of design elements. One of the tools to help design responsive screens is a grid system. Its purpose is to ensure that websites and apps translate seamlessly to all screen sizes, both in their visual design and user experience.

The grid system adjusts to different screen sizes by using breakpoints or media queries which are conditional rules that apply different styles based on the screen size.Responsive design is an essential aspect of web development. Additionally, it can use grid areas which are named regions that span multiple grid cells. CSS Grid is a native CSS feature that allows developers to create complex and dynamic grid systems without using any frameworks or libraries, composed of rows and columns that can be defined using various units, such as pixels, percentages, fractions, or auto.

Bootstrap is a CSS framework that provides a fixed grid system to create responsive and mobile-friendly websites, with 12 columns and each column having a fixed width of 70 pixels. Medium is a blogging platform that utilizes a fluid grid system to create a simple and elegant layout for its articles, consisting of three columns, with the main content occupying two columns and the sidebar occupying one column. To illustrate how a grid system works for RWD, here are some examples of popular websites that use different types of grid systems.

Design grid types