Con la llegada de CSS Grid, la creación de grids responsive se ha vuelto mucho más sencilla y eficiente en términos de SEO. Anteriormente, era necesario controlar los media queries para definir diferentes anchos para los elementos en función de si se visualizaban en escritorio, tablet o móvil. Sin embargo, en la actualidad, podemos simplificar este proceso y prescindir de los media queries.
Aquí tienes un ejemplo de cómo crear un grid responsive utilizando CSS Grid:
.galeria {
display: grid;
gap: 1rem;
grid-auto-rows: 22rem;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}Con este código, el grid se ajustará automáticamente en función del tamaño de la ventana del navegador. No es necesario utilizar media queries para establecer diferentes anchos en cada formato, ya que CSS Grid se encarga de hacerlo de forma automática y fluida.
Es importante destacar que, si deseas que el grid muestre exactamente tres columnas en una resolución específica, como 960 píxeles, todavía puedes utilizar media queries para lograrlo. Sin embargo, en la mayoría de los casos, esta optimización adicional no es necesaria ni vale la pena.
Aprovechar las capacidades de CSS Grid te permitirá crear layouts flexibles y adaptables, mejorando la experiencia de usuario y optimizando tu sitio web para los motores de búsqueda. ¡No dudes en explorar las posibilidades que CSS Grid ofrece y experimentar con su implementación en tus proyectos!