02. Grid CSS – Conceptos

Manejo de Flexbox

Antes de comenzar con Grid CSS, quizás sería importante dominar el sistema Flexbox, ya que Grid toma la filosofía y bases de él. Para el uso de Grid CSS necesitamos tener en cuenta una serie de conceptos que utilizaremos a partir de ahora, los cuales comenzamos a definir.

Conceptos

Estos son los conceptos que debemos aprender a la hora de manejar Grid CSS

  • Contenedor: El elemento padre contenedor que definirá la cuadrícula o rejilla.
  • Ítem: Cada uno de los hijos que contiene la cuadrícula (elemento contenedor).
  • Celda (grid cell): Cada uno de los cuadritos (unidad mínima) de la cuadrícula.
  • Area (grid area): Región o conjunto de celdas de la cuadrícula.
  • Banda (grid track): Banda horizontal o vertical de celdas de la cuadrícula.
  • Línea (grid line): Separador horizontal o vertical de las celdas de la cuadrícula.

Conceptos Grid

Para utilizar cuadriculas Grid CSS, trabajaremos bajo el siguiente escenario:

   <!-- contenedor -->    
   <div class="grid">
      <!-- cada uno de los ítems del grid -->
      <div class="a">Item 1</div>
      <div class="b">Item 2</div>
      <div class="c">Item 3</div>
      <div class="d">Item 4</div>
    </div>

Para activar la cuadrícula grid hay que utilizar sobre el elemento contenedor la propiedad display y especificar el valor grid o inline-grid.

Tipo de elemento Descripción
inline-grid Establece una cuadrícula con ítems en línea, de forma equivalente a inline-block.
grid Establece una cuadrícula con ítems en bloque, de forma equivalente a block.

Este valor influye en como se comportará la cuadrícula con el contenido exterior. El primero de ellos permite que la cuadrícula aparezca encima/debajo del contenido exterior (en bloque) y el segundo de ellos permite que la cuadrícula aparezca a la izquierda/derecha (en línea) del contenido exterior (ojo, la cuadrícula entera, no cada uno de sus ítems).

Una vez elegido uno de estos dos valores, y establecida la propiedad display al elemento contenedor, hay varias formas de configurar nuestra cuadrícula grid. Comencemos con las propiedades que se aplican al elemento contenedor (padre).

Scroll al inicio