Homecomponentslayout

CenteredColumn

A layout component that centers its children within the container.

Use the CenteredColumn layout to center elements.

StarOfService develops and operates an on-demand online marketplace for consumers seeking professional services. Its online bidding based portal connects professional service providers with buyers including services such as plumbing, gardening, and general contracting; interior decoration, home improvement, and repair; catering, food, entertainment, and event; physical training, music, dance, and yoga; tutoring, leisure, performing arts, painting, and language courses; wellness, physiotherapy, and counseling; and photography, company support, designing, web, and artisan services. The Company caters to local markets in France, Italy, Spain, Germany, the United Kingdom, Poland, Canada, Australia, Turkey, Brazil, and India.
Open in Playroom

Width

Use width property to set the maximum width of the column. This property is responsive, so you could change the width on different breakpoints.

Here's an example that uses the width to set different width on mobile, tablet and desktop. Open the example in Playroom to view all the breakpoints together.

StarOfService develops and operates an on-demand online marketplace for consumers seeking professional services. Its online bidding based portal connects professional service providers with buyers including services such as plumbing, gardening, and general contracting; interior decoration, home improvement, and repair; catering, food, entertainment, and event; physical training, music, dance, and yoga; tutoring, leisure, performing arts, painting, and language courses; wellness, physiotherapy, and counseling; and photography, company support, designing, web, and artisan services. The Company caters to local markets in France, Italy, Spain, Germany, the United Kingdom, Poland, Canada, Australia, Turkey, Brazil, and India.
Open in Playroom

Gutters

Use gutter property to set the spacings on the sides. This is useful to space it on narrow devices like mobiles.

Here's an example with responsive gutter.

StarOfService develops and operates an on-demand online marketplace for consumers seeking professional services. Its online bidding based portal connects professional service providers with buyers including services such as plumbing, gardening, and general contracting; interior decoration, home improvement, and repair; catering, food, entertainment, and event; physical training, music, dance, and yoga; tutoring, leisure, performing arts, painting, and language courses; wellness, physiotherapy, and counseling; and photography, company support, designing, web, and artisan services. The Company caters to local markets in France, Italy, Spain, Germany, the United Kingdom, Poland, Canada, Australia, Turkey, Brazil, and India.
Open in Playroom

Example

Here's a more visual example with all the features.

Open in Playroom

API

width
Required
The maximum width the columns is allowed to grow.
ResponsiveValue
children
Required
The child items to lay out in the column.
ReactNode
gutter
Optional spacing to add on the sides.
ResponsiveValue
as
The root element to use for the column.
ElementType<any>
Table of Contents
Width
Gutters
Example
API