Columns and Layout

Three terms are used to refer to the layout: container, row, and column.

Container – defines the general context of the grid at the top level and applies the correct margin and our default maximum width.

Row –  defines a row of items in a grid – think of rows as wrappers around columns.

Columns define individual columns in a row.


Columns and rows create important lines for visual rhythm, especially for typography. Create columns by dividing the space into an even grid or by placing multiple fixed rectangles.

Grid and columns in Carbon Design

columns and row design

For measurements in the design, indents are used inside and outside the edges of the columns.

carbon design layout and gridCarbon sketch templates are always drawn at 32 pixels, regardless of the control point. The default padding width is 32px because text inside or without a container should not be less than 32px indented. However, there are three different groove designs for containers and components: wide (basic), narrow, and compressed. These three link scripts provide typographic alignment that allows containers and individual components to “hang”.

Continuity in column scaling is preserved in vertical form. Multiple 2 scales of the first column in height.

Column layout in carbon design

horizontal columns design and proportions

Look video about the 2-x grid

Lexicon Design System

Lexicon offers two types of containers: a fixed-width container and a flexible relative-width container.

Fluid container
The width of this container depends on the size of the viewable area.

Columns Design

Fixed width containers
This container defines the maximum width. This value resizes the window based on predefined breakpoints.

fixed columns layout

Apple column design layout

An example of the layout by columns in Apple.

columns and margins in apple layout

Most modern design systems combine a fixed layout system with a flexible layout system.

Anton Skrypnyk
Anton Skrypnyk