• Shopify logoPolaris
  • Getting started
    • Experience values
    • Accessibility
    • Internationalization
    • Information architecture
    • Currency
    • Design
    • Colors
    • Typography
    • Illustrations
    • Sounds
    • Icons
    • Interaction states
    • Spacing
    • Data visualizations
    • Voice and tone
    • Accessible and inclusive language
    • Grammar and mechanics
    • Naming
    • Actionable language
    • Product content
    • Help documentation
    • Merchant-to-customer content
    • Vocabulary
    • Alternative text
    • Loading
    • Page layouts
    • Home cards
    • Error messages
    • Text fields
    • Help content
    • Locations
    • Account connection
    • Action list
    • App provider
    • Autocomplete
    • Avatar
    • Badge
    • Banner
    • Button
    • Button group
    • Callout card
    • Caption
    • Card
    • Checkbox
    • Choice list
    • Collapsible
    • Color picker
    • Combobox
    • Contextual save bar
    • CustomProperties
    • Data table
    • Date picker
    • Description list
    • Display text
    • Drop zone
    • Empty state
    • Exception list
    • Filters
    • Footer help
    • Form
    • Form layout
    • Frame
    • Fullscreen bar
    • Grid
    • Heading
    • Icon
    • Index table
    • Inline error
    • Keyboard accessories
    • Keyboard key
    • Layout
    • Link
    • List
    • Listbox
    • Loading
    • Media card
    • Modal
    • Navigation
    • Option list
    • Page
    • Page actions
    • Pagination
    • Popover
    • Progress bar
    • Radio button
    • Range slider
    • Resource item
    • Resource list
    • Scrollable
    • Section header
    • Select
    • Setting toggle
    • Sheet
    • Skeleton body text
    • Skeleton display text
    • Skeleton page
    • Skeleton tabs
    • Skeleton thumbnail
    • Spinner
    • Stack
    • Stepper
    • Subheading
    • Tabs
    • Tag
    • Text container
    • Text field
    • Text style
    • Thumbnail
    • Toast
    • Tooltip
    • Top bar
    • Video thumbnail
    • Visually hidden
  • Tokens
  • Icons
Shopify logoPolarisSkip to content
  • Foundations
  • Components
  • Tokens
  • Icons
  • All
    • Account connection
    • Action list
    • App provider
    • Autocomplete
    • Avatar
    • Badge
    • Banner
    • Button
    • Button group
    • Callout card
    • Caption
    • Card
    • Checkbox
    • Choice list
    • Collapsible
    • Color picker
    • Combobox
    • Contextual save bar
    • CustomProperties
    • Data table
    • Date picker
    • Description list
    • Display text
    • Drop zone
    • Empty state
    • Exception list
    • Filters
    • Footer help
    • Form
    • Form layout
    • Frame
    • Fullscreen bar
    • Grid
    • Heading
    • Icon
    • Index table
    • Inline error
    • Keyboard accessories
    • Keyboard key
    • Layout
    • Link
    • List
    • Listbox
    • Loading
    • Media card
    • Modal
    • Navigation
    • Option list
    • Page
    • Page actions
    • Pagination
    • Popover
    • Progress bar
    • Radio button
    • Range slider
    • Resource item
    • Resource list
    • Scrollable
    • Section header
    • Select
    • Setting toggle
    • Sheet
    • Skeleton body text
    • Skeleton display text
    • Skeleton page
    • Skeleton tabs
    • Skeleton thumbnail
    • Spinner
    • Stack
    • Stepper
    • Subheading
    • Tabs
    • Tag
    • Text container
    • Text field
    • Text style
    • Thumbnail
    • Toast
    • Tooltip
    • Top bar
    • Video thumbnail
    • Visually hidden

    Grid

    Create complex layouts based on CSS Grid

    Examples

    Down Arrow

    Use to create a two column layout that wraps at a breakpoint and aligns to a twelve column grid.


    Related components

    • To lay out a set of smaller components in a row, use the stack component
    • To lay out form fields, use the form layout component
    Shopify logo
    👋

    We've made some improvements to our website to help you build more efficiently with Polaris.

    • Share feedback
    • Return to the old site