Layout y sistemas de grillas

LAYOUT Y SISTEMA DE GRILLAS.
¿Qué es una grilla?
Es un sistema de columnas creado por nosotros de acuerdo a las necesidades para ajustar nuestros elementos y componentes.
La mejor herramienta de CSS para crear una grilla es Grid.
Sass es un pre-procesador de CSS te ayuda a escribir CSS de una manera más rápida y más fácil.
Mixin es una clase que tiene dentro del pre-procesador, que te ayuda a manejar mejor los Breakpoints.
Tenemos que configurar nuestros BreakPoints (Tipos de pantalla).
• $xs: 360px. Para móviles pequeños.
• $s: 440px. Para móviles con la pantalla más grande.
• $m: 768px. Para tablets.
• $l: 1280px. Para Ordenadores pantalla normal.
• $xl: 1440px. Monitores de alta calidad.

Podemos usar un Mixin para manejar los distintos breakpoints más fácilmente.
Después vamos a configurar nuestras variables dependiendo de los breakpoints.
–columns. Es el número de columnas que vamos a poner.
–column-gap es el espacio entre las columnas.
Creamos después una clase Grid para configurar cada uno de los elementos contenedores donde vamos a incluir nuestros componentes.
Finalmente le añadimos un display grid, que nos permite que toda esta configuración surta efecto. Y definimos un grip-column-gap para la distancia entre columnas y un grid-template-column que nos permite tener esta estructura.
Para definir el tamaño de un componente, se pone grid-column: 1/5, donde uno es la columna donde empieza, y 5 es la columna donde termina.

Curso de grid layout: https://platzi.com/clases/css-grid-layout/
Introducción al preprocesador sass: https://platzi.com/clases/1665-preprocesadores/22313-introduccion-a-sass/

Tamaños de pantalla…
XS --> 360px --> Equivale a un iphone5
S --> 440px --> Equivale a un Pixel 2.
M --> 768px --> Equivale a un Ipad.
L --> 1280px --> Equivale a desktop.
XL --> 1440px --> Equivale a pantallas desktop de alta calidad.

Estos tamaños tambien se pueden consultar el la documentacion de Bootstrap.

creo que me adelante un poco aquí ya me perdi completamente en que esta haciendo XD

definitivamente después de este curso hay que llevar los demás cursos para complementar lo aprendido aquí.

Enlace correcto de GitHub:
https://github.com/mssroboto/diseno-para-programadores/blob/master/4-app/src/scss/variables/layout.scss

Dato
Puedes ver el grid con el inspector de elementos.
Para acceder al inspector de elementos solo debes presionar “Ctrl + Shift + i” o dar click derecho y después a la opción de “Inspect”. Por defecto te mostrará la sección de “Styles” solo tienes que dirigirte a “Layout” y marcas los grid que deseas ver.

Grilla: Sistema de columnas creado por nosotros de acuerdo a las necesidades para ajustar nuestros elementos y componentes.

Necesito un curso completo de esto.

Para aquellos que se pregunten porque se usa una cuadricula de 12 columnas, la razón es que el 12 es el mínimo común múltiplo optimo por englobar la mayor cantidad de números sin ser excesivamente grande.
De esta forma se pueden crear 2, 3, 4, 6 ó 12 columnas del mismo tamaño sin recurrir a fracciones.

Dejo mis apuntes, espero les sirva 😃

Tendrían que haber puesto en la hoja de ruta primero el curso de Grid y Sass.

💡 Un sistema de grillas esta conformada por líneas verticales y horizontales que se interceptan, esto permite colocar y alinear contenido de modo que la aplicación no luzca desordenada.

Para este curso, veo recomendable que antes hayan tomado el curso definitivo de html y css, o pueden perderse en el tema de las grids y los breakpoint.

Si quieren aprender a programar grids de forma muy fácil, les recomiendo mucho Grid Garden Css

Una web en la que ver los tamaños de todos los dispositivos es https://www.mydevice.io/

Grillas
La grilla es la base para colocar elementos en la pantalla. Diseñar con una grilla ayuda a crear interfaces organizadas y fáciles de usar.
COMPOSICIÓN DE UNA GRILLA
Como su nombre lo indica, la grilla es una malla de columnas y filas separadas por espacios. Este espacio entre columnas, conocido
como gutter, es muy útil para sugerir la idea
de que el diseño respira y de que sus elementos no están pegados unos con otros.
En cada columna y/o fila, ubicaremos el contenido disponible, ya sea texto o imágenes. Si,
por ejemplo, tenemos una grilla con doce columnas, podemos unir tres columnas en el lado izquierdo para formar una barra de navegación y dejar las nueve restantes para el
contenido. También podemos dejar celdas horizontales para aplicar más espacios en blanco, ya que esto contribuye a la ilusión de un
diseño balanceado y con buen uso de la grilla
https://perio.unlp.edu.ar/catedras/iddi/wp-content/uploads/sites/125/2020/04/Diseñar-con-grillas-para-web.pdf

la mejor forma de poner en practica la funcion de GRID en css es jugando, aqui les dejo una pagina donde podran entender un poco mejor como se usa grid.

Según tengo entendido es que la cantidad mínima de px para celulares es 320px, ya que todavía pueden haber por ahí algún teléfono con esa dimensión, y pues si colocamos 360px, al momento de que algún móvil con esa dimensión de pantalla abra la pagina pueda que se rompa la misma.
Aunque probablemente pueda que hayan pocos celulares con esas dimensiones, como devs tenemos que asegurarnos que nuestras paginas sean completamente responsive en todos los dispositivos

Grilla Es un sistema de columnas creado por nosotros de acuerdo a las necesidades para ajustar nuestros elementos y componentes. La mejor herramienta de CSS para crear una grilla es Grid.

Con CSS grid layout, se trabaja con filas y columnas para crear una cuadrícula, en la cual se colocan y distribuyen los distintos elementos. El usuario es quien decide el tamaño de las filas y las columnas, añadiendo las preferencias al contenedor. Con estos dos comandos hemos abierto una cuadrícula de 2 por 3.

me parece que necesito un curso antes de este

Artículo que me ayudo a definir el sistema de grillas en mis proyectos https://material.io/design/layout/responsive-layout-grid.html#layout-anatomy
y les recomiendo leer este artículo de The 8-Point Grid para tener un diseño más consistente
https://spec.fm/specifics/8-pt-grid

acá dejo la extención de chrome para grild

GRILLA

Una grilla de logo es una herramienta que se usa para crear formas con armonía geométrica en el proceso del diseño de un logo. Las grillas de logo son, con frecuencia, llamadas guías de construcción, dependiendo de la forma en que las líneas de la grilla (o guía) son usadas.

Hola a todos,
pueden pasar por el curso de CSS Grid con Leonidas por si quieren ampliar acerca del tema.

Samanta, ¿qué tema usas en VSCode?

Gracias platzi!!!

Layout
Grilla: Sistema de columnas para organizar nuestros elementos

Excelente explicación para aplicarlo en sass

Para los que tengan problemas para compilar deben desgraduar su version de nodejs y npm lo pueden hacer con nvm.

Me parece que esta instructuroa es super puntual con lo que dice, y es genial eso.

La mejor herramienta de CSS para crear una grilla es Grid.

Se denomina sistema de grillas a una estructura conformada por líneas verticales y horizontales que se intersectan. En el diseño web sirven para colocar y alinear contenido de modo que la layout no luzca desordenada y hasta cierto punto para guiar la vista de los usuarios.

Breakpoints

Que interesante es Grid, sin duda hace la vida más fácil para ciertas cosas que con Flexbox puede ser un poco más complicado.

Un buen sistema de grillas nos ayuda a ajustar los componentes.

15. Layout y sistema de grillas:

Es necesario definir los breakpoints (para los media queries), y podamos adaptar el tamaño de la pantalla.

Dependiendo de esto puedes cambiar la cantidad de columnas (columns), y el gap (column-gap), para entender esto tienes que haber visto CSS con Grid, Flex y Responsive Design, de lo contrario es complejo entender esto.

Una vez establecemos la grilla podremos colocar los componentes dentro, esto es un tema bastante amplio que se debe profundizar en otros cursos (CSS: Flex, Grid y Responsive Design).

Aquí es preciso ahondar mas

Layout y sistema de grillas
Una grilla es un sistema de columnas que nos ayuda a adaptar nuestros componentes dependiendo del tamaño de pantalla y su resolución.

Para los que se preguntan que es "SASS"
Es un preprocesador que nos ayuda a escribir CSS de forma más rápida y hacerlo más más comprensible para tu equipo de desarrollo. Esto haré que sea sea más fácil organizar los estilos que deseemos utilizar.

Interesante!

gran clase!

Los Breakpoints que menciona la profe Samanta significan el ancho de pantalla de diferentes dispositivos

(Responsive Viewer) Les comparto otra extensión para ver las grillas en responsive.

Super interesante este tema de layout y sistemas de grillas, muy complejo a simple vista, a practicar !

Interesante!

Qué es una grilla

Para que el CSS Grid Overlay empiece a funcionar es probable que primero se deba cerrar el navegador y volver a abrirlo. Así funcionó para mi!

Son muy útiles estas grillas, ¡Gracias por la información! #NSL

Ahora con mas ganas quiero aprender Sass :3

Grilla: Sistema de columnas.

Muy interesante