diff --git a/docs/src/components/landing/CardGrid.js b/docs/src/components/landing/CardGrid.js
index 7999e714aa1..edcacaab991 100644
--- a/docs/src/components/landing/CardGrid.js
+++ b/docs/src/components/landing/CardGrid.js
@@ -62,7 +62,7 @@ export default function CardGrid(props) {
         <SectionHeadline overline={content.overline} title={content.Headline} />
         <Grid container spacing={2} columns={{ xs: 1, sm: 3 }}>
           {content.cards.map(({ icon, title, wip, imageUrl, description }) => (
-            <Grid key={title} xs={2} sm={1}>
+            <Grid key={title} size={{ xs: 2, sm: 1 }}>
               <Paper variant="outlined" sx={cardRootStyle(imageUrl)}>
                 {imageUrl && <Box sx={cardMediaStyle(imageUrl)} />}
                 <Box sx={cardContentRootStyle(imageUrl)}>
diff --git a/docs/src/components/landing/UseCases.js b/docs/src/components/landing/UseCases.js
index 062cc53a0bb..c15374a502d 100644
--- a/docs/src/components/landing/UseCases.js
+++ b/docs/src/components/landing/UseCases.js
@@ -107,7 +107,7 @@ export default function CardGrid() {
           }
         />
         <Grid container spacing={5} sx={{ mt: { xs: 1, sm: 4 } }}>
-          <Grid xs={12} md={6}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <ImageContainer noLinkStyle href="/toolpad/studio/examples/npm-stats/">
               <Img
                 src="/static/toolpad/docs/studio/examples/npm-stats.png"
@@ -123,7 +123,7 @@ export default function CardGrid() {
               href="/toolpad/studio/examples/npm-stats/"
             />
           </Grid>
-          <Grid xs={12} md={6}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <ImageContainer noLinkStyle href="/toolpad/studio/examples/basic-crud-app/">
               <Img
                 src="/static/toolpad/docs/studio/examples/basic-crud-app.png"
@@ -138,7 +138,7 @@ export default function CardGrid() {
               href="/toolpad/studio/examples/basic-crud-app/"
             />
           </Grid>
-          <Grid xs={12} md={6}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <ImageContainer noLinkStyle href="/toolpad/studio/examples/qr-generator/">
               <Img
                 src="/static/toolpad/docs/studio/examples/qr-generator.png"
@@ -155,7 +155,7 @@ export default function CardGrid() {
               href="/toolpad/studio/examples/qr-generator/"
             />
           </Grid>
-          <Grid xs={12} md={6}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <Box
               sx={[
                 (theme) => ({