How to structure scalable data for a drag-and-drop page builder with responsive styling?

I’m building a drag-and-drop page builder using React, and I’m trying to design a scalable data structure for the canvas. The goal is to support dynamic layouts (using Flexbox/Grid) and responsive styling for different screen sizes.

Here’s the current data structure I’m using:

const canvasData = [
  {
    canvasItemId: uuidv4(),
    elType: 'Container',
    id: uuidv4(),
    settings: {
      containerType: 'flex',
      flexDirection: 'row',
      gap: '24px',
      size: '2',
      unit: 'fr',
    },
    elements: [
      {
        canvasItemId: uuidv4(),
        settings: {
          title: 'Add Your Heading Text Here',
          titleLink: {
            url: '',
            isExternal: false,
            target: false,
          },
          width: { unit: '%', size: '100%' }, // Desktop
          widthTablet: { unit: '%', size: '100%' },
          widthMobile: { unit: '%', size: '100%' },
          title_color: '',
          font_family: 'Poppins',
          tagType: 'h1',
          style: 'normal',
          decoration: 'none',
          background_color: 'transparent',
          weight: '400',
          size: 20,
          typographyFontSize: {
            unit: 'px',
            size: 36,
          },
          typographyFontSizeTablet: {
            unit: 'px',
            size: 30,
          },
          typographyFontSizeMObile: {
            unit: 'px',
            size: 20,
          },
          transform: 'capitalize',
          textAlign: 'left',
          padding: {
            bottom: 0,
            left: 0,
            right: 0,
            top: 0,
          },
          margin: {
            bottom: 0,
            left: 0,
            right: 0,
            top: 0,
          },
        },
      },
    ],
  },
];

For responsive styling, I’m currently generating CSS dynamically for each item and injecting it into the DOM:

<div key={item.canvasItemId} className={`${item.canvasItemId}`}>
  <style>{`
    .${item.canvasItemId} .heading {
      font-size: ${settings.typographyFontSizeMobile.size}${settings.typographyFontSizeMobile.unit};
    }
    @media (min-width: 768px) {
      .${item.canvasItemId} .heading {
        font-size: ${settings.typographyFontSizeTablet.size}${settings.typographyFontSizeTablet.unit};
      }
    }
    @media (min-width: 1024px) {
      .${item.canvasItemId} .heading {
        font-size: ${settings.typographyFontSize.size}${settings.typographyFontSize.unit};
      }
    }
  `}</style>
  <p className="heading">{item.settings.title}</p>
</div>

Questions:

Scalability:

Is this data structure scalable for a page builder that supports nested layouts, containers, and dynamic elements?
Are there better ways to handle layout and element settings?
Responsive Styling:

Is embedding dynamic tags an efficient approach, or should I use another method like CSS-in-JS (e.g., Styled Components)?
Flexbox and Grid Support:

How should I design the canvasData structure to handle both Flexbox and Grid layouts effectively?

Any guidance or suggestions would be greatly appreciated!

i tried several way to avoid inline css.