Conceptos básicos de Grid

Parte de la sección Dominio de CSS del Journey de HTML de Coddy. Lección 31 de 43.

CSS Grid es un sistema de diseño que te permite crear fácilmente páginas web con filas y columnas. Es ideal para crear diseños complejos y adaptables sin necesidad de usar floats ni 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 de visualización para crear una cuadrícula
Cree tres columnas de igual ancho usando la unidad fr
Cree dos filas: la primera de 150px de alto y la segunda de 250px de alto
Añada un espacio de 20px entre todos los elementos de la cuadrícula

Escribe únicamente 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>