Spectre.Console Documentation

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

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.

public static void BasicColumnsExample()
{
    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.

public static void ColumnsFromStringsExample()
{
    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.

public static void ColumnsMixedContentExample()
{
    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.

public static void ColumnsExpandExample()
{
    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.

public static void ColumnsPaddingExample()
{
    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.

public static void ColumnsWrappingExample()
{
    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.

public static void ColumnsDashboardExample()
{
    // 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.

public static void ColumnsFluentExample()
{
    var columns = new Columns(
        new Panel("Fits content"),
        new Panel("Auto-sized"),
        new Panel("Compact"))
        .Collapse();
  
    AnsiConsole.Write(columns);
}

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 .