How to use the @microsoft/fast-web-utilities.canUseCssGrid function in @microsoft/fast-web-utilities

const row: string = this.generateRow();
        const span: number = this.generateColumnSpan();
        const gridColumnValue: string = [position, `span ${span}`]
            .filter((item: string | number) => Boolean(item))
            .join(" / ");

        const order: number | null = Array.isArray(this.props.order)
            ? this.getValueByBreakpoint(this.props.order)
            : this.props.order;

        const canUseCssGridStyle: boolean =
            this.props.cssGridPropertyName === "grid"
                ? true
                : this.props.cssGridPropertyName === "-ms-grid"
                    ? false
                    : canUseCssGrid();

        const gridStyles: React.CSSProperties = canUseCssGridStyle
            ? {
                  gridColumn: gridColumnValue,
                  gridRowStart: row,
              }
            : {
                  ["msGridColumn" as any]: this.augmentMsGrid(position),
                  ["msGridColumnSpan" as any]: this.augmentMsGrid(span),
                  ["msGridRow" as any]: row,
              };

        return {
            ...gridStyles,
            order: typeof order === "number" ? order : null,
            // Fixes issue found in firefox where columns that have overflow

const columns: string = `${this.props.margin} minmax(0, ${this.props.maxWidth}) ${
            this.props.margin
        }`;

        const attributes: React.HTMLAttributes = {
            ...this.unhandledProps(),
            className: super.generateClassNames(
                classNames(this.props.managedClasses.page)
            ),
        };

        return {
            ...attributes,
            style: {
                display:
                    this.props.cssGridPropertyName || canUseCssGrid()
                        ? "grid"
                        : "-ms-grid",
                gridTemplateColumns: columns,
                msGridColumns: columns,
                // attributes.style has to be spread here again in order to
                // merge the styles attribute, otherwise it is just overriden
                ...attributes.style,
            },
        };
    }
}

private renderChildren(): React.ReactNode | React.ReactNode[] {
        // We only need to communicate gutters size to ms-grid columns because
        // css grid gives us a css property to set for gutter. If we support
        // css grid, we can safely return children w/o gutter augmentation.
        if (canUseCssGrid()) {
            return this.props.children;
        }

        return React.Children.map(
            this.props.children,
            (child: React.ReactNode | React.ReactNode[]) => {
                if (
                    !child ||
                    (child as any).type !== Column ||
                    (child as any).props.gutter
                ) {
                    return child;
                }

                return React.cloneElement(
                    child as any,