Apuntes

Super Centered

https://storage.googleapis.com/web-dev-assets/one-line-layouts/01-place-items-center.mp4

• Por más que movamos la pantalla, el elemento no se movera del centro (verticalmente y horizontalmente)

.parent {
  display: grid;
  place-items: center;
}

The Deconstructed Pancake

https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-1.mp4

• Se puede conseguir debido a una propiedad en flexbox llamada flex
• Flex resume las propiedades
  • flex-grow
  • flex-shrink
  • flex-basis

Sidebar Says

https://storage.googleapis.com/web-dev-assets/one-line-layouts/03-sidebar-says.mp4

• Cuando necesitamos un sidebar podemos usar CSS Grid
• Cuando se estira la pantalla el sidebar no ira más del espacio definido
• Cuando se encoge la pantalla el sidebar no se reducirá más del espacio definido

Pancake Stack

https://storage.googleapis.com/web-dev-assets/one-line-layouts/04-pancake-stack.mp4

• Es muy común verlo en sitios web
• Consta de un Header, main y Footer

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Classic Holy Grail Layout