Dame el código Css para hacer una galería de imágenes usando Grid.
¡Claro! Aquí te dejo un ejemplo básico de cómo crear una galería de imágenes utilizando CSS Grid:

HTML:

php

<div class="gallery">
  <img src="imagen1.jpg" alt="Imagen 1">
  <img src="imagen2.jpg" alt="Imagen 2">
  <img src="imagen3.jpg" alt="Imagen 3">
  <img src="imagen4.jpg" alt="Imagen 4">
  <img src="imagen5.jpg" alt="Imagen 5">
  <img src="imagen6.jpg" alt="Imagen 6">
</div>
CSS:

css

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
}
Este código crea una cuadrícula utilizando display: grid y establece que las columnas se ajusten automáticamente al ancho del contenedor principal. Las imágenes se ajustan a un ancho máximo de 200 píxeles y se expanden automáticamente para ocupar el espacio disponible en su columna. Además, grid-gap agrega un espacio de 10 píxeles entre cada imagen.

Recuerda que puedes ajustar los valores de grid-template-columns y grid-gap para adaptarlos a tus necesidades específicas.
Below is an instruction that describes a task. Write a response that appropriately completes the request.

### Instruction:

Dame el código Css para hacer una galería de imágenes usando Grid.

### Response:

¡Claro! Aquí te dejo un ejemplo básico de cómo crear una galería de imágenes utilizando CSS Grid:

HTML:

php

<div class="gallery">
  <img src="imagen1.jpg" alt="Imagen 1">
  <img src="imagen2.jpg" alt="Imagen 2">
  <img src="imagen3.jpg" alt="Imagen 3">
  <img src="imagen4.jpg" alt="Imagen 4">
  <img src="imagen5.jpg" alt="Imagen 5">
  <img src="imagen6.jpg" alt="Imagen 6">
</div>
CSS:

css

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
}
Este código crea una cuadrícula utilizando display: grid y establece que las columnas se ajusten automáticamente al ancho del contenedor principal. Las imágenes se ajustan a un ancho máximo de 200 píxeles y se expanden automáticamente para ocupar el espacio disponible en su columna. Además, grid-gap agrega un espacio de 10 píxeles entre cada imagen.

Recuerda que puedes ajustar los valores de grid-template-columns y grid-gap para adaptarlos a tus necesidades específicas.
