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;
}

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.

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>