Trifulcas

Galería de fotos

Con grid haced una galería similar a esta:

Ejemplos flexbox y grid

Cread un contenedor que tenga borde y fondo (para poder distinguirlo) y cread dentro un grid de 4 columnas iguales y 3 filas la del medio el doble que la inferior y la superior. Para poder ver si lo estamos haciendo bien podéis poner dentro 12 divs con un borde y un fondo también.

CSS Grid

Un paso más allá del flexbox es utilizar el CSS Grid, que nos permite utilizar una cuadrícula en la página, y que los elementos se posicionen en las coordenadas que queramos:

https://www.w3schools.com/css/css_grid.asp

Aquí tenemos una guía completa de cómo usar CSS grid:

https://css-tricks.com/snippets/css/complete-guide-grid/

Otra guía, en castellano y bien explicada:

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-grid-layout/

Y otra más también muy bien explicada:

https://medium.com/@alexcamachogz/dominando-css-grid-ff916434f85a

Interactiva:

https://www.joshwcomeau.com/css/interactive-guide-to-grid/

Buenas prácticas:

https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/

Un juego para practicar grid:

https://cssgridgarden.com/#es

Usar flexbox o grid?

https://blog.logrocket.com/flexbox-vs-css-grid/

https://programacion.net/articulo/css_grid_vs_flexbox_cual_es_mas_practico_1771

Posicionamiento CSS

https://dev.to/lupitacode/series/12674

https://www.smashingmagazine.com/2019/03/css-alignment/

https://css-tricks.com/centering-css-complete-guide/

Float

Todo sobre float

Css float

Unidades CSS

https://www.w3schools.com/cssref/css_units.asp

https://gist.github.com/basham/2175a16ab7c60ce8e001

https://getflywheel.com/layout/choose-css-unit-create-better-site-layouts-how-to/

Buenas prácticas:

https://sbsharma.com/best-practice-css-units/

https://medium.com/swlh/css-units-which-ones-to-use-and-avoid-31e4ed461f9

Ejercicio Layout

Crear un layout con flex (y todos los conocimientos adquiridos) parecido a este:

No tiene por qué ser igual, mucho menos el mismo tema, pero sí que tenga esas secciones, divisiones, etcétera. No tiene que ser responsive porque todavía no hemos hecho media queries.