Accentsconagua
Share
En este tutorial, exploraremos cómo crear un par de formularios web diferentes utilizando CSS Grid. Para cada ejemplo, primero usaremos flotantes y luego veremos cómo se podría hacer el mismo diseño utilizando CSS Grid..
Si no tiene ningún conocimiento previo de la cuadrícula CSS, eche un vistazo a nuestra serie para principiantes Entendiendo el módulo de diseño de cuadrícula CSS. Vamos a empezar!
En este diseño vamos a dividir el formulario en dos columnas para que podamos mostrar las etiquetas a la izquierda y los campos de entrada a la derecha..
Un enfoque tradicional de este diseño podría usar flotadores para darnos nuestras columnas. Tenga en cuenta que no tenemos una envoltura para el elemento de formulario; Vamos a estilizar directamente las etiquetas y entradas..
formulario desbordamiento: oculto; label float: left; ancho: 200px; derecho de relleno: 24px; entrada flotador: izquierda; ancho: calc (100% - 200px); botón flotar: derecha; ancho: calc (100% - 200px);
Notarás que estamos usando calc () Aquí, lo que nos permite hacer que nuestra columna izquierda se fije a 200px de ancho, mientras que la columna derecha permanece fluida.
Aquí está el resultado, con algunos estilos adicionales para la estética:
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 grilla en el elemento padre. formar:
form display: grid;
Entonces, tenemos que dividir esa cuadrícula usando rejilla-plantilla-columnas:
form display: grid; cuadrícula-plantilla-columnas: 200px 1fr;
Basado en el CSS anterior, la primera columna tendrá un ancho fijo de 200px mientras que la segunda tomará 1 fr ("Una fracción") del espacio disponible restante.
Ahora necesitamos definir la ubicación de nuestras etiquetas y entradas. Para ello utilizaremos columna de cuadrícula Con valores específicos para las líneas de cuadrícula:
Para obtener más información sobre cómo funcionan las líneas de cuadrícula, eche un vistazo a este rápido consejo:
Basándonos en estas líneas de cuadrícula, aplicaremos las siguientes reglas para nuestras etiquetas, entradas y el botón:
label grid-column: 1/2; entrada, botón rejilla-columna: 2/3;
Las etiquetas se encontrarán en la columna que comienza en la línea 1 y termina en la línea 2. Las entradas y el botón se colocarán en la columna que comienza en la línea 2 y termina en la línea 3.
Finalmente, utilizamos rejilla para agregar un canal de 16px entre las filas y columnas:
form display: grid; cuadrícula-plantilla-columnas: 200px 1fr; rejilla: 16px;
En este diseño, queremos lograr lo siguiente:
Es perfectamente posible construir este diseño utilizando flotadores. Sin embargo, tendremos que establecer una min-height para la columna de la izquierda, de lo contrario no asumirá la altura completa. Hay otros enfoques "tradicionales" para este problema, pero ninguno es particularmente bonito.
En resumen, con flotadores necesitamos:
min-height a la columna izquierda.desbordamiento: oculto; para preservar la altura de la envoltura.textarea y el botón enviar, y luego hacer que llenen el ancho completo.Eso es bastante trabajo, ¿verdad??
Un mejor enfoque sería resolver esto con Flexbox o Grid. En este caso particular, preferiría usar Grid ya que estamos organizando elementos tanto horizontal como verticalmente..
Comencemos declarando una cuadrícula en nuestra envoltura y dividiéndola en dos columnas.
.wrapper display: grid; rejilla-plantilla-columnas: 1fr 2fr;
Nuestro elemento de forma además Necesita ser declarada una grilla:
form display: grid; cuadrícula-plantilla-columnas: 1fr 1fr; rejilla: 20px;
Después de aplicar las reglas anteriores, obtendremos lo siguiente:
Tenemos que dejar que los dos últimos elementos ocupen todo el ancho estirándolos desde la línea 1 hasta la línea 3..
.ancho completo rejilla-columna: 1/3;
Tiempo para nuestro último diseño de formulario. En este ejemplo, hemos incluido una entrada para que los usuarios suban su foto de perfil. Se debe colocar en la parte superior derecha..
Vamos a construir esto con el siguiente marcado:
Cubriendo brevemente un enfoque tradicional, podemos lograr nuestro diseño con estos pasos:
posición: relativa; al elemento de formulario.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, que lograremos usando fr unidades:
form display: grid; cuadrícula-plantilla-columnas: 2fr 1fr; rejilla: 20px;
Una vez establecida la cuadrícula, debemos colocar los elementos de formulario entre la línea de cuadrícula 1 y la línea de cuadrícula 2:
forma p rejilla-columna: 1/2;
El siguiente paso es colocar el archivo de entrada en la segunda columna. Para hacer eso, lo colocaremos entre la línea de cuadrícula 2 y la línea de cuadrícula 3. Moviéndonos verticalmente, haremos que abarque filas desde la línea de cuadrícula 1 a la línea de cuadrícula 2.
.input-file-wrapper grid-column: 2/3; fila de la cuadrícula: 1/2;
¡Bien hecho! Hemos cubierto varios ejemplos diferentes para usar CSS Grid al crear formularios web. Como habrá notado, ahorramos mucho tiempo y esfuerzo al escribir algunas líneas de código, en lugar de utilizar técnicas de diseño tradicionales. Puedes usar todos los ejemplos anteriores a partir de hoy, gracias a CSS @supports Lo que nos ayuda en el uso de una característica específica como una mejora.
¿Tienes alguna sugerencia para mejorar estos diseños? Déjame saber abajo en los comentarios!
