Estilización de Formularios con CSS Grid y Flexbox

Ahora estilizaremos el HTML de la pantalla “nueva contraseña”. Diseño nos sugirió la siguiente visual tanto para móvil como para desktop. La única salvedad es que en esta última versión no se debe mostrar el logo.

Cuáles son los estilos que implementaremos

.login {
      width: 100%;
      height: 100vh;
      display: grid;
      place-items: center;
    }
    .form-container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      width: 300px;
    }
    .logo {
      width: 150px;
      margin-bottom: 48px;
      justify-self: center;
      display: none;
    }
    .title {
      font-size: var(--lg);
      margin-bottom: 12px;
      text-align: center;
    }
    .subtitle {
      color: var(--very-light-pink);
      font-size: var(--md);
      font-weight: 300;
      margin-top: 0;
      margin-bottom: 32px;
      text-align: center;
    }
    .form {
      display: flex;
      flex-direction: column;
    }
    .label {
      font-size: var(--sm);
      font-weight: bold;
      margin-bottom: 4px;
    }
    .input {
      background-color: var(--text-input-field);
      border: none;
      border-radius: 8px;
      height: 30px;
      font-size: var(--md);
      padding: 6px;
      margin-bottom: 12px;
    }
    .primary-button {
      background-color: var(--hospital-green);
      border-radius: 8px;
      border: none;
      color: var(--white);
      width: 100%;
      cursor: pointer;
      font-size: var(--md);
      font-weight: bold;
      height: 50px;
    }
    .login-button {
      margin-top: 14px;
      margin-bottom: 30px;
    }
    @media (max-width: 640px) {
      .logo {
        display: block;
      }

Display Grid para centrar elementos

Cómo puedes ver en nuestra clase login con solo dos líneas de código podemos centrar nuestro contenido

display: grid;
place-items: center;

El shorthand property place-items te permite alinear elementos, tanto horizontal como verticalmente, en un contendor con Grid o Flexbox. Es decir, es la abreviatura de las propiedades align-items y justify-items.
Si no le estableces el segundo valor va a utilizar el primero para ambas alineaciones.

Prueba diferentes combinaciones y observa que ocurre:

place-items: center stretch;

place-items: center start;

place-items: start end;

place-items: end center;

Profundiza más sobre este tema con esta clase del curso de CSS Grid básico.

Cómo ordenar los estilos

Una manera de hacerlo es según su propósito. Siguiendo el siguiente orden:

1. Posicionamiento
2. Modelo de caja
3. Tipografía
4. Visuales
5. Otros

Mira aquí la explicación detallada.

Contribución creada por Guadalupe Monge Barale con los aportes de Emanuel Catriquil.