Conceptos básicos de Grid

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 31 de 43.

CSS Grid es un sistema de diseño que permite crear fácilmente páginas web con filas y columnas. Es ideal para construir diseños complejos y adaptables sin necesidad de utilizar floats o posicionamientos complicados. Además, funciona en todos los navegadores modernos.

Para crear un contenedor de cuadrícula, use la propiedad display:

.container {
  display: grid;
}

Define columnas en tu cuadrícula usando grid-template-columns con unidades px o fr (fracciones):

/* Esto crea tres columnas donde la columna central ocupa el doble de espacio que las otras dos. */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Define filas con grid-template-rows. Usa la propiedad gap para añadir espacio entre los elementos de la cuadrícula.

/* Crea una cuadrícula con dos filas: la primera tiene 100px de alto, la segunda tiene 200px */
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Desafío

Fácil

Crea una regla CSS para una clase llamada grid-container que:

Establezca la propiedad display para crear un grid
Cree tres columnas de igual ancho utilizando la unidad fr
Cree dos filas: la primera de 150px de alto y la segunda de 250px de alto
Añada un gap de 20px entre todos los elementos del grid

Escribe solo el código CSS para la clase grid-container.

Hoja de referencia

CSS Grid es un sistema de diseño para crear páginas web con filas y columnas. Para crear un contenedor de cuadrícula, utiliza display: grid:

.container {
  display: grid;
}

Define las columnas usando grid-template-columns con unidades px o fr (fracciones):

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Tres columnas, la del medio es el doble de ancha */
}

Define las filas con grid-template-rows y añade espaciado con gap:

.container {
  display: grid;
  grid-template-rows: 100px 200px; /* Dos filas con alturas específicas */
  gap: 20px; /* Espacio entre los elementos de la cuadrícula */
}

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
    <style>
        .item{
            border: 2px solid black;
            background-color: #82f5d0;
        }
     /* Add your CSS code here: */
    
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.