Utilities for setting the block size of an element.
Use block-<number> utilities like block-24 and block-64 to set an element to a fixed block size based on the spacing scale:
Use block-full or block-<fraction> utilities like block-1/2 and block-2/5 to give an element a percentage-based block size:
Use the block-screen utility to make an element span the entire block size of the viewport:
<!-- [!code classes:block-screen] -->
<div class="block-screen">
<!-- ... -->
</div>Use the block-dvh utility to make an element span the entire block size of the viewport, which changes as the browser UI expands or contracts:
<!-- [!code classes:block-dvh] -->
<div class="block-dvh">
<!-- ... -->
</div>Use the block-lvh utility to set an element's block size to the largest possible size of the viewport:
<!-- [!code classes:block-lvh] -->
<div class="block-lvh">
<!-- ... -->
</div>Use the block-svh utility to set an element's block size to the smallest possible size of the viewport:
<!-- [!code classes:block-svh] -->
<div class="block-svh">
<!-- ... -->
</div>