Grid System con Sass

Clase 38 de 42 • Curso de Preprocesadores CSS

Contenido del curso

Introducción

Evolución de las Tecnologías de Front-End

Preprocesadores para HTML

Less

Sass

Stylus

Desarrollo del proyecto Platzi Games

Conclusiones y Cierre

42
Conclusiones y Cierre
01:24 min

Tomar examen

Resumen

Grid es una nueva característica de CSS que nos permite trabajar con layouts controlando sus filas y columnas de forma multidimensional. A diferencia de como se hace tradicionalmente con flex de forma unidimensional.

Comentarios

Cristian Orozco Benjumea

student•

Para no tener que estar colocando el margin de 20px en cada caja. Podemos usar:

.contenedor--home {
 ...
    grid-gap: 20px;
    
}

Camilo Prieto

student•

Excelente, aunque ya no se hace uso de grid-gap ahora es con solo gap

.contenedor--home {
 	gap: 20px;
}

Addi Alberto Salazar Espinosa

student•

Bien! :D

Tomas Salina

student•

Ac{a el codigo completo:

.contenedor--home {
	height: 1200px;
	width: 1300px;
	margin: 0 auto;
	@include display-grid;
	@include grid-template-columns(1fr grid-repeat(3));
	@include grid-template-rows(1fr grid-repeat(3));
}

.caja--grande {
	@include grid-row(1,3);
	@include grid-column(1,4);
}

.banner--homepage {
	@include grid-row(2, 4);
	@include grid-column(4, 5);	
}

.sidebar--listado {
	@include grid-row(3, 5);
	@include grid-column(1, 2);	
}

.caja-zelda {
	@include grid-row(3, 4);
	@include grid-column(2, 4);	
}

.caja-rdr2 { 
	@include grid-row(1, 2);
	@include grid-column(4, 5);	
}

.caja-ff { 
	@include grid-row(4, 5);
	@include grid-column(2, 3);	
} 

.caja-fortnite { 
	@include grid-row(4, 5);
	@include grid-column(3, 4);	
} 

.caja-xbox { 
	@include grid-row(4, 5);
	@include grid-column(4, 5);	
}

Addi Alberto Salazar Espinosa

student•

Super! :)

Víctor Hugo Torres Fierro

student•

Muchas gracias amigo! me ahorraste tiempo.

Saludos.

Jhean Pacheco

student•

Prefiero usar el nativo dentro de sass xD, creo que se complica todo y solo por dar soporte a IE xD algo un poco absurdo

Jorge Ossa

student•

Estoy totalmente de acuerdo, ademas si activas el autoprefixer en prepros te crea esos prefijos y si trabajamos con algun bundler como Parcel o Webpack se puede usar postcss para crear esos prefijos.

Aaron Joel Limachi Quispe

student•

Eso se acabará pronto tras el anuncio de Microsoft para jubilar a Interntet Explorer este año.

Cristian Orozco Benjumea

student•

Siempre he sido amante de CSS Grid desde que lo conocí

fermin martin

student•

Plantilla de grid 👇

Beatriz Pérez Santana

student•

Los valores de grid-template-columns y grid-template-rows también se pueden poner de esta manera:

@include grid-template-columns(grid-repeat(4));
@include grid-template-rows(grid-repeat(4));

Porque el mixin recibe por parámetro: - el número de veces que se va a repetir el valor que pongas - y el valor (si no pones el segundo parámetro, que es el valor, tomará por defecto 1fr)

@function grid-repeat($repeat, $stuff: 1fr) {
  $list: ();
  @for $i from 1 through $repeat {
    $list: append($list, $stuff, space);
  }
  @return $list;
}

Gonzalo Pimentel

student•

Bueno definitivamente me quedo con Sass....

Platzi Team

student•

Yo supongo que Walter lo habrá hecho con base en su experiencia. Sólo tomalo del repositorio del proyecto y agregalo a tu arsenal de herramientas junto con el reset.css, etc.

Addi Alberto Salazar Espinosa

student•

x2 c:

Anfernee Valera

student•

no se porque pero me parece tedioso usar el mixin xd

Jhon Alexander Romero Gonzaga

student•

Uilizar margin con CSS Grid no es una mala practica pero sie va a ser un dolor de cabeza, para los CSSGrid Layout se utiliza grid-gap

grid-gap: espacio_entre_filas / espacio_entre_columnas

Nicolas ortiz suarez

student•

Que quiere decir cada que dice " voy a salvar"?

David Santiago Diaz

student•

Hola ✌ El utiliza la expresión "voy a salvar" para referirse que va a guardar el archivo para que compile correctamente: (crt + s). 😀

Espero haberte ayudado. 😉

Nicolas ortiz suarez

student•

Aaaaah, entiendo, muchas gracias por tu ayuda.

Andres Velasquez

student•

Grid organiza los elementos en general a traves de columnas y filas. Flexbox organiza elemento por elemento, su alineación posición.

Grid y Flexbox la mejor combinación.

Andres Velasquez

student•

Aclaración:

Filas sentido horizontal

colunmas sentido vertical

Xiomara Alejandra Hernández Arzola

student•

Me quede pensando lo mismo, y he notado que en otros cursos pasa lo mismo. Tratan las filas como columnas y viceversa.. Desde que comence a aprender CSS, el uso de grid no me queda muuuy claro :(

César Palma

student•

las columnas son verticales como las de un edificio, las filas horizontales como los pisos del edificio

Hugo Alejandro Franco López

student•

Hubo errores por parte del profesor al definir donde empieza la columna y donde termina al momento de explicar.

Jhonatan David Ibarra Lavado

student•

¿técnicamente de donde uno saca ese archivo de grid?

Efraín Hernández García

student•

Son mixins que sirve para usar con Sass y podamos implementar Grid más fácil. Puedes buscarlo por internet pero aquí el profe ya nos lo da 😄

Jorge Cruz Perez

student•

Por lo que comenta en el video fue desarrollado por CSS-Tricks, y si entras a su pagina ofrecen información de flex, grid, etc m uy padre, visualmente muy legible. , saludos :)

Eliezer Hernandez

student•

Aun se utiliza el preprocesador de html pug en la actualidad?

Héctor Eduardo López Carballo

student•

Hola!

Yo no le invertiría tanto tiempo en aprenderlo, aunque sí he visto proyectos que lo usan, no han sido tantos. Además puedes preocuparte de entenderlo más adelante que tengas más experiencia y tengas que realizar algún proyecto con eso.

Eliezer Hernandez

student•

Hola @hec_lopz y que tal SASS? si se sigue teniendo demanda?, gracias por tomarte el tiempo de responder a mis preguntas.

David Alejandro García Graterón

student•

Yo puse para probar el @import "componentes/grids.scss"; al final y me produce un error , de Undefined mixin. y después lo puse en la misma linea y me funciono. Por que se debe eso ? hay una explicación lógica?

Alejandro Luján

student•

Por lo que entiendo, pusiste el @import al final del documento, y te daba error, era porque estabas utilizando componentes de el import antes de que los importaras, y a la hora que se ejecuta el código, no encontraba esos mixins hasta que los importabas al final del Documento

Jorge Cruz Perez

student•

Adicional a lo que comenta Alex, también es importante hacer un análisis ya que dado que css se basa en cascada, y a menos que se haya establecido otra mayor especificidad, el que vaya antes ayuda a mantener esa prioridad en los estilos. Nuevamente se debe uno basas en un análisis previo, porque depende de tu proyecto. Saludos :)

Tomas Salina

student•

Llega un momento en el que resulta algo tedioso tener demasiados componentes de sass. ¿Que opinan?

Luis Lira

student•

Hola!

La parte de los componentes es opcional, la ventaja con SASS y con poder modularizar tu código de estilos por componentes es que es más fácil editar los estilos cuando se trata de proyectos grandes o cuando son componentes que tienen muchos estilos internamente.

Jorge Cruz Perez

student•

Desde otro punto de vista considero que es mas fácil administrar tu pagina, eso si se requiere tener muy buena administración y organización de lo mismos. Creo que también tiene que ver con la practica, cuanto mas se tenga es mas fácil ver las bondades, saludos :)

Franco Nahuel Paez

student•

Me parece genial lo del Mixin que menciona en el minuto 6:20, pero lo veo sumamente inutil, porque si quiero hacer que las columnas se repitan X cantidad, en lugar de escribir

grid-template-column: (1fr grid-repeat(X));

podemos hacer

grid-template-column: (repeat(X, 1fr));

a mi parecer se ahorran hasta mas caracteres

Kevin Andres Curruchich Xocop

student•

Gracias por el aporte 👍

Christian Quilagüy Díaz

student•

usando el mixin puede queda un pco mas corto

 @include grid-template-rows(grid-repeat(4)); 
/*1fr 1fr 1fr 1fr*/

Por defecto quedan de 1fr

Héctor Aguilar Mogollan

student•

va bien el proyecto, aunque se me generaron dos contenedor--home no se porque, jajajaja espero resolverlo pronto!

David Antonio Garcia Saaib

student•

Ahí les va el código sin usar los mixins de grid, pero si usando grid ;D

Eso si hice un nuevo mixin y modifique el orden del archivo index.pug

/* _homepage.scss */
@mixin position-absolute {
	position: absolute;
	top:0;
	right: 0;
	left: 0;
	bottom: 0;
}

.contenedor--home {
  width: 1300px;
  height: auto;
  border: 2px solid blue;
  margin: auto;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, 18rem);
  gap: 20px;
}

.caja__imagen {
  img {
    z-index: -1;
    width: 100%;
    height: 100%;
    @include position-absolute;
  }
}
.caja--con-fondo {
  position: relative;
  overflow: hidden;
}
.caja--grande {
  grid-column: span 3;
  grid-row: span 2;
}
.caja--pequena {
  grid-column: span 1;
  grid-row: span 1;
}
.caja--mediana {
  grid-column: span 2;
  grid-row: span 1;
}
.banner--homepage {
  grid-column: span 1;
  grid-row: span 2;
  border: 1px solid red;
}

orden de los archivos en index.pug

	main.contenedor--home
		+caja--con-fondo-grande
		+caja--con-fondo-pequena 
		.banner--homepage
		.banner--homepage.sidebar--listado
		+caja--con-fondo-mediana
		+caja--con-fondo-pequena
		+caja--con-fondo-pequena
		+caja--con-fondo-pequena

.contenedor--home {
	height: 1200px;
	width: 1300px;
	margin: 0 auto;
	@include display-grid;
	@include grid-template-columns(1fr grid-repeat(3));
	@include grid-template-rows(1fr grid-repeat(3));
}

.caja--grande {
	@include grid-row(1,3);
	@include grid-column(1,4);
}

.banner--homepage {
	@include grid-row(2, 4);
	@include grid-column(4, 5);	
}

.sidebar--listado {
	@include grid-row(3, 5);
	@include grid-column(1, 2);	
}

.caja-zelda {
	@include grid-row(3, 4);
	@include grid-column(2, 4);	
}

.caja-rdr2 { 
	@include grid-row(1, 2);
	@include grid-column(4, 5);	
}

.caja-ff { 
	@include grid-row(4, 5);
	@include grid-column(2, 3);	
} 

.caja-fortnite { 
	@include grid-row(4, 5);
	@include grid-column(3, 4);	
} 

.caja-xbox { 
	@include grid-row(4, 5);
	@include grid-column(4, 5);	
} 

/* _homepage.scss */
@mixin position-absolute {
	position: absolute;
	top:0;
	right: 0;
	left: 0;
	bottom: 0;
}

.contenedor--home {
  width: 1300px;
  height: auto;
  border: 2px solid blue;
  margin: auto;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, 18rem);
  gap: 20px;
}

.caja__imagen {
  img {
    z-index: -1;
    width: 100%;
    height: 100%;
    @include position-absolute;
  }
}
.caja--con-fondo {
  position: relative;
  overflow: hidden;
}
.caja--grande {
  grid-column: span 3;
  grid-row: span 2;
}
.caja--pequena {
  grid-column: span 1;
  grid-row: span 1;
}
.caja--mediana {
  grid-column: span 2;
  grid-row: span 1;
}
.banner--homepage {
  grid-column: span 1;
  grid-row: span 2;
  border: 1px solid red;
}

	main.contenedor--home
		+caja--con-fondo-grande
		+caja--con-fondo-pequena 
		.banner--homepage
		.banner--homepage.sidebar--listado
		+caja--con-fondo-mediana
		+caja--con-fondo-pequena
		+caja--con-fondo-pequena
		+caja--con-fondo-pequena 

Grid System con Sass

Introducción

Qué aprenderás sobre preprocesadores

Conceptos básicos de CSS

Selectores de CSS

Evolución de las Tecnologías de Front-End

Introducción a los Preprocesadores

Metodologías para estructurar código

Introducción a BEM

Guías para creación y mantenimiento de código

Instalación de herramientas de compilación

Preprocesadores para HTML

Introducción a Pug

Sintaxis

Interpolación

Variables

Condicionales y Loops

Mixins

Includes y Extends

Finalizando ejercicio de Landing Page

Less

Introducción a Less

Anidamiento e imports

Variables

Funciones

Mixins

Finalizando ejercicio de página de artículos

Sass

Introducción a Sass

Variables

Imports y Extends

Mixins

Funciones

Condicionales y Loops

Finalizando ejercicio de perfil de usuario

Stylus

Introducción a Stylus

Variables

Mixins

Funciones

Condicionales y Loops

Desarrollo del proyecto Platzi Games

Introducción al proyecto

Plantillas modulares con PUG: Header

Plantillas modulares con PUG: Footer