Estilización de Formularios con CSS Grid y Flexbox

Dar vida a una estructura HTML mediante estilos CSS es donde realmente un proyecto cobra forma. Aquí se aplican técnicas de CSS Grid, Flexbox, variables CSS y media queries para transformar una pantalla de creación de contraseña en un diseño limpio, centrado y adaptable a cualquier dispositivo.

¿Cómo centrar elementos con CSS Grid y place-items?

El primer paso es preparar el contenedor principal. Se le asigna un width del 100% y un height de 100vh [01:00] para que ocupe toda la ventana del navegador. En el body, se elimina el margen por defecto con margin: 0.

Aquí aparece un truco poderoso: usar display: grid junto con la propiedad place-items: center [01:36]. Esta combinación centra el contenido tanto vertical como horizontalmente con apenas dos líneas de código. Si bien esto también se puede lograr con Flexbox, place-items lo resuelve de forma más directa y concisa.

Para organizar el formulario internamente, se define grid-template-rows con tres filas [02:20]:

• auto para la sección del título y subtítulo, que toma el tamaño que necesite.
• 1fr para el área de los inputs, ocupando una fracción del espacio disponible.
• auto para el botón inferior.

El ancho del contenedor se fija en 300px para adaptarse a pantallas pequeñas.

¿Cómo estilizar tipografía, inputs y botones con variables CSS?

Las variables CSS permiten mantener consistencia en todo el proyecto. Se definen tamaños tipográficos reutilizables [06:12]:

• --sm: 14px para textos pequeños como labels.
• --md: 16px para textos medianos.
• --lg: 18px para títulos.

Para utilizar estas variables se emplea la función var(), por ejemplo font-size: var(--lg) en el título principal [06:38]. El subtítulo recibe un color más claro usando la variable de diseño very light pink, un font-weight: 300 para letra delgada y un margin-bottom: 32px para separarlo de los campos del formulario [07:20].

¿Qué propiedades se aplican a labels e inputs?

Los labels llevan font-size: var(--sm), font-weight: bold y un margin-bottom: 4px [08:08], siguiendo la guía de espaciado con múltiplos de cuatro.

Los inputs se estilizan con varias propiedades [08:30]:

• background-color usando la variable del diseño para el campo de texto.
• border: none para eliminar el borde por defecto.
• Border-radius de 8px para esquinas redondeadas.
• height: 32px y padding: 6px para dar espacio interno al texto.

Para apilar labels e inputs verticalmente, el form recibe display: flex con flex-direction: column [09:40], cambiando la dirección del eje principal de horizontal a vertical.

¿Cómo se construye el botón principal?

El primary button utiliza el color verde de la variable Hospital como background-color [10:20]. Se le aplican:

• border: none y border-radius: 8px.
• color: white para el texto.
• width: 100% para ocupar todo el ancho disponible.
• Cursor pointer para que el mouse muestre la manita al pasar sobre él.
• font-size: var(--md) y font-weight: bold.
• height: 50px para un tamaño cómodo al tacto.

Se agrega margin-top: 14px y margin-bottom: 30px al contenedor del botón para generar separación visual respecto a los inputs [11:58].

¿Cómo hacer responsive con media queries y display none?

El logo se oculta en escritorio con display: none [05:28] y se muestra en móvil mediante una media query. Se utiliza @media (max-width: 640px) [12:50] en lugar de min-width porque todos los estilos escritos arriba aplican para pantallas grandes; la media query solo modifica lo necesario para dispositivos pequeños.

Dentro de esa regla, al logo se le asigna display: block [13:22] para que vuelva a ser visible. Al redimensionar el navegador más allá de 640px, el logo desaparece automáticamente, logrando una experiencia adaptada a cada formato.

Con estas técnicas de CSS Grid, variables y media queries, la pantalla de creación de contraseña queda funcional y fiel al diseño. ¿Qué ajustes harías tú en los espaciados o colores? Comparte tu versión en los comentarios.