diff --git a/apps/playground/app/test-grid-area/page.tsx b/apps/playground/app/test-grid-area/page.tsx
index 798ae7c0..88ca1e6e 100644
--- a/apps/playground/app/test-grid-area/page.tsx
+++ b/apps/playground/app/test-grid-area/page.tsx
@@ -40,7 +40,7 @@ export default function Test() {
                         <GridIcon />
                       </Box>
                       <Box asChild gridArea="title">
-                        <Heading as="h4">Title</Heading>
+                        <Heading as="h4">Named Areas</Heading>
                       </Box>
                       <Box asChild gridArea="body">
                         <Text>
@@ -54,6 +54,54 @@ export default function Test() {
                   </Card>
                 </Section>
 
+                <Section size="3">
+                  <Card
+                    size={{ initial: '3', sm: '4', lg: '5' }}
+                    style={{ maxWidth: 500 }}
+                    mx="auto"
+                  >
+                    <Grid
+                      align="center"
+                      gap={{ initial: '3', sm: '4', lg: '5' }}
+                      columns={{
+                        initial: 'auto repeat(2, 1fr)',
+                        sm: 'auto repeat(3, 1fr)',
+                        lg: 'auto repeat(4, 1fr)',
+                      }}
+                      rows="auto 1fr"
+                    >
+                      <Box asChild gridArea="'1 / 1 / span 1 / span 1'">
+                        <GridIcon />
+                      </Box>
+                      <Box
+                        asChild
+                        gridArea={{
+                          initial: '1 / 2 / span 1 / span 2',
+                          sm: '1 / 2 / span 1 / span 3',
+                          lg: '1 / 2 / span 1 / span 4',
+                        }}
+                      >
+                        <Heading as="h4">Placed Areas</Heading>
+                      </Box>
+                      <Box
+                        asChild
+                        gridArea={{
+                          initial: '2 / 2 / span 1 / span 2',
+                          sm: '2 / 2 / span 1 / span 3',
+                          lg: '2 / 2 / span 1 / span 4',
+                        }}
+                      >
+                        <Text>
+                          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, officiis
+                          labore commodi maxime corporis expedita aliquid vero praesentium dolor id
+                          numquam illo est, quod voluptatem mollitia inventore pariatur odit
+                          delectus.
+                        </Text>
+                      </Box>
+                    </Grid>
+                  </Card>
+                </Section>
+
                 <Section size="3">
                   <Flex align="center" gap={{ initial: '3', sm: '4', lg: '5' }}>
                     <IconButton variant="ghost" size={{ initial: '1', sm: '2', lg: '3' }}>
diff --git a/packages/radix-ui-themes/src/styles/utilities/grid-area.css b/packages/radix-ui-themes/src/styles/utilities/grid-area.css
index 0347492b..7c58a6d4 100644
--- a/packages/radix-ui-themes/src/styles/utilities/grid-area.css
+++ b/packages/radix-ui-themes/src/styles/utilities/grid-area.css
@@ -1,3 +1,33 @@
 .rt-r-ga {
   grid-area: var(--grid-area);
 }
+
+@media (--xs) {
+  .xs\:rt-r-ga {
+    grid-area: var(--grid-area-xs);
+  }
+}
+
+@media (--sm) {
+  .sm\:rt-r-ga {
+    grid-area: var(--grid-area-sm);
+  }
+}
+
+@media (--md) {
+  .md\:rt-r-ga {
+    grid-area: var(--grid-area-md);
+  }
+}
+
+@media (--lg) {
+  .lg\:rt-r-ga {
+    grid-area: var(--grid-area-lg);
+  }
+}
+
+@media (--xl) {
+  .xl\:rt-r-ga {
+    grid-area: var(--grid-area-xl);
+  }
+}