Skip to main content

ResponsiveGrid

    A responsive grid that wraps the Grid component and lets you define the number of columns per pre-defined breakpoints, measured against the grid's own width with CSS container queries.

    If the column count does not need to change with the width, use Grid.

    More information about CSS container queries.

    OverviewPropertiesChangelog

    Import​

    import { ResponsiveGrid } from '@dynatrace/strato-components/layouts';

    Demo​

    The ResponsiveGrid component lets you create a fully responsive grid. It accepts the same props as Grid, except gridTemplateColumns, gridTemplate, grid, and gridItem. The columns prop replaces these props.

    Set columns by breakpoint​

    Each key of columns is the minimum component width, in pixels, at which its value applies. A positive integer n expands to repeat(n, minmax(0, 1fr)). A string is used as the track list verbatim.

    Every key is optional, and an omitted key takes the value of the next smaller key. For example, columns={{ 600: 2 }} results in one column below 600px and two columns from 600px up.

    Allow different column widths​

    Pass a track list string to give the columns different widths.

    Apply props and styles​

    The ResponsiveGrid component renders a wrapper around the grid element. The grid container properties apply to the grid element. Everything else applies to the wrapper: className, style, as, ref, id, ARIA attributes, event handlers, and the spacing, sizing, and placement props.

    The grid element is always a div, so as changes only the wrapper. For example, as="ul" with li children results in invalid markup.

    Rules in className or style that set grid container properties, such as gap or grid-template-rows, don't reach the grid element. Use the props instead. Selectors for direct children, such as .cards > *, match the grid element, not the grid items.

    Sizing​

    The wrapper is a size container (container-type: inline-size), so its content can't determine its size. The wrapper collapses inside the following: width: fit-content, a flex row item without flex or width, or a table cell. Make sure ResponsiveGrid takes its width from a parent.

    Still have questions?
    Find answers in the Dynatrace Community