Cómo hacer tu HTML responsive usando display grid

Para hacer que tu HTML sea responsive usando display grid, puedes seguir estos pasos:

Define el contenedor de la cuadrícula: Primero, define el elemento contenedor que contendrá tu cuadrícula usando la propiedad display: grid. Esto habilitará el diseño del grid.

Configura las columnas y filas de la plantilla de cuadrícula: A continuación, configura las columnas y filas de la plantilla de cuadrícula utilizando las propiedades grid-template-columns y grid-template-rows. Estas propiedades permiten especificar cuántas columnas y filas debe tener el grid, así como su tamaño y espaciado.

Coloca los elementos de la cuadrícula: después de definir las columnas y filas de la plantilla de la cuadrícula, puedes colocar los elementos del grid utilizando las propiedades grid-column y grid-row. Estas propiedades le permiten especificar qué celdas deben abarcar sus elementos.

Usa media queries: finalmente, para queel grid responda, puedes usar media queries para ajustar el diseño del grid según el tamaño de la pantalla. Puede usar la regla @media para establecer diferentes propiedades del grid en diferentes puntos de interrupción, como cambiar la cantidad de columnas o su tamaño.

Aquí hay un fragmento de código de ejemplo que demuestra cómo crear un diseño de grid responsive:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 20px;
}

.item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
  }
}

En este ejemplo, el elemento .container está configurado para display:grid y tiene tres columnas con un espacio de 20 px entre ellas. Los elementos .item se colocan dentro del grid utilizando las propiedades grid-column y grid-row.

Luego, se utilizan dos media queries para ajustar el diseño de la cuadrícula en diferentes tamaños de pantalla. Cuando el tamaño de la pantalla es inferior o igual a 768 px, el grid se configura para tener dos columnas en lugar de tres. Y cuando el tamaño de la pantalla es inferior o igual a 480 px, el grid se configura para tener una sola columna. Esto permite que grid se adapte y siga respondiendo a diferentes dispositivos y tamaños de pantalla.

Espero que te guste.

Eso es todo, gracias.

Puedes consultar el artículo original en inglés en https://dev.to/margishpatel/how-to-make-your-html-responsive-using-display-grid-1fj