LogoLogo
Quest HomeSign Up
  • 😀Welcome to Quest
  • Getting Started
    • Quest Overview
    • Helpful Resources
    • Quick Start - Build your first component from Figma
    • Quick Start - Build your first component from a Wireframe
    • AI Prompt
  • Fundamentals
    • Customizing & Using the UI Kit
    • Designing Custom Components in Figma
    • Easily Sync Designs without Losing Work
    • Setting Up Props & Bindings
    • Exporting Code
    • Push to your Repository
    • Creating Responsive Components
    • Nesting Components
    • Workspaces & Apps
    • Code & Preview Mode
    • Prototypes/Wireframes
    • Animations - build with React Spring
    • Quest plugin for Figma Dev Mode
    • Publish on Quest to a URL
  • Features
    • Working with Variants & States
    • Naming Conventions
    • Previewing with Custom Fonts
    • Light & Dark Mode
    • Creating a custom Tooltip
    • Creating a Floating Popover
    • Creating a Dialog pop-up
    • Radio Group
    • Using the MUI Data Grid & Table
    • Data & List Bindings
    • Dynamic Bindings
    • Grid
    • File Upload
    • Design System Tab and Theme Import
    • How-to use a Theme in your Application
    • Accessibility Support
    • Design Tips and Tricks
    • Video
    • Lazy Loading
    • Sticky Position
    • Link
    • Custom Breakpoints
    • Min / Max Width
    • Supported Quest UI Kit Components & How-to Make Edits in Figma
    • Supported Chakra Components & How-to Make Edits in Figma
  • Advanced Tutorials
    • Setting up Bindings and Features on the MUI Button
    • Display Repeating Components based on a Dynamic List
    • How-to Pass Values from Parent to Nested Components
    • How-to Invoke a modal Dialog Box from a Button Click
    • How to Setup a popover
  • 🔍Help
    • Product Updates
    • FAQs
    • Plugin Warnings / Alerts
  • 💡Support
    • Why does my design look different in Quest than Figma?
    • Can I keep making changes in Figma without affecting code?
    • What are some best practices?
    • Does Quest support more than Figma and React?
    • How do I manage users?
    • What is the refund process?
    • How do I get in touch with Quest?
    • Do I have to use MUI if I'm using Quest?
Powered by GitBook
On this page

Was this helpful?

  1. Features

Grid

Using the CSS Grid feature

PreviousDynamic BindingsNextFile Upload

Last updated 2 years ago

Was this helpful?

Similar to the List feature, you can add a Grid feature to repeat anything in a repeating, wrapping pattern. This is great for displaying things like product cards in an online store.

Add the Grid to any frame/container that has children items you want to repeat. Quest will use the first child in the container as the item to repeat so if you have different children in your design, only the first will be honored.

On this feature, you specify the data source that will be used to repeat the frame/container. You also specify a variable for each looped element. You can use this variable in the bindings of the frame or its children or pass the variable as nested prop values to any nested component in the containing frame.

While setting these values won't show how it looks in the Editor mode, you can set these values and then choose how many grid items you want to repeat. In the example image above, you can see we wanted to see 12 items in the grid and it will display as such in the Preview mode.

Check out the video below to see it better in action.

From the Grid feature, you can set the space between items vertically and horizontally. You can also set minimum width. Max width is always set to "1 fr" which you can .

learn more here