All tags/Placeholder

A page in wireframe

A hero at 21:9 and three cards at 4:3, all as wide as their column - the layout stands before the photos do.

1 The template placeholder/wireframe.pad pad

<div style="display:grid; gap:16px; width:min(100%, 640px); margin:0 auto">
  {placeholder ratio='21:9', fluid, text='Hero image'}
  <div style="display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px">
    <div>{placeholder ratio='4:3', fluid, text='Product'}<p style="margin:6px 0 0"><strong>Lamp</strong></p></div>
    <div>{placeholder ratio='4:3', fluid, text='Product'}<p style="margin:6px 0 0"><strong>Chair</strong></p></div>
    <div>{placeholder ratio='4:3', fluid, text='Product'}<p style="margin:6px 0 0"><strong>Table</strong></p></div>
  </div>
</div>

2 The result rendered on the server

Lamp

Chair

Table