Cómo crear un formulario simple con CSS Grid

Programación

Aprendió a crear un formulario simple con Flexbox en el artículo anterior. Hoy, comprenderá cómo crear lo mismo con CSS Grid.

Esto es lo que estamos construyendo:

Construyendo el formulario con CSS Grid

De la imagen de arriba, sabemos que el formulario contiene dos elementos:

  1. Un campo de correo electrónico
  2. Un botón de enviar

Aquí está el HTML:

  Send

Para crear el formulario con CSS Grid, debe establecer la displaypropiedad del padre en grid.

form { display: grid; }

Esto es lo que obtienes:

¿Por qué obtuvimos dos filas?

Obtenemos dos filas porque no especificamos el número de columnas para la cuadrícula. Los navegadores siempre tendrán una columna de forma predeterminada.

Para este formulario, necesitamos establecer dos columnas.

  1. La primera columna debería expandirse para llenar cualquier espacio disponible
  2. La segunda columna debe dimensionarse de acuerdo con su contenido.

Para la primera columna, podemos usar la frunidad. Para la segunda columna, podemos usar auto.

form { display: grid; grid-template-columns: 1fr auto; }

Con esto, ha completado el diseño del formulario. Aquí tienes un Codepen para que juegues:

Formulario simple con CSS Grid por Zell Liew (@zellwk) en CodePen.

Cuando los elementos son de altura desigual

Simularemos elementos de altura desigual sustituyendo el buttontexto de por un SVG. Esto es lo mismo que hicimos en el artículo anterior.

¡Observe que la inputaltura del 'aumenta para ajustarse al icono SVG grande también! Una vez más, no tenemos que escribir ningún código adicional. Esto sucede porque los elementos de la cuadrícula se estiran verticalmente para llenar cualquier espacio disponible.

Si desea cambiar este comportamiento, puede cambiar la align-itemspropiedad a uno start, endo center.

Aquí tienes un Codepen para que juegues:

Formulario simple con CSS Grid (con botón SVG) por Zell Liew (@zellwk) en CodePen.

Terminando

CSS Grid facilita la creación de diseños. No es necesario utilizarlo para diseños de macros. También se puede utilizar para micro diseños como el ejemplo de formulario que ha visto aquí.

¡Diviértete con CSS Grid!

Gracias por leer. ¿Este artículo te ayudó de alguna manera? Si lo hizo, espero que considere compartirlo. Podrías ayudar a alguien. ¡Gracias!

Este artículo se publicó originalmente en mi blog.

Suscríbase a mi boletín si desea más artículos que lo ayuden a convertirse en un mejor desarrollador front-end.