CSS Grid introducción – ¿Cómo usar Grid para mi página web?

Les dejo un tutorial de para poder aprender a usar CSS grid en nuestro sitio web.

El módulo CSS Grid Layout ofrece un sistema basado en grillas, con filas y columnas que nos permite maquetar facilmente sitios webs, evitando así usar floats y posicionamiento. Anteriormente se usaban tablas pero es obsoleto, tambien podemos usar Bootstrap grid, la diferencia entre ambos es que con CSS usamos este modulo nativo y escribiremos más CSS, con Bootstrap en cambio tenemos que importarlo a nuestro proyecto web, y escribiremos más HTML con las clases provistas por el framework.

Siempre pódemos ver más información en w3schools:
https://www.w3schools.com/css/css_grid.asp

this image portrays css   grid-template-rows repeat property

Adémas encontre este sitio web(está en inglés):
https://learncssgrid.com/

Contenidos:

  1. Grid Container
  2. Explicit Grid
  3. Minimum and Maxmum Grid Track Sizes
  4. Repeating Grid Tracks
  5. Grid Gaps (Gutters)
  6. Positioning Items by Grid Line Numbers
  7. Spanning Items Across Rows and Columns
  8. Naming Grid Lines
  9. Positioning Items by Line Names
  10. Naming and Positioning Items by Lines with the Same Name
  11. Naming and Positioning Items by Grid Areas
  12. Implicit Grid
  13. Implicitly Named Grid Areas
  14. Implicitly Named Grid Lines
  15. Layering Grid Items
  16. Aligning Grid Items (Box Alignment)
  17. Aligning Grid Tracks

Y por ultimo en css-tricks encontraremos información más avanzada:
https://css-tricks.com/snippets/css/complete-guide-grid/

 

0 thoughts on “CSS Grid introducción – ¿Cómo usar Grid para mi página web?

Deja un comentario