En este tutorial vamos a explorar cómo construir un par de formularios web diferentes utilizando las cuadrículas CSS. Para cada ejemplo primero usaremos flotadores y luego veremos cómo se puede hacer el mismo diseño usando la cuadrícula CSS.

Si no tienes ningún conocimiento previo en CSS, echa un vistazo a nuestra serie para principiantes Comprensión del módulo de diseño en cuadrícula CSS. ¡Empecemos!

1. Formulario de registro básico

En este diseño vamos a dividir el formulario en dos columnas para que podamos mostrar las etiquetas en la izquierda y los campos de entrada en la derecha.

Con el "CSS" tradicional

En un acercamiento tradicional a este diseño podríamos utilizar flotadores para obtener nuestras columnas. Observa que no tenemos un contenedor para el elemento del formulario; vamos a darle estilo directamente a las etiquetas y a los inputs.

1

<form>

2

    <label for="firstName" class="first-name">First Name</label>

3

    <input id="firstName" type="text">

4

5

    <label for="lastName" class="last-name">Last Name</label>

6

    <input id="lastName" type="text">

7

8

    <!-- more inputs -->

9

</form>

1

form {

2

    overflow: hidden;

3

}

4

5

label {

6

    float: left;

7

    width: 200px;

8

    padding-right: 24px;

9

}

10

11

input {

12

    float: left;

13

    width: calc(100% - 200px);

14

}

15

16

button {

17

    float: right;

18

    width: calc(100% - 200px);

19

}

Verás que estamos usando calc() aquí, esto nos permite hacer que nuestra columna izquierda se fije con 200px de ancho, mientras que la columna derecha permanezca fluida.

Aquí está el resultado, con algunos estilos adicionales para la estética:

Con diseño de cuadrícula CSS

Nuestro objetivo al usar "Cuadrícula" es definir dos columnas, y luego colocar cada elemento en su columna requerida.

El primer paso es definir nuestra cuadrícula en el formulario del elemento form:

1

form {

2

    display: grid;

3

}

Después, necesitamos dividir esa cuadrícula usando grid-template-columns:

1

form {

2

    display: grid;

3

    grid-template-columns: 200px 1fr;

4

}

Basado en el CSS anterior, la primera columna tendrá una anchura fija de 200px mientras que la segunda tomará 1fr ("una fracción") del espacio disponible restante.

Ahora necesitamos definir la ubicación de nuestras etiquetas e inputs. Para ello, utilizaremos grid-column con valores específicos para las líneas de cuadrícula:

Para más información sobre cómo funcionan las líneas de cuadrícula, echa un vistazo a esta sugerencia rápida:

• 

  Sugerencia rápida: Nombra tus líneas de cuadrícula CSS, en caso tal

  En cualquier cuadrícula CSS cada línea tiene un número de índice del cual podemos hacer referencia a los elementos de cuadrícula de lugar. Sin embargo, también podemos nombrar cada una de estas líneas haciendo esto...

Basándonos en estas líneas de cuadrícula, aplicaremos las siguientes reglas para nuestras etiquetas, inputs y el botón:

1

label {

2

    grid-column: 1 / 2;

3

}

4

5

input,

6

button {

7

    grid-column: 2 / 3;

8

}

Las etiquetas se encontrarán en la columna que comienza en la línea 1 y termina en la línea 2. Los inputs y el botón se colocarán en la columna que comienza en la línea 2 y termina en la línea 3.

Por último, utilizamos grid-gap para agregar un canal de 16px entre las filas y las columnas:

1

form {

2

    display: grid;

3

    grid-template-columns: 200px 1fr;

4

    grid-gap: 16px;

5

}

2. Formulario de contacto

En este diseño, queremos lograr lo siguiente:

1. Las alturas de las columnas deben ser iguales, por lo que la barra lateral y la clase wrapper de los formularios deben tener la misma altura.
2. Queremos dividir más el formulario (el lado derecho) en dos columnas, alterando el botón para que llene todo el ancho.

Es perfectamente posible construir este diseño usando flotadores. Sin embargo, tendremos que establecer un min-height (altura mínima) para la columna izquierda, de lo contrario no asumirá la altura completa. Hay otros enfoques "tradicionales" de este tema, pero ninguno es particularmente bonito.

Con el CSS "Tradicional"

Para resumir, con los flotadores necesitamos:

1. Añade min-height a la columna de la izquierda.
2. Haz flotante la clase contact, form y los wrappers.
3. Agrega un clearfix o un overflow:hidden; para conservar la altura del wrapper.
4. Haz flotante los elementos del formulario y agrega márgenes entre ellos.
5. Restablece a flotante para el textarea (campo de texto) y el botón enviar y, después, haz que llenen todo el ancho.

Eso es un poco de trabajo, ¿verdad?

Un mejor enfoque sería resolver esto con Flexbox o Grid. En este caso particular, prefiero usar la cuadrícula, ya que estamos organizando elementos tanto horizontal como verticalmente.

Con diseño de cuadrícula CSS

Comencemos declarando una cuadrícula en nuestro contenedor y dividiéndola en dos columnas.

1

.wrapper {

2

    display: grid;

3

    grid-template-columns: 1fr 2fr;

4

}

En nuestro elemento de formulario además debe ser declarada una cuadrícula:

1

form {

2

    display: grid;

3

    grid-template-columns: 1fr 1fr;

4

    grid-gap: 20px;

5

}

Después de aplicar las reglas anteriores, obtendremos lo siguiente:

Necesitamos dejar que los dos últimos elementos llenen el ancho total extendiéndolos de la línea de cuadrícula 1 a la línea de cuadrícula 3.

1

.full-width {

2

    grid-column: 1 / 3;   

3

}

3. Formulario de Perfil

Es tiempo para nuestro último formato de formulario. En este ejemplo hemos incluido una entrada para que los usuarios carguen su foto de perfil. Debe colocarse en la parte superior derecha.

Con el CSS "Tradicional"

Construiremos esto con el siguiente marcado:

1

<form action="">

2

    <p>

3

        <label for="">Your name</label>

4

        <input type="text">

5

    </p>

6

    <p>

7

        <label for="">Email</label>

8

        <input type="email">

9

    </p>

10

    <p class="input-file-wrapper">

11

        <label for="upload">Upload your photo</label>

12

        <input type="file" name="" id="upload">

13

    </p>

14

    <p>

15

        <button>Save</button>

16

    </p>

17

</form>

Brevemente cubriendo un enfoque tradicional, podemos lograr nuestro diseño con estos pasos:

1. Añade position: relative; al elemento de forma.
2. Coloca el input del archivo en la parte superior derecha.
3. Añade relleno al formulario con el mismo ancho que el archivo de entrada.
4. Especifica un ancho fijo para la entrada del archivo.

Con diseño de cuadrícula CSS

No nos detengamos demasiado en el enfoque tradicional. Con Grid, dividiremos el formulario en dos columnas de la siguiente manera:

La primera columna tomará el doble del espacio horizontal de la segunda columna, lo que conseguiremos con fr unidades:

1

form {

2

  display: grid;

3

  grid-template-columns: 2fr 1fr;

4

  grid-gap: 20px;

5

}

Una vez establecida la cuadrícula, necesitamos colocar los elementos del formulario entre la línea de cuadrícula 1 y la línea de cuadrícula 2:

1

form p {

2

  grid-column: 1 / 2;

3

}

El siguiente paso es colocar el archivo de entrada en la segunda columna. Para hacerlo, lo colocaremos entre la línea de cuadrícula 2 y la línea de cuadrícula 3. Desplazándote verticalmente, haremos que abarque filas de la línea de cuadrícula 1 a la línea de cuadrícula 2.

1

.input-file-wrapper {

2

  grid-column: 2 / 3;

3

  grid-row: 1 / 2;

4

}

Conclusión

¡Bien hecho! Hemos cubierto varios ejemplos diferentes para usar la cuadrícula CSS al crear formularios web. Como habrás notado, hemos ahorrado mucho tiempo y esfuerzo escribiendo unas pocas líneas de código, en contraposición a usar técnicas de diseño tradicionales. Puedes utilizar todos los ejemplos anteriores a partir de hoy, gracias a @supports de CSS que nos ayudan a utilizar una característica específica como una mejora.

• 

  Sugerencia rápida: Agrega un archivo CSS de @supports a las demostraciones de CodePen

  Cuando las demostraciones de CodePen se basan en CSS de vanguardia, es una buena idea advertir a las personas. Proporcionamos una notificación cuando los navegadores no soportan nuestras demos, utilizando...

¿Tienes alguna sugerencia para mejorar estos diseños? ¡Déjame saber abajo en los comentarios!