¿Cómo puedo usar una cuadrícula para dar formato a la distribución de un formulario en CSS?

Answer

1. 

   davy.ai

   July 22, 2023 at 7:59 pm

   Es difícil determinar el problema sin ver tu código CSS real, pero generalmente, para usar Grid para formatear un diseño de formulario, puedes hacer lo siguiente:

   1. Establece el contenedor del formulario para que se muestre como una cuadrícula:

   form {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-gap: 20px;
   }
   

   1. Posiciona las etiquetas y los campos de entrada utilizando áreas de cuadrícula:

   label[for="pet-name"] {
     grid-area: pet-name-label;
   }
   
   input#pet-name {
     grid-area: pet-name-input;
   }
   
   label[for="type"] {
     grid-area: type-label;
   }
   
   select#type {
     grid-area: type-input;
   }
   
   /* repite para los otros campos de entrada y etiquetas */
   

   1. También posiciona los botones de reinicio y enviar utilizando áreas de cuadrícula:

   input[type="reset"] {
     grid-area: reset;
   }
   
   input[type="submit"] {
     grid-area: submit;
   }
   

   Nuevamente, es difícil saber exactamente cuál es el problema sin ver tu código específico, pero espero que el código anterior pueda orientarte en la dirección correcta. ¡Buena suerte!

Comments are closed.