/* TODO also:
 12x1
 4x3
 3x4
 2x6
 1x12
 */
 .actionbar6x2 {
  display: grid;
  width: 300pt;
  height: 100pt;
  border: 1pt solid #eee;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 2pt;
  grid-row-gap: 2pt;
}

.actionbar6x2 div.slot {
  border: 1pt solid #bbb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.actionbar6x2 .slot1 { grid-area: 1 / 1 / 2 / 2; }
.actionbar6x2 .slot2 { grid-area: 1 / 2 / 2 / 3; }
.actionbar6x2 .slot3 { grid-area: 1 / 3 / 2 / 4; }
.actionbar6x2 .slot4 { grid-area: 1 / 4 / 2 / 5; }
.actionbar6x2 .slot5 { grid-area: 1 / 5 / 2 / 6; }
.actionbar6x2 .slot6 { grid-area: 1 / 6 / 2 / 7; }
.actionbar6x2 .slot7 { grid-area: 2 / 1 / 3 / 2; }
.actionbar6x2 .slot8 { grid-area: 2 / 2 / 3 / 3; }
.actionbar6x2 .slot9 { grid-area: 2 / 3 / 3 / 4; }
.actionbar6x2 .slot10 { grid-area: 2 / 4 / 3 / 5; }
.actionbar6x2 .slot11 { grid-area: 2 / 5 / 3 / 6; }
.actionbar6x2 .slot12 { grid-area: 2 / 6 / 3 / 7; }