Grid

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

Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore.

Dialog title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores vitae officia, voluptatem modi quos quisquam similique tenetur voluptatum, ratione suscipit numquam dolore aperiam molestiae impedit. Ut, maiores? Alias, quos facilis.