@shopify/polaris/build/esnext/components/Grid/Grid.css

Shopify’s admin product component library

/* stylelint-disable unit-disallowed-list */
/* stylelint-disable length-zero-no-unit */
/* This file is auto generated by gen-media-queries.js */
/* Breakpoints - Aliases */
/* Breakpoints - Media conditions */
.Polaris-Grid_yirxx { --pc-grid-areas-xs: initial; --pc-grid-areas-sm: var(--pc-grid-areas-xs); --pc-grid-areas-md: var(--pc-grid-areas-sm); --pc-grid-areas-lg: var(--pc-grid-areas-md); --pc-grid-areas-xl: var(--pc-grid-areas-lg); --pc-grid-columns-xs: 6; --pc-grid-columns-sm: var(--pc-grid-columns-xs); --pc-grid-columns-md: var(--pc-grid-columns-sm); --pc-grid-columns-lg: 12; --pc-grid-columns-xl: var(--pc-grid-columns-lg); display: grid; gap: var(--pc-grid-gap-xs, var(--p-space-4)); grid-template-areas: var(--pc-grid-areas-xs); grid-template-columns: repeat(var(--pc-grid-columns-xs), minmax(0, 1fr)); }

@media (min-width: 30em) { .Polaris-Grid_yirxx { gap: var(--pc-grid-gap-sm, var(--p-space-4)); grid-template-areas: var(--pc-grid-areas-sm); grid-template-columns: repeat(var(--pc-grid-columns-sm), minmax(0, 1fr)); } }

@media (min-width: 48em) { .Polaris-Grid_yirxx { gap: var(--pc-grid-gap-md, var(--p-space-4)); grid-template-areas: var(--pc-grid-areas-md); grid-template-columns: repeat(var(--pc-grid-columns-md), minmax(0, 1fr)); } }

@media (min-width: 65em) { .Polaris-Grid_yirxx { gap: var(--pc-grid-gap-lg, var(--p-space-4)); grid-template-areas: var(--pc-grid-areas-lg); grid-template-columns: repeat(var(--pc-grid-columns-lg), minmax(0, 1fr)); } }

@media (min-width: 90em) { .Polaris-Grid_yirxx { gap: var(--pc-grid-gap-xl, var(--p-space-4)); grid-template-areas: var(--pc-grid-areas-xl); grid-template-columns: repeat(var(--pc-grid-columns-xl), minmax(0, 1fr)); } }