The Grid system is currently limited to columns only

[openxthinking]

The Grid system is currently limited to columns and you can't work with rows making it useless for more complex layouts.

At the moment a layout like this can't be achieved easily.

something like this would be ideal:

  <x-grid columns="10">
    <x-col span="1+2" span-y="1-3">cell 1</x-col>
    <x-col span="3+2">cell 2</x-col>
    <x-col span="5+4">cell 3</x-col>
    <x-col span="9+2">cell 4</x-col>
    <x-col span="3+4">cell 5</x-col>
    <x-col span="7+4" span-y="2-3">cell 6</x-col>
    <x-col span="3-6">cell 7</x-col>
  </x-grid>

This is how much nesting and code you need to achieve the above layout

this is the code

  <x-grid class="debug" style="gap:1px">
      <x-col>
          <x-grid>
              <x-col>grid>cell>grid>cell</x-col>
          </x-grid>
      </x-col>
      <x-col span="2..">
          <x-grid class="debug" style="width:100%; gap:1px">
              <x-col span="1+1">grid>cell>grid>cell</x-col>
              <x-col span="2-3">grid>cell>grid>cell</x-col>
              <x-col span="4..">grid>cell>grid>cell</x-col>
              <x-col span="row">
                  <x-grid columns="2" class="debug" style="width:100%; gap:1px">
                      <x-col>
                          <x-grid class="debug" style="width:100%; gap:1px">
                              <x-col span="row">grid>cell>grid>cell>grid>cell>grid>cell</x-col>
                              <x-col span="row">grid>cell>grid>cell>grid>cell>grid>cell</x-col>
                          </x-grid>
                      </x-col>
                      <x-col>grid>cell>grid>cell>grid>cell</x-col>
                  </x-grid>
              </x-col>
          </x-grid>
      </x-col>
  </x-grid>