Grid

display: grid lays children out on a two-dimensional track grid — the right tool when rows and columns must stay aligned with each other, which flexbox cannot guarantee. Dashboards, key/value panes, and button pads are typical uses.

Defining tracks

Column and row tracks are lists of sizes:

.board {
  display: grid;
  grid-template-columns: 10 1fr 2fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 1;
}

Track sizes accept:

• Cells — 10 is ten characters wide.
• Percentages — resolved against the container.
• Fractions — 1fr, 2fr: after fixed tracks are placed, remaining space is divided proportionally.
• repeat(count, size) — shorthand for repeated tracks.
• calc() expressions — e.g. calc(50% - 5).

grid-template combines both axes as rows / columns:

grid-template: 1fr 1fr / 10 1fr 10;

gap (one value, or row-gap column-gap as two) inserts space between tracks without adding outer margins.

Placing and spanning items

Children fill the grid in source order, left to right, top to bottom. An item can cover several tracks:

.header  { grid-column: span 2; }
.sidebar { grid-row: span 3; }

Aligning items in their cells

By default items stretch to fill their cell. justify-items (inline axis) and align-items (block axis) on the container change that for all items; justify-self / align-self override per item, and an explicit width/height opts an item out of stretching:

.board { justify-items: center; align-items: start; }
.badge { justify-self: end; }

place-items and place-self set both axes at once (place-items: center center).

Demo

Fraction tracks, spanning, and gaps together:

Fullscreen Demo

// Copyright 2026 Arthur Sonzogni. All rights reserved.
// Use of this source code is governed by the MIT license that can be found in
// the LICENSE file.
//
// CSS grid.
//
// grid-template sets the track sizes; items span tracks with grid-column and
// grid-row.
#include <rtxui/rtxui.hpp>

using namespace rtxui;

class GridDemo : public Component<GridDemo> {
 public:
  std::string_view view = R"html(
      <div class="content">
        <h1>RTXUI CSS Grid Layout Demo</h1>
        <p>This demo showcases the CSS Grid layout support in RTXUI. The container uses display: grid, the new shorthand grid-template: 1fr 1fr 1fr 1fr / 1fr 2fr 1fr, and gaps. Spanning is also demonstrated (item 1 spans 2 columns, item 5 spans 2 rows).</p>

        <div class="grid-container">
          <div class="grid-item item-1">1 (span 2 cols)</div>
          <div class="grid-item item-3">3 (1fr)</div>
          <div class="grid-item item-4">4 (1fr)</div>
          <div class="grid-item item-5">5 (span 2 rows)</div>
          <div class="grid-item item-6">6 (1fr)</div>
          <div class="grid-item item-7">7 (1fr)</div>
          <div class="grid-item item-8">8 (2fr)</div>
          <div class="grid-item item-9">9 (1fr)</div>
        </div>
      </div>
      
      <style>
        self {
          --border: rgb(48, 54, 61);

          background-color: rgb(13, 17, 23);
        }

        .content {
          display: block;
          padding: 1;
          width: 100%;
          height: 100%;
        }
        h1 {
          font-weight: bold;
          color: rgb(121, 192, 255);
          margin-bottom: 1;
        }
        p {
          margin-bottom: 2;
        }
        .grid-container {
          display: grid;
          grid-template: 1fr 1fr 1fr 1fr / 1fr 2fr 1fr;
          gap: 1 1;
          width: 90%;
          height: 18;
          border: solid;
          border-color: var(--border);
          padding: 1;
        }
        .grid-item {
          display: block;
          padding: 1;
          border: tall;
        }
        .item-1 { background-color: rgb(248, 81, 73); color: white; border-color: rgb(185, 28, 28); grid-column: span 2; }
        .item-3 { background-color: rgb(234, 179, 8); color: black; border-color: rgb(161, 98, 7); }
        .item-4 { background-color: rgb(34, 197, 94); color: white; border-color: rgb(21, 128, 61); }
        .item-5 { background-color: rgb(88, 166, 255); color: white; border-color: rgb(29, 78, 216); grid-row: span 2; }
        .item-6 { background-color: rgb(168, 85, 247); color: white; border-color: rgb(126, 34, 206); }
        .item-7 { background-color: rgb(236, 72, 153); color: white; border-color: rgb(190, 24, 74); }
        .item-8 { background-color: rgb(20, 184, 166); color: white; border-color: rgb(13, 148, 136); }
        .item-9 { background-color: rgb(100, 116, 139); color: white; border-color: var(--border); }
      </style>
    )html";
};

int main() {
  auto app = Ref<GridDemo>::New();
  Screen screen(app);
  screen.Loop();
  return 0;
}