body, html {
  background-color: #aaa;
  margin:0;
  padding:0;
}
* {
  box-sizing:border-box;
}

grid-system {
  display: grid;
  grid-template-columns: repeat(var(--columns, 50), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 50), minmax(0, 1fr));
  height: 100%;
  margin-inline: auto;
  container-type: size;
  overflow: hidden;
  cell {
    position: relative;
    grid-area: var(--landscape, var(--portrait));
    z-index:var(--layer);
    @container (max-aspect-ratio: 1/1) { grid-area: var(--portrait, var(--landscape)); }
  }
  cell > * {
      height:100%;
      width:100%;
      overflow:hidden;
      display: flex;
      flex-direction: column;
  }
  cell[data-locked="true"] {
    pointer-events:none;
  }
}

input, select {
  width: 100%;
  height: 100%;
}