En CSS, las grillas (grid) son sistemas de diseño que le permiten organizar el contenido en filas y columnas. Las grillas responsive son aquellas que se ajustan dinámicamente al tamaño de la pantalla del dispositivo, proporcionando una experiencia de usuario óptima en diferentes dispositivos, como computadoras de escritorio, tabletas y teléfonos móviles.
CSS siempre se ha utilizado para diseñar nuestras páginas web, pero nunca ha hecho un buen trabajo. Primero, usamos tablas, luego flotantes, posicionamiento y bloques en línea, pero todos estos métodos fueron esencialmente trucos y omitieron muchas funciones importantes (centrado vertical, por ejemplo). Flexbox también es una excelente herramienta de diseño, pero su flujo unidireccional tiene diferentes casos de uso y, de hecho, ¡funcionan bastante bien juntos! Grid es el primer módulo CSS creado específicamente para resolver los problemas de diseño que todos hemos estado solucionando desde que creamos sitios web.
Aquí hay un ejemplo básico de cómo puede crear una grilla responsive utilizando CSS, específicamente con el módulo grid:
Grillas responsive, código realizado con JSFiddle. Puede ingresar al siguiente enlace: https://jsfiddle.net/InaWeb/8pfjyLrd/1/
Puede ajustar estos valores según sus necesidades y personalizar la apariencia de las celdas según el diseño que desee lograr. Las grillas son una herramienta poderosa para el diseño web responsive, y en la página oficial de CSS tricks encontrará más propiedades para generar cuadrículas adaptables a la necesidad del cliente. Presione este enlace para conocer más información: https://css-tricks.com/snippets/css/complete-guide-grid/#aa-introduction