Ubicación y Alineación de Elementos con CSS Grid

Contenido del curso

Lleva tus conocimientos de CSS a otro nivel

1
CSS Grid: Fundamentos y Prácticas Esenciales
07:41 min

¿De dónde venimos y en dónde estamos?

¿Cómo se llegó al concepto de CSS Grid?

Control de alineamiento

Conceptos generales para comenzar a trabajar con CSS Grid

Propiedades y valores para el elemento padre

Propiedades y valores para los elementos hijos

Lo que podemos lograr adicionalmente con CSS Grid

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:06

Ubicación y Alineación de Elementos con CSS Grid

Curso Profesional de CSS Grid Layout

Clase 25 de 28

Clase 25 / 28

Recursos

¿Cómo organizar elementos en CSS Grid?

La organización y alineación de elementos en CSS Grid es fundamental para facilitar el diseño web moderno y altamente responsivo. En esta sección, descubrirás cómo ubicar y alinear elementos en una cuadrícula con facilidad y precisión. A través del ejemplo práctico proporcionado, entenderemos cómo se pueden implementar los conceptos básicos de CSS Grid para crear un diseño visualmente atractivo y estructurado.

¿Cómo ubicar elementos internos en la cuadrícula?

Para empezar a trabajar con CSS Grid, necesitamos preparar nuestro código HTML y CSS. Al crear una cuadrícula, disponemos elementos internos que llamaremos ítems. En este ejemplo, organizamos cinco ítems distintivos en nuestra cuadrícula:

Un ítem amarillo
Un ítem azul
Un ítem hot pink
Un borde en hot pink
Un segundo borde compartiendo estilo con el anterior

Este proceso de implementación especifica la ubicación exacta de cada ítem en relación a la rejilla de la cuadrícula.

¿De qué manera posicionar los ítems en CSS?

CSS Grid proporciona un control excelente sobre la ubicación de los elementos, utilizando propiedades específicas como grid-column y grid-row. Para delinear claramente la posición, debes definir la línea de inicio y fin que ocupará cada ítem en filas y columnas.

CSS para Posicionar el Ítem Amarillo

Aquí tienes el código para el ítem amarillo:

.item-1 {
    background: var(--yellow);
    grid-column: 1 / 2;
    grid-row: 5 / 10;
}

¿Cómo desarrollar la intuición con CSS Grid?

A medida que practiques, comenzarás a identificar líneas numeradas en la cuadrícula que facilitan la ubicación deliberada de los ítems. Por ejemplo, colocar un ítem azul en específico lugar implica practicar con las líneas verticales y horizontales, como se muestra aquí:

.item-2 {
    background: var(--blue);
    grid-column: 1 / 4;
    grid-row: 7 / 9;
    opacity: 0.5; /* Acento personal */
}

¿Qué pasos seguir para un diseño más complejo?

Con funcionalidad adicional, se pueden crear formas más complejas sin relleno de color, como bordes. Aquí manejamos esto aplicando CSS de la siguiente manera:

Codificando el Borde de Hot Pink

.item-4 {
    border: 4px solid hotpink;
    grid-column: 6 / 9;
    grid-row: 5 / 8;
}

Este estilo garantiza que el diseño alinee los bordes sin necesidad de rellenar el área del ítem. Además, la reutilización del estilo asegura consistencia en el diseño global.

¿Por qué es relevante tener una cuadrícula guía?

Aunque puede parecer complicado al principio, tener una guía visual con las líneas numeradas en tu cuadrícula te facilitará el proceso de posicionamiento sin errores. Esto es fundamental, pero data de una práctica y organización previas que pueden llevar algo de tiempo habituarse.

En resumen, CSS Grid se presenta no solo como una metodología de diseño flexible, sino como una herramienta poderosa para los desarrolladores que buscan precisión y eficiencia en sus proyectos. ¡Sigue explorando y practicando para dominar esta habilidad esencial!

Elias Rayas Gonzalez

Hace 6 años

Aqui dejo mi avance con el proyecto:

Basado en esta imagen:

Acá el código: HTML

<body>

  <div class="grid">
    <div class="grid-cell 1">
      <img src="./css/assets/square-vector.svg" alt="vector">
      <p class="special">Lorem ipsum dolor sit amet .</p>
    </div>
    <div class="grid-cell 2">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ex accusantium aperiam eaque aut consequuntur soluta dolores molestias unde inventore.</p>
    </div>
    <div class="grid-cell 3">
      <p>
        Trentenni <br> 
        e quarentenni <br>
        hanno <br>
        conquistato <br>
        il potere
      </p>
    </div>
    <div class="grid-cell 4">
      E
    </div>
    <div class="grid-cell 5">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ex accusantium aperiam eaque aut consequuntur soluta .</p>
    </div>
    <div class="grid-cell 6">
      O
    </div>
    <div class="grid-cell 7">
      R
    </div>
    <div class="grid-cell 8">
      A
    </div>
    <div class="grid-cell 9">
      ?
    </div>
    <div class="grid-cell 10">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ex accusantium aperiam eaque aut consequuntur soluta .</p>
    </div>
    <div class="grid-cell 11">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ex accusantium aperiam eaque aut consequuntur soluta .</p>
    </div>
    <div class="grid-cell 12">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ex accusantium aperiam eaque aut consequuntur soluta .</p>
    </div>
    <div class="grid-cell 13">
    </div>

</body>

CSS

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=PT+Sans+Narrow&display=swap");

:root {
  --black: #291e2e;
  --red-violet: #b73283;
  --rock-blue: #9dacc5;
  --jely-bean: #25889f;
  --white: #e5e5e5;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
}

body {
  font-family: "Oswald", sans-serif;
  width: 100%;
  height: 100%;
  color: var(--white);
  background: rgb(183, 50, 131);
  background: linear-gradient(
    90deg,
    rgba(183, 50, 131, 1) 0%,
    rgba(41, 30, 46, 1) 10%,
    rgba(41, 30, 46, 1) 90%,
    rgba(37, 136, 159, 1) 100%
  );
  font-size: 1.5rem;
}

.special {
  font-family: "PT Sans Narrow", sans-serif;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 9.63% 18.22% 11.45% 11.97% 33.07% 6.51% 1fr;
  grid-template-rows: 70px 250px 160px 470px 415px 210px 210px 220px 250px 70px;
  /*   grid-gap: 3px; */
  height: 100%;
}

.grid-cell:nth-child(1) {
  /* display: flex;
  flex-direction: column;
  justify-content: space-between; 
  outline: 1px solid lightblue; */
  grid-column: 2 / 4;
  grid-row-start: 2;
}

.grid-cell:nth-child(1) img {
  max-width: 100%;
}

.grid-cell:nth-child(2) {
  grid-area: 2 / -2 / 4 / -3;
}

.grid-cell:nth-child(2) p {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: right;
  padding-top: 20px;
}

.grid-cell:nth-child(3) {
  grid-area: 4 / 3 / 5 / 5;
}

.grid-cell:nth-child(3) p {
  text-align: right;
  font-size: 6rem;
}

.grid-cell:nth-child(4) {
  grid-area: 4 / 5 / 5 / 6;
  align-self: end;
  text-align: center;
  font-size: 10rem;
  font-weight: 900;
}

.grid-cell:nth-child(5) {
  grid-area: 4 / -2 / 5 / -3;
}

.grid-cell:nth-child(5) p {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: right;
  padding-top: 50px;
}

.grid-cell:nth-child(6) {
  grid-area: 5 / 5 / 6 / 6;
  align-self: end;
  text-align: center;
  font-size: 10rem;
  font-weight: 900;
}

.grid-cell:nth-child(7) {
  grid-area: 6 / 5 / 7 / 6;
  align-self: end;
  text-align: center;
  text-align: center;
  font-size: 10rem;
  font-weight: 900;
}

.grid-cell:nth-child(8) {
  grid-area: 7 / 5 / 8 / 6;
  align-self: end;
  text-align: center;
  font-size: 10rem;
  font-weight: 900;
}

.grid-cell:nth-child(9) {
  grid-area: 8 / 5 / 9 / 6;
  align-self: end;
  text-align: center;
  font-size: 10rem;
  font-weight: 900;
}

.grid-cell:nth-child(10) {
  grid-area: -3 / 2 / -5 / 3;
}

.grid-cell:nth-child(10) p {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
  padding-top: 50px;
  padding-bottom: 50px;
}

.grid-cell:nth-child(11) {
  grid-area: -2 / 2 / -3 / 3;
}

.grid-cell:nth-child(11) p {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
}

.grid-cell:nth-child(12) {
  grid-area: -3 / -2 / -5 / -3;
}

.grid-cell:nth-child(12) p {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
}

.grid-cell:nth-child(13) {
  grid-area: -2 / -2 / -3 / -3;
  align-self: end;
  width: 100%;
  height: 80%;
  background-color: var(--white);
}

Comentarios (59)59 comentarios

Carlos Eduardo Gomez García

Jorge luis castro marchan

Agustín Ravena

Orlando Manuel Mendoza Vargas

Guillermo Castaño Vèlez

Irving Juárez

Sabino Fernández

Joel Dominguez Merino

Hace 5 años

Brandon Argel Verdeja Domínguez

Cesar Gabriel Mejias Farreras

Eduardo Reyes

Sergio Andrés Bolaños Penagos

Nicolás Cualangelo

Jonh Pertuz pertuz

Angel David Osorio Leyva

Tonatiuh García Ríos

Dario Paladines

Brayan Pablo Puerto Coronado

Sergio Alejandro González Sánchez

Rigoberto Maldonado

Alejandro Mejia Escobar

Sebastián Buitrago

Juliette Villarroel

Hace 2 años

Javier Restrepo

Estefany Aguilar

Profesor

Carlos Iván Cortés Cruz

Hace 3 años

CARLOS FRANZ GUTIERREZ GUTIERREZ

Hace 4 años

Carlos Machado

Lleva tus conocimientos de CSS a otro nivel

CSS Grid: Fundamentos y Prácticas Esenciales

¿De dónde venimos y en dónde estamos?

Historia y evolución del CSS: De CHSS a la primera versión estándar

Limitaciones y Evolución de CSS en el Diseño Web

Herramientas Esenciales para el Desarrollo Web Eficiente

¿Cómo se llegó al concepto de CSS Grid?

Historia y evolución de CSS Grid: del concepto a la realidad

CSS Grid: Revolución del Diseño Web

Control de alineamiento

Alineación de Elementos con Margin y Line Height en CSS

Técnicas de Alineamiento CSS: Table Cell y Positions

Alineación de Elementos con CSS y Modos de Escritura

Modos de Escritura y Alineación en CSS: Flexbox y CSS Grid

Propiedades lógicas en CSS: uso y aplicación práctica

Técnicas de Alineamiento con Flexbox en CSS

Dibujos Creativos con CSS: Técnicas y Desafíos

Conceptos generales para comenzar a trabajar con CSS Grid

Conceptos Fundamentales de CSS Grid: Relaciones Padre-Hijo

Fundamentos de CSS Grid: Líneas, Tracks, Celdas y Áreas

Inspiración y Diseño Creativo con CSS Grid

Propiedades y valores para el elemento padre

Comprender Display Grid e Inline Grid en CSS

Creación y Optimización de Grids en CSS

Alineación de Elementos con CSS Grid

Generación Automática de Tracks en CSS Grid

Uso avanzado de CSS Grid para diseño responsivo

Propiedades y valores para los elementos hijos

Creación de Grids en CSS para Diseños Creativos

Alineación de Elementos Hijos en CSS Grid

Alineación de elementos en CSS Grid: Justify, Align y Place Self

Ubicación y Alineación de Elementos con CSS Grid

Alineación de Elementos con CSS Grid y Flexbox

Lo que podemos lograr adicionalmente con CSS Grid

Diseño Responsive: Breakpoints y Media Queries en CSS

Examen de Certificación en CSS Grid Layout

Ubicación y Alineación de Elementos con CSS Grid