Spectre.Console

Columns Widget

Display content side-by-side in columns with automatic width distribution

The Columns widget arranges content side-by-side with automatic width calculation and wrapping.

Screenshot

When to Use

Use Columns when you need to display multiple items horizontally with automatic layout. Common scenarios:

  • Dashboard layouts: Show metrics, status panels, or cards side-by-side
  • Menu or navigation items: Display options in a compact horizontal layout
  • Comparison views: Place related information side-by-side for easy comparison
  • Responsive content: Let items automatically wrap to new rows based on available width

For precise control over column widths and alignment, use Grid instead. For dividing a fixed height into proportional sections, use Layout instead.

Basic Usage

Pass any collection of renderables to create columns. Columns automatically calculates how many items fit per row based on available width.

var columns = new Columns(
    new Panel("First column"),
    new Panel("Second column"),
    new Panel("Third column"));
  
AnsiConsole.Write(columns);

Creating Columns

From Strings

Create columns directly from strings, which are automatically converted to markup.

var items = new[]
{
    "[blue]Azure[/]",
    "[green]AWS[/]",
    "[yellow]GCP[/]",
    "[red]Oracle Cloud[/]",
    "[purple]IBM Cloud[/]"
};
  
var columns = new Columns(items);
  
AnsiConsole.Write(columns);

From Mixed Content

Combine different renderable types (panels, tables, markup) in a single column layout.

var columns = new Columns(new Spectre.Console.Rendering.IRenderable[]
{
    new Table()
        .Border(TableBorder.Rounded)
        .AddColumn("Feature")
        .AddColumn("Status")
        .AddRow("Auth", "[green]Done[/]")
        .AddRow("API", "[yellow]In Progress[/]"),
    new Panel("[blue]Next up:[/]\n• Deployment\n• Testing"),
    new Markup("[red]Blocked:[/]\n• Code review\n• QA approval")
});
  
AnsiConsole.Write(columns);

Width Behavior

Expand vs Collapse

Use Expand (default: true) to fill available width with evenly distributed columns. Use Collapse() to fit columns to their content width.

AnsiConsole.MarkupLine("[yellow]Expanded (fills available width):[/]");
var expanded = new Columns(
    new Panel("Item 1"),
    new Panel("Item 2"),
    new Panel("Item 3"))
{
    Expand = true
};
AnsiConsole.Write(expanded);
  
AnsiConsole.WriteLine();
AnsiConsole.MarkupLine("[yellow]Collapsed (fits content width):[/]");
var collapsed = new Columns(
    new Panel("Item 1"),
    new Panel("Item 2"),
    new Panel("Item 3"))
{
    Expand = false
};
AnsiConsole.Write(collapsed);

Controlling Spacing

Adjust the Padding property to control the gap between columns. Default padding is 1 space on the right.

AnsiConsole.MarkupLine("[yellow]Default padding (1 space on right):[/]");
var defaultPadding = new Columns(
    new Panel("Alpha"),
    new Panel("Beta"),
    new Panel("Gamma"));
AnsiConsole.Write(defaultPadding);
  
AnsiConsole.WriteLine();
AnsiConsole.MarkupLine("[yellow]Custom padding (2 spaces on left and right):[/]");
var customPadding = new Columns(
    new Panel("Alpha"),
    new Panel("Beta"),
    new Panel("Gamma"))
{
    Padding = new Padding(2, 0, 2, 0)
};
AnsiConsole.Write(customPadding);
  
AnsiConsole.WriteLine();
AnsiConsole.MarkupLine("[yellow]No padding:[/]");
var noPadding = new Columns(
    new Panel("Alpha"),
    new Panel("Beta"),
    new Panel("Gamma"))
{
    Padding = new Padding(0, 0, 0, 0)
};
AnsiConsole.Write(noPadding);

Automatic Wrapping

Columns automatically wraps items to new rows when they exceed available console width, adjusting the column count dynamically.

var items = new[]
{
    new Panel("[blue]Dashboard[/]"),
    new Panel("[green]Reports[/]"),
    new Panel("[yellow]Settings[/]"),
    new Panel("[red]Users[/]"),
    new Panel("[purple]Analytics[/]"),
    new Panel("[cyan]Notifications[/]"),
    new Panel("[white]Profile[/]"),
    new Panel("[grey]Help[/]")
};
  
var columns = new Columns(items);
  
AnsiConsole.Write(columns);

Advanced Usage

Building Dashboard Layouts

Combine multiple Columns widgets to create complex multi-row dashboard layouts.

// Metrics row
var metrics = new Columns(
    new Panel("[green]Active Users\n1,234[/]").Header("Metrics"),
    new Panel("[blue]Page Views\n45,678[/]").Header("Metrics"),
    new Panel("[yellow]Revenue\n$12,345[/]").Header("Metrics"));
  
// Status row
var status = new Columns(
    new Panel("API: [green]Operational[/]\nDB: [green]Operational[/]").Header("System Status"),
    new Panel("CPU: 45%\nRAM: 67%").Header("Resources"));
  
AnsiConsole.Write(metrics);
AnsiConsole.WriteLine();
AnsiConsole.Write(status);

Using Fluent Extensions

Use extension methods like Collapse() and Expand() for cleaner configuration.

var columns = new Columns(
    new Panel("Fits content"),
    new Panel("Auto-sized"),
    new Panel("Compact"))
    .Collapse();
  
AnsiConsole.Write(columns);

See Also

API Reference

Renders things in columns.

Constructors

Columns(IRenderable[] items)

Initializes a new instance of the class.

Parameters:

items (IRenderable[])
The items to render as columns.
Columns(IEnumerable<IRenderable> items)

Initializes a new instance of the class.

Parameters:

items (IEnumerable<IRenderable>)
The items to render as columns.
Columns(IEnumerable<string> items)

Initializes a new instance of the class.

Parameters:

items (IEnumerable<string>)
The items to render.

Properties

Expand : bool

Gets or sets a value indicating whether or not the columns should expand to the available space. If false, the column width will be auto calculated. Defaults to true.

Padding : Nullable<Padding>

Extension Methods

IEnumerable<Segment> GetSegments(IAnsiConsole console)

Gets the segments for a renderable using the specified console.

Parameters:

console (IAnsiConsole)
The console.

Returns:

An enumerable containing segments representing the specified .