Alineación de Elementos con CSS Grid y Flexbox

¿Cómo ubicar y alinear los elementos restantes en el proyecto?

Ya estamos en la recta final de nuestro proyecto. Nos queda alinear algunos textos y un pequeño cuadrado rosado. Sígueme en el código que hemos estado desarrollando, allí haremos los ajustes necesarios. Asegúrate de usar el código que proporcioné al inicio de esta clase para seguirme con precisión.

¿Cómo alinear y dar estilo al texto "CSS Grid"?

Para comenzar, ubicamos el elemento denominado "CSS Grid" e insertamos el texto dentro de un contenedor. Esto nos permitirá utilizar propiedades de alineamiento efectivas.

/* Seleccionamos el ítem y ajustamos su tamaño y posición */
.item-seis {
  font-size: 40px;
  grid-column: 6 / 9;
  grid-row: 3 / 5;
  display: grid;
  justify-items: center;
  align-items: center;
}

/* Ajustamos los márgenes del texto dentro del contenedor */
.item-seis p {
  margin: 0;
}

Al hacer esto, logramos centrar el texto tanto horizontal como verticalmente. Es esencial eliminar márgenes predeterminados de los párrafos que puedan generar desajustes en la apariencia visual.

¿Cómo integrar el cuadrado rosado en el grid?

Ahora dirigimos nuestra atención al cuadrado rosado (ítem siete). Determinamos su posición utilizando las líneas del grid.

.item-siete {
  background: hotpink;
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

Verifica que los selectores estén correctamente escritos para que el estilo se aplique efectivamente. Un error tipográfico puede romper el funcionamiento.

¿Qué pasos seguir para rotar y alinear el texto final?

El siguiente paso es alinear el texto final y aplicarle una rotación. Implementamos técnicas de CSS avanzadas para este propósito.

.item-ocho {
  font-size: 20px;
  display: grid;
  grid-column-start: 4;
  grid-row: 2 / 4;
  transform: rotate(90deg);
  writing-mode: vertical-rl; /* Propiedad para cambiar la dirección del texto */
  justify-items: center;
  align-items: center;
}

Utilizamos transform y writing-mode para jugar con las rotaciones y modos de escritura. Esta es una oportunidad de explorar la creatividad y aplicar estilos únicos a tus elementos de diseño.

¿Qué consideraciones tener en cuenta para el diseño responsivo?

Al finalizar la alineación y estilización de cada elemento, es crucial considerar el diseño responsivo. Dependiendo del ancho de la pantalla, los elementos pueden verse afectados. Asegúrate de verificar cómo se adapta el diseño a diferentes tamaños de pantalla. Esto garantiza una experiencia visual coherente, sin importar el dispositivo en que se visualice.

Hasta aquí llegamos con este proyecto. ¡Espero que tu código se vea increíble! Comparte tus resultados y sigue explotando el potencial de CSS Grid. Recuerda que el aprendizaje no termina aquí. Prepárate para la siguiente etapa: el diseño responsivo. ¡Nos vemos en la siguiente clase!