CodeGym/Cursos/Frontend SELF ES/Colocación automática

Colocación automática

Disponible

5.1 Propiedad grid-auto-rows

CSS Grid Layout ofrece excelentes herramientas para la colocación automática de elementos en la cuadrícula. Las propiedades grid-auto-rows, grid-auto-columns y grid-auto-flow ayudan a gestionar el comportamiento de los elementos que no están colocados explícitamente en la cuadrícula. Vamos a ver estas propiedades más en detalle.

La propiedad grid-auto-rows define la altura de las filas que se añaden automáticamente cuando los elementos se salen de las filas definidas explícitamente.

Sintaxis:

.grid-container {
  grid-auto-rows: value;
}

Dónde:

  • value: altura de las filas añadidas automáticamente. Se puede especificar en varias unidades de medida (px, %, fr, auto, etc.)

Ejemplo 1: Altura fija de las filas

En este ejemplo, todas las filas añadidas automáticamente tendrán una altura fija de 100px:

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual ancho */
  grid-auto-rows: 100px; /* Filas añadidas automáticamente tendrán una altura de 100px */
}

Ejemplo 2: Altura flexible de las filas

En este ejemplo, las filas añadidas automáticamente tendrán una altura mínima de 100px, pero pueden aumentar según sea necesario:

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto); /* Altura mínima de las filas de 100px, puede aumentar automáticamente */
}

5.2 Propiedad grid-auto-columns

La propiedad grid-auto-columns define el ancho de las columnas que se añaden automáticamente cuando los elementos se salen de las columnas definidas explícitamente.

Sintaxis:

.grid-container {
  grid-auto-columns: value;
}

Dónde:

  • value: ancho de las columnas añadidas automáticamente. Se puede especificar en varias unidades de medida (px, %, fr, auto, etc.)

Ejemplo 1: Ancho fijo de las columnas

En este ejemplo, todas las columnas añadidas automáticamente tendrán un ancho fijo de 100px:

CSS
.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px); /* Tres filas de altura fija */
  grid-auto-columns: 100px; /* Columnas añadidas automáticamente tendrán un ancho de 100px */
}

Ejemplo 2: Ancho flexible de las columnas

En este ejemplo, las columnas añadidas automáticamente tendrán un ancho mínimo de 100px, pero pueden aumentar hasta ocupar una fracción del espacio libre:

CSS
.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-auto-columns: minmax(100px, 1fr); /* Ancho mínimo de las columnas 100px, puede aumentar hasta ocupar una fracción del espacio libre */
}

5.3 Propiedad grid-auto-flow

La propiedad grid-auto-flow define cómo colocar automáticamente los elementos en la cuadrícula, que no están explícitamente definidos mediante las propiedades grid-row y grid-column.

Sintaxis:

.grid-container {
  grid-auto-flow: value;
}

Dónde:

value: valor que define el orden de colocación de los elementos. Valores posibles:

  • row (por defecto): los elementos se colocan por filas
  • column: los elementos se colocan por columnas
  • dense: los elementos se colocan con llenado denso, sin celdas vacías (se utiliza con row o column)

Ejemplo 1: Colocación por filas

En este ejemplo, los elementos se colocarán por filas, llenando una fila tras otra:

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row; /* Los elementos se colocan por filas */
}

Ejemplo 2: Colocación por columnas

En este ejemplo, los elementos se colocarán por columnas, llenando una columna tras otra:

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column; /* Los elementos se colocan por columnas */
}

Ejemplo 3: Llenado denso

En este ejemplo, los elementos se colocarán por filas con llenado denso, minimizando la cantidad de celdas vacías:

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense; /* Los elementos se colocan por filas con llenado denso */
}

5.4 Ejemplo de implementación completa

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual ancho */
  grid-auto-rows: 100px; /* Filas añadidas automáticamente tendrán una altura de 100px */
  grid-auto-flow: row dense; /* Los elementos se colocan por filas con llenado denso */
  gap: 10px;
}

.grid-item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  border: 1px solid #fff;
}
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de colocación automática de elementos en CSS Grid</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item">Elemento 1</div>
      <div class="grid-item">Elemento 2</div>
      <div class="grid-item">Elemento 3</div>
      <div class="grid-item">Elemento 4</div>
      <div class="grid-item">Elemento 5</div>
      <div class="grid-item">Elemento 6</div>
    </div>
  </body>
</html>

Explicación del código:

  • .grid-container: crea un contenedor Grid con tres columnas de igual ancho y filas automáticas con una altura de 100px. Los elementos se colocan por filas con llenado denso.
  • .grid-item: define estilos básicos para los elementos de la cuadrícula, como el color de fondo, color del texto, relleno, alineación del texto y borde.
1
Tarea
Frontend SELF ES,  nivel 27lección 4
Bloqueada
Columnas auto flexibles
Columnas auto flexibles
1
Tarea
Frontend SELF ES,  nivel 27lección 4
Bloqueada
Auto-disposición por columnas
Auto-disposición por columnas
Comentarios
  • Populares
  • Nuevas
  • Antiguas
Debes iniciar sesión para dejar un comentario
Esta página aún no tiene comentarios