Published
Edited
May 9, 2019
Insert cell
Insert cell
Insert cell
function grid() {
return html`
<div style="display: grid; grid-template-columns: 1fr 1fr; align-items: baseline;">
<div>
Voluptatem explicabo fugiat aut qui et maiores qui qui praesentium. Eos eum
nesciunt quae autem perferendis molestiae omnis aperiam. Tempora quis
voluptate dolorem nesciunt fugit quo incidunt. Est corporis et.
</div>
<div>
Est assumenda facere repudiandae reprehenderit et minima dolores accusamus.
Eum eius temporibus a natus quia molestiae. Sed ut fugiat et nihil. Ea
voluptate ad omnis accusantium aliquam est aspernatur.
</div>
</div>
`
}
Insert cell
Insert cell
html`
<div style="display: flex; flex-direction: column;">
${grid()}
</div>
`
Insert cell
Insert cell
html`
<div style="display: flex; flex-direction: column;">
<!-- insert a node that unsets flex-direction -->
<div style="display: flex; flex-direction: unset">
${grid()}
</div>
</div>
`
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