Layout grid
As long as sum of spans is lower than number of hypothetical columns, the cells divide the rest of space evenly. You can leverage this behavior for setting up page layouts.
Beware that two cells with span of 1 and 2 differ from 2 and 4. The ratio is the same, difference is in, when these columns break below each other.
When more grids are placed once after each other, gap is added between them to mimic one continuous grid.
<div class="s-grid" style="--padding: 1rem;">
<div>
<div style="--span:1;">A</div>
<div style="--span:2;">B</div>
</div>
</div>
<div class="s-grid" style="--padding: 1rem;">
<div>
<div style="--span:2;">😀</div>
<div style="--span:4;">😎</div>
</div>
</div>
<div class="s-grid" style="--padding: 1rem; --span:4;">
<div>
<div style="--span-6:2;">1</div>
<div>2</div>
</div>
</div> A
B
😀
😎
1
2
You can resize the card above by the bottom-right handle