Skip to content

Column

The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts. Material.io

Importing

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import React from "react";
import { Row, Col } from "photoncss/react";

export default function Component() {
    return (
        <Row>
            <Col>
                ...content
            </Col>
        </Row>
    );
}

Props

Name Default Possible Values Type Description
sm 12 Any number 1 - 12 number Sets the width out of 12 on small devices.
md 12 Any number 1 - 12 number Sets the width out of 12 on medium devices.
lg 12 Any number 1 - 12 number Sets the width out of 12 on large devices.
xl 12 Any number 1 - 12 number Sets the width out of 12 on extra-large devices.

Note

Props other than those listed above such as className and style will be passed directly to the <div/> element.

See also: