:root {
  --resize-handle-width: 7px;
  --resize-handle-height: 15px;
  --col-gap: 1rem;
  --row-gap: calc(var(--col-gap)/2);
  --selected-row-bg: #999;
  --handle-color: #333;
}

.container {
  display: grid;
  /* for initial rendering */
  grid-template-columns: repeat(var(--num-columns), 1fr);
  gap: var(--row-gap) var(--col-gap);
}

.row {
  display: grid;
  grid: inherit;
  gap: inherit;
  grid-column: 1 / calc(var(--num-columns) + 1);
  grid-template-columns: subgrid;
}

.row>[role=cell] {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

grid-header {
  display: flex;
}

grid-header>div:first-child {
  display: flex;
  align-content: baseline;
  flex: 1;
}

.resize-handle {
  width: var(--resize-handle-width);
  height: var(--resize-handle-height);
  align-self: center;
  margin-left: auto;
  cursor: col-resize;
}

.selected-row {
  background: var(--selected-row-bg);
}