Learn about the Column component: its characteristics, options, and common use.
After reading this article, you’ll know:
-
Column component’s major options and variations
-
The difference between the Column and Row components
-
How to use the Column component in your application to build page layouts
What is the Column component?
Column is a layout component that helps organize and structure the content on a page. It typically represents a vertical division within a layout grid where content such as text, images, or other components can be placed.
There are three Column variations - a row of 2,3 and 4 columns. You can find them in the component overview along with other layout components.
Column components create a visually appealing and organized layout by dividing the page into sections of varying widths, allowing for flexible and responsive design. Find out more about that in the Setting up your page article.
Options
Within the Box component options, you have primary options like column width, styling, and alignment.
Column width regulates how many width points one Column can take to fill the screen of a specific device. For example, below you can see the measures for a Column that will take the full width of a mobile device (12 of a total of 12 points), but only ⅓ of a desktop device or tablet (4/12).
Alignment allows you to move the other components within the Column. However, if you need more versatile alignment and positioning options, we recommend checking the Box component.
Styling enables you to customize the inner and outer space of components, height and choose the background color. The primary colors for your application can be selected via the Theme builder.
Using the component
Columns are used to build an initial wireframe of your webpage. You can split your page visually into horizontal blocks, from top to bottom.
Depending on the type of content displayed within the user interface, you may divide the page’s width on the desktop, for example, into one Column as a header (12 width points), two (6+6), three (4+4+4), or more columns.
The Column is used as a parent component for other components, so after you’re done with wireframing (setting the carcass) of your page, fill the Column in with components you need to see in the front end of your application.
In case you want to fill the page with columns quickly, we recommend using the Column Layout component.
Columns and Rows
You may notice when you add a new Column, there’s a parent component that goes along with it - it’s called Row. This component fills the whole width of your page, and you can add up to 12 Columns in one Row.
You can stretch the Row by changing the height, the child Columns will be vertically stretched along with it. Also, if you want to remove many horizontally aligned Columns from your page, navigate to the parent component Row, and delete it.
Overall, the Column is one of the most useful layout-building components due to its simplicity and role in creating a responsive design. Columns enable the organization of content, establish visual hierarchy, and offer flexibility in designing pages.