Public
Edited
Dec 29, 2023
1 fork
Insert cell
Insert cell
Insert cell
<!-- https://github.com/w3c/csswg-drafts/issues/2402 -->

<section id="grid" style="gap: 0 10px;">
<section style="grid-row: span 99; grid-column: col-1;">
<div style="padding-top: 5px; grid-column: col-1;">start</div>
<section style="grid-row: span 3; grid-column: col-1; gap: 10px 0;">
<div style="_display: none;">a</div>
<div>b</div>
<div>c</div>
</section>
<section style="grid-row: -1; grid-column: col-1;">end</section>
</section>
<section style="grid-row: span 99; grid-column: col-2;">
<div style="padding-top: 0px; grid-column: col-2;">start</div>
<section style="grid-row: span 2; grid-column: col-2; gap: 10px 0;">
<div style="padding-top: 0px; _display: none;">1</div>
<div>2</div>
</section>
<section style="grid-row: -1; grid-column: col-2;">end</section>
</section>
</section>

<style>
#grid { display: grid; grid-auto-rows: auto; grid-template-columns: [col-1] min-content [col-2] min-content; line-height: 1; }
#grid section { display: grid; grid-template-rows: subgrid; }
</style>
Insert cell
<!-- https://github.com/w3c/csswg-drafts/issues/2402 -->

<section id="grid2" style="gap: 10px 10px;">
<section style="grid-column: 1 / span 1; grid-row: 1 / span 3; grid-template-rows: subgrid;">
<div style="_padding-top: 5px; grid-row: 1;">start</div>
<section style="grid-template-rows: repeat(3, auto); grid-column: 1 / span 1; grid-row: 2; gap: 10px 0;">
<div style="padding-top: 5px; _display: none;">a</div>
<div>b</div>
<div>c</div>
</section>
<section style="grid-row: 3; grid-column: 1;">end</section>
</section>
<section style="grid-column: 2 / span 1; grid-row: 1 / span 3; grid-template-rows: subgrid;">
<div style="padding-top: 0px; grid-row: 1;">start</div>
<section style="grid-template-rows: repeat(2, auto); grid-column: 2 / span 1; grid-row: 2; gap: 10px 0;">
<div style="padding-top: 0px; _display: none;">1</div>
<div>2</div>
</section>
<section style="grid-row: 3; grid-column: 1;">end</section>
</section>
</section>

<style>
#grid2 { display: grid; grid-auto-columns: min-content; grid-template-rows: auto 1fr auto; line-height: 1; align-items: start; }
#grid2 section { display: grid; grid-template-columns: subgrid; align-items: start; }
</style>
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more