block-size

Ejemplos

Ejemplo básico

Utiliza utilidades block-<number> como block-24 y block-64 para establecer un tamaño de bloque fijo para un elemento basado en la escala de espaciado:

<div class="block-96 ...">block-96</div><div class="block-80 ...">block-80</div><div class="block-64 ...">block-64</div><div class="block-48 ...">block-48</div><div class="block-40 ...">block-40</div><div class="block-32 ...">block-32</div><div class="block-24 ...">block-24</div>

Usar un porcentaje

Utiliza utilidades block-full o block-<fraction> como block-1/2 y block-2/5 para dar a un elemento un tamaño de bloque basado en un porcentaje:

<div class="block-full ...">block-full</div><div class="block-9/10 ...">block-9/10</div><div class="block-3/4 ...">block-3/4</div><div class="block-1/2 ...">block-1/2</div><div class="block-1/3 ...">block-1/3</div>

Coincidir con el viewport

Utiliza la utilidad block-screen para hacer que un elemento ocupe todo el tamaño de bloque del viewport:

<div class="block-screen">  <!-- ... --></div>

Coincidir con el viewport dinámico

Utiliza la utilidad block-dvh para hacer que un elemento ocupe todo el tamaño de bloque del viewport, el cual cambia a medida que la interfaz de usuario del navegador se expande o se contrae:

<div class="block-dvh">  <!-- ... --></div>

Coincidir con el viewport grande

Utiliza la utilidad block-lvh para establecer el tamaño de bloque de un elemento al tamaño más grande posible del viewport:

<div class="block-lvh">  <!-- ... --></div>

Coincidir con el viewport pequeño

Utiliza la utilidad block-svh para establecer el tamaño de bloque de un elemento al tamaño más pequeño posible del viewport:

<div class="block-svh">  <!-- ... --></div>

Usar un valor personalizado

Usa la sintaxis block-[<value>] para establecer el/la tamaño de bloque basándose en un valor completamente personalizado:

<div class="block-[32rem] ...">  <!-- ... --></div>

Para variables CSS, también puedes usar la sintaxis block-(<custom-property>) :

<div class="block-(--my-block-size) ...">  <!-- ... --></div>

Esto es solo un atajo para block-[var(<custom-property>)] que añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad block-size el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

<div class="block-1/2 md:block-full ...">  <!-- ... --></div>

Obtén más información sobre el uso de variantes en la documentación de variantes.

Personalizar el tema

Las utilidades block-<number> se basan en la variable de tema --spacing, la cual se puede personalizar en tu propio tema:

@theme {  --spacing: 1px; }

Obtén más información sobre cómo personalizar la escala de espaciado en la documentación de variables de tema.