Grid System con Sass

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

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

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);	
} 

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

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

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;
}

Plantilla de grid 👇

Bueno definitivamente me quedo con Sass…

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

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

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

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

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 

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

Como El tocayito lo estaba haciendo en el video me generaba un Error cuando compilaba. el _homepages.scss …el error me lo generaba en @include display-grid…entonces le agregue antes de todo el codigo @import ‘grids’; que es donde esta todo lo relacionado con grid y así fue que pude solucionar ese error

Genial, todo bien por el momento

Aclaración:

Filas sentido horizontal

colunmas sentido vertical

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.

Ofrece alguna mejora usar CSS grid con Sass o es mejor usar el grid nativo de CSS?

Minuciosa aclaratoria:

• Flexbox es unidimensional.
• Grid es bidimensional.

pero que se gana con hacerlo todo con mixin en vez de nativo? lo veo igual

no se porque pero me parece tedioso usar el mixin xd

n

¿El grid no debería de ser de 4 x 4 en lugar de 3 x 3 ?

Excelente! 😛

_homepages.scss

.contenedor--home {
    height: 1200px;
    width: 100%;
    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(3,5);
    @include grid-column(4,5);
}

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

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

.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);
}

no creo que a ustedes les pasen estos errores tan tontos como a mi paso

    @include grid-template-columns(1fr grid-repeat(3)); 
    @include grid-template-rows(1fr grid-repeat(3)); 

cuidado con el 1fr ya que puse fue 1 f y no servia jaja

Epa, buena info!

Sigamos

Me gusta que los cursos retomen conocimiento de otros para poder repasarlo.