El documento compara Flexbox y Grid Layout, dos técnicas para diseñar layouts web. Flexbox permite colocar elementos de forma horizontal y vertical de forma flexible. Grid Layout define un sistema basado en cuadrícula donde los elementos pueden colocarse en ranuras de forma arbitraria. El documento también incluye enlaces útiles para aprender más sobre estas técnicas.

1. Grid y Flexbox
Por @Koffer
Platica

2. Iván Mejía Fabela
Drupalero
Diseñador Web
@koffer
koffer@gmail.com
www.medioyforma.info

3. Buenos tiempos
para hacer
la internet

4. ¿Cómo se resolvían?
¿Cómo se resuelven?
Layouts

5. <Table>

6. <divs>
width:50%
Float:left

7. y ahora que tenemos?

8. La especificación describe un modelo de caja de CSS optimizado para el diseño de
interfaz de usuario. En el modelo de flex layout, los elementos secundarios de un
contenedor flexible se pueden colocar en cualquier dirección y pueden "flexionar"
sus tamaños, ya sea para rellenar el espacio no utilizado o contraerse para evitar
desbordar al elemento principal. Tanto la alineación horizontal como la vertical de
los elementos secundarios (children) se pueden manipular fácilmente. La
anidación de estos recuadros (horizontal dentro de vertical, o vertical dentro de
horizontal) se puede usar para crear diseños en dos dimensiones.
Flexbox

9. Este módulo CSS define un sistema bidimensional basado
en una cuadrícula, optimizado para el diseño de interfaz
de usuario. En el modelo cuadrícula, los elementos
secundarios (children) de un contenedor de cuadrícula se
pueden colocar en ranuras (slots) arbitrariamente en una
cuadrícula de diseño flexible o de tamaño fijo.
Grid Layout

10. ¿Dudas?

11. Ligas Flexbox
• https://www.w3.org/TR/css-flexbox-1/
• https://css-tricks.com/snippets/css/a-guide-to-
flexbox/
• http://flexboxfroggy.com/
• https://caniuse.com/#feat=flexbox

12. Ligas Grid
• https://www.w3.org/TR/css-grid-1/
• https://css-tricks.com/snippets/css/complete-
guide-grid/
• http://cssgridgarden.com
• https://caniuse.com/#search=grid%20layout

13. Fin