Responsive layouts

Our primary weapon of choice to achieve responsive layouts is the "responsive prop syntax". This syntax allows us to easily define how a component is styled at set minimum viewport widths. Try resizing your viewport to see the effects in the examples below.

Anatomy using the padding prop:

padding={{
    xsmall: 'xxsmall', // at 0px min-width, the padding will be 'xxsmall'
    medium: 'large', // at 768px min-width, the padding will be 'large'
}}

If a container is set with container-type: "inline-size", then we can also set responsive props based on the container using the inline container syntax

Anatomy using the padding prop:

padding={{
    container: {
        xsmall: 'xxsmall', // at 0px min-width, the padding will be 'xxsmall'
        medium: 'large', // at 768px min-width, the padding will be 'large'
    }
}}

Any style-related prop with the type definition ResponsiveProp<> supports this syntax – look for "Supports responsive prop syntax" on each package's props tab to see which exact ones.

Use the breakpoint names to define a value at that minimum width:

Show codeCopy code

If you want to skip over a breakpoint, you can do so by excluding it:

Show codeCopy code