d2 icon indicating copy to clipboard operation
d2 copied to clipboard

When I use Grid, how can I make the extra whitespace in each row disappear?

Open muxunting opened this issue 10 months ago • 1 comments

When I use Grid, how can I make the annoying extra whitespace in each row disappear? Ideally, I want each row’s cells to automatically adjust their size.

here is my code:

grid-gap: 0
grid-rows: 13
classes: {
  basic-row: {
    grid-rows: 1
    grid-gap: 0
    style: {
      text-transform: none
    }
  }
}

基本信息: "" {
  class: basic-row
  typeNodeTag: {
    label: "type: NodeTag"
  }
  planPlan: {
    label: "plan: Plan"
  }
  stateEState: {
    label: "state: EState"
  }
}

执行函数: "" {
  class: basic-row
  # grid-columns: 2
  ExecProcNode: {
    label: "ExecProcNode: ExecProcNodeMtd"
  }
  ExecProcNodeReal: {
    label: "ExecProcNodeReal: ExecProcNodeMtd"
  }
}

运行时统计: "" {
  class: basic-row
  instrument: {
    label: "instrument: Instrumentation"
  }
  worker_instrument: {
    label: "worker_instrument: WorkerInstrumentation"
  }
  worker_jit_instrument: {
    label: "worker_jit_instrument: SharedJitInstrumentation*"
  }
}

计划树: "" {
  class: basic-row
  lefttree: {
    label: "lefttree: PlanState*"
  }
  righttree: {
    label: "righttree: PlanState*"
  }
}

计划相关: "" {
  class: basic-row
  initPlan: {
    label: "initPlan: List"
  }
  subPlan: {
    label: "subPlan: List"
  }
}

条件判断: "" {
  class: basic-row
  qual: {
    label: "qual: ExprState"
  }
}

参数变更: "" {
  class: basic-row
  chgParam: {
    label: "chgParam: Bitmapset"
  }
}

结果管理: "" {
  class: basic-row
  ps_ResultTupleDesc: {
    label: "ps_ResultTupleDesc: TupleDesc"
  }
  ps_ResultTupleSlot: {
    label: "ps_ResultTupleSlot: TupleTableSlot"
  }
  ps_ExprContext: {
    label: "ps_ExprContext: ExprContext"
  }
  ps_ProjInfo: {
    label: "ps_ProjInfo: ProjectionInfo"
  }
}

异步执行: "" {
  class: basic-row
  async_capable: {
    label: "async_capable: bool"
  }
}

操作符: "" {
  class: basic-row
  scandesc: {
    label: "scandesc: TupleDesc"
  }
  scanops: {
    label: "scanops: TupleTableSlotOps"
  }
  outerops: {
    label: "outerops: TupleTableSlotOps"
  }
  innerops: {
    label: "innerops: TupleTableSlotOps"
  }
  resultops: {
    label: "resultops: TupleTableSlotOps"
  }
}

操作符状态: "" {
  class: basic-row
  scanopsfixed: {
    label: "scanopsfixed: bool"
  }
  outeropsfixed: {
    label: "outeropsfixed: bool"
  }
  inneropsfixed: {
    label: "inneropsfixed: bool"
  }
  resultopsfixed: {
    label: "resultopsfixed: bool"
  }
}

操作符设置: "" {
  class: basic-row
  scanopsset: {
    label: "scanopsset: bool"
  }
  outeropsset: {
    label: "outeropsset: bool"
  }
  inneropsset: {
    label: "inneropsset: bool"
  }
  resultopsset: {
    label: "resultopsset: bool"
  }
}

and the pic

Image

muxunting avatar Mar 04 '25 18:03 muxunting

We should implement a width: fill or something for this. Will do

alixander avatar Mar 04 '25 18:03 alixander

Image

Maybe grids can further be expanded so that if u place 3 rows of things, they can center and produce this

alixander avatar Mar 24 '25 16:03 alixander