Estilos a la lista de productos

Con esto va’:

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

Comparto mi código, cualquier retro alimentación es bienvenida.

//Tablets
@media screen and (min-width: 40em) {
  .products--grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
//Desktop
  @media screen and (min-width: 62em) {
    .products--grid{
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-gap: 15px;
      }
  } 

si al inicio lo crearon con css como yo jajajaj con este comando pueden mudar todod a scss
ng add schematics-scss-migrate
desde la ruta del proyecto

Comparto mi código de css con sass para quienes al inicio eligieron sass en lugar de scss.

.box
    height: 200px
    width: 200px
    overflow: auto
    background: red

.product--grid
    display: flex
    flex-direction: column
    div 
        img
            width: 100%
            border-radius: 10px
        h2, p
            margin: 0

@media (min-width: 30em) and (max-width: 40em)
    .product--grid
        display: grid
        grid-template-columns: repeat(4, 1fr)
        grid-gap: 15px

@media screen and (min-width: 40em)
    .product--grid
        display: grid
        grid-template-columns: repeat(5, 1fr)
        grid-gap: 15px

Estoy usando css y quedó algo así

No hay necesidad de usar media queries cuando puedes modificar tus propiedades de flex o grid.
Adicional, agregué un height a las imágenes y un object-fit: cover para que todas queden igual visualmente.

.products--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
  div {
    img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      border-radius: 10px;
    }
    h2,
    p {
      margin: 0;
    }
  }
}

//ESTILOS PARA LISTA DE PRODUCTOS
.products--grid {
  display: flex;
  flex-direction: column;
  div {
    img {
      width: 100%;
      border-radius: 10px;
    }
    h2, p {
      margin: 0;
    }
  }
}
//crear mediaquery para tablet con 4 columnas
@media screen and (min-width: 768px) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}
@media screen and (min-width: 992px) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
  }
}

@media (max-width:768px) {
  .products--grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 15px;
  }
}

@media screen and (min-width:769px){
  .products--grid{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-gap: 15px;
  }
}

Estilos a la lista de productos

En este modulo vamos a trabajar en los estilos y la forma como Angular los maneja y como podemos hacer binding de ellos. Usareos algunos estilos sencillos usando sass y los aplicaremos a nuestra lista de items de la tienda para que se vea como un e-comerce mas profesional.

Paso para aplicar los estilos

• Paso 1 - Debemos agregar una clase al tag html para poder enlazar los estilos al html.

<div>
    <h1>Products store</h1>
    <!-- En este div le agregamos la propiedad class con el valor de "products--grid" -->
    <div class="products--grid">
        <!-- Aca va el *ngFor de products -->
    </div>
</div>

• Paso 2 - Agregamos el *ngFor dentro de el div con la clase “products–grid”

<div >
    <h1>Products store</h1>
    <div class="products--grid">
        <!-- Agregamos el *ngFor de products -->
        <div *ngFor="let product of products; index as i">
          <img class="productImage" [src]="product.image" [alt]="product.name">
          <h2>{{product.name}}</h2>
          <p *ngIf="product.category">Categoria: <strong>{{product.category}}</strong></p>
          <h3>{{product.price}}</h3>
        </div>
    </div>
</div>

• Paso 3 - Creamos el estilo para dispositivos mocviles “products–grid” en el archivo de estilos app.component.scss

// Estilos para dispositivos moviles
.products--grid {
  display: flex;
  flex-direction: column;
  div {
    img {
      width: 100%;
      border-radius: 10px;
    }
    h2, h3, p {
      margin: 0;
    }
  }
}

• Paso 4 - Creamos los media querys para tablets y desktops en el archivo de estilos app.component.scss

// Estilos para tablets - Muestra 4 elemtnos en tablets
@media (min-width: 30em) and (max-width: 40em) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}

// Estilos para desktops - Muestra 5 elemtnos en Desktops
@media screen and (min-width: 40em) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
  }
}

Al final en dispotivos moviles quedaria de la siguiente forma:

En tablets asi:

Y en desktops asi:

Modifiqué tanto para Tablets como para Laptops hacia arriba:

// Tablets
@media screen and (min-width: 768px) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}

// Laptops hacia arriba
@media screen and (min-width: 1024px) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
  }
}

Angular es Genial 😃

Hola la verdad no entendi a la primera ese @media por las medidas de em que utilizaba pero depues de buscar y probar pude entener el comportamiento el cual funciona de la siguiente forma:

min-width: 40em modifica una vez la pantlla es mayor a la medida que corresponde a los 40em aplica el estilo que definimos por lo cual aplique dos diferentes medidas de esta forma,

@media screen and (min-width: 46em) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
    div {
      img {
        width: 100%;
        border-radius: 10px;
      }
      h2, p {
        margin: 0;
      }
    }
  }
}


@media screen and (min-width: 55em) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
    div {
      img {
        width: 100%;
        border-radius: 10px;
      }
      h2, p {
        margin: 0;
      }
    }
  }
}

EL MEJOR PROFESOR GRACIAS DE VERDAD, ESTOY MUY FELIZ DE PODER AVANZAR Y APRENDER. GRACIAS EXPLICAS MUY BIEN. DE VERDAD

<code> 
.products-grid {
                    display: flex;
                    flex-direction: column;
                    app-product {
                        img {
                            width: 100%;
                            border-radius: 10px;
                        }
                        h2,
                        p {
                            margin: 0;
                        }
                    }
                }

                @media (min-width: 26em) {
                    .products-grid {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        grid-gap: 15px;
                    }
                }

                @media (min-width: 37em) {
                    .products-grid {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        grid-gap: 15px;
                    }
                }

                @media (min-width: 64em) {
                    .products-grid {
                        display: grid;
                        grid-template-columns: repeat(4, 1fr);
                        grid-gap: 15px;
                    }
                }

.box
    height: 200px
    width: 200px
    overflow: auto
    background: red

.product--grid
    display: flex
    flex-direction: column
    div 
        img
            width: 100%
            border-radius: 10px
        h2, p
            margin: 0

@media (min-width: 30em) and (max-width: 40em)
    .product--grid
        display: grid
        grid-template-columns: repeat(4, 1fr)
        grid-gap: 15px

@media screen and (min-width: 40em)
    .product--grid
        display: grid
        grid-template-columns: repeat(5, 1fr)
        grid-gap: 15px

Así quedó el .scss, en ese orden. Primero mobile, despues tablet y al ultimo desktop para que tome los estilos correctamente.

// Mobile
.products--grid {
    display: flex;
    flex-direction: column;    

    div {
        img {
            width: 100%;
            border-radius: 10px;
        }
        h2, p {
            margin: 0;
        }
    }
}
// Tablet
@media screen and (min-width: 30em) {
    .products--grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 15px;
    }
}

//Desktop
// No es necesario poner el display de nuevo ni el gap por los hereda del otro.
@media screen and (min-width: 40em) {
    .products--grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

Diseño Movile first

/*Diseño para tablets*/
@media and screen (min-width:40em){
	.products--grid{
		display:grid;
		grid-template-columns: repeat(4,1fr);
		grid-gep:15px;
	}
}

/*Diseño para desktop*/
@media and screen (min-width:50em){
	.products--grid{
		grid-template-columns: repeat(5,1fr);
	}
}

ya no es necesario añadir el “display” del elemento en desktop debido a que ya establecido en el media query de tablets, al igual que el espaciado “gap”

Elemental el concepto: Mobile first!!

Mi codigo para diferentes tamaños en el medio query:

.products--grid{
    display: flex;
    flex-direction: column;
    div{
        img{
            width: 100%;
            border-radius: 12px;
        }
    }
    h2, p{
        margin: 0;
    }
}

@media screen and (min-width: 20em) and (max-width: 22em){
    .products--grid{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 15px;
    }
}

@media screen and (min-width: 22em) and (max-width: 24em){
    .products--grid{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-gap: 15px;
    }
}
@media screen and (min-width: 24em)and (max-width: 26em){
    .products--grid{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-gap: 15px;
    }
}
@media screen and (min-width: 26em){
    .products--grid{
        display: grid;
        grid-template-columns: repeat(5,1fr);
        grid-gap: 15px;
    }
}

Mi solución:

@media screen and (min-width: 40em){
	.products--grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 15px;
	}
}
@media screen and (min-width: 62em){
	.products--grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

mi css quedo

.products--grid {
  display: flex;
  flex-direction: column;
  div {
    img {
      width: 100%;
      border-radius: 10px;
    }

    h2,
    p {
      margin: 0;
    }
  }
}

@media (min-width: 40em) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}

@media (min-width: 62em) {
  .products--grid {
    grid-template-columns: repeat(5, 1fr);
  }

}

Supongo que así está bien:

/*mobile*/
.products--grid {
  display: flex;
  flex-direction: column;
  div {
    img {
      width: 100%;
      border-radius: 10px;
    }
    h2, p {
      margin: 0;
    }
  }
}

/*tablet*/
@media screen and (min-width: 40em) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
  }
}


/*desktop*/
@media screen and (min-width: 80em) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
  }
}

Falta el ejemplo de Objetos

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

@media screen and (min-width: 40em) {
  .products__grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}
@media screen and (min-width: 62em) {
  .products__grid{
    grid-template-columns: repeat(5, 1fr);
  }
}

me encanta todo lo que aprende en esta sola clase

Honestamente no puedo aportar porque estoy estudiando cosas de CSS basico para ir poco a poco. pero estos estilos poco a poco estoy viendo lo utiles que son.

proyecto app
proyecto code

.productos-grid{
display: flex;
flex-direction: column;
  div{
    img{
      width: 100%;
      border-radius: 10px;
    }
    h2, p{
      margin: 0;
    }
  }
}
@media screen and (min-width: 30em) {
  .productos-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;}
}
@media screen and (min-width: 60em) {
  .productos-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;}
}

@media screen and (min-width: 488px){
  .products-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}

@media screen and (min-width: 730px){
  .products-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
  }
}

‘grid-gap’ está obsoleto. Pueden utilizar ‘gap’ en su lugar.
Al margen de eso, yo daría estilo a la clase products–grid de la siguiente manera:

.products--grid{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  div {
    margin: 20px;
    img {
      width: 200px;
      height: 200px;
      object-fit: cover;
      border-radius: 10px;
    }
    h2, p {
      margin: 0px;
    }
  }
}

Hola clase, lo propuesto quedaría más o menos así:

// Tablet
@media screen and (min-width: 40em) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}

// Desktop
@media screen and (min-width: 50em) {
  .products--grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

Saludos cordiales…

.box {
    height: 200px;
    width: 200px;
    overflow: auto;
    background: red;
}

.courses--grid {
    display: flex;
    flex-direction: column;
    div {
        img {
            width: 100%;
            border-radius: 10px;
        }
        h2 {
            margin: 0;
        }
    }
}

// Tablets
@media screen and (min-width: 768px) {
    .courses--grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 15px;
    }
}

// Desktop
@media screen and (min-width: 1024px) {
    .courses--grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

Subo la apuesta:

.product--grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%,20rem) ,1fr));
  gap: 1rem;
}

hice algo mas dinámico para que se adapte al tamaño de pantalla

.product--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  place-content: center;
  grid-gap: 15px;
  div {
    img {
      width: 100%;
    }
    h2, p{
      margin: 0;
    }
  }
}

@media (min-width: 40em)  {
  .product--grid {
    grid-template-columns: repeat(auto-fill, 200px);
  }
}

/* 40em -> medida estandar de tablet */
@media screen and (min-width: 40em)
  .products--grid
    display: grid
    grid-template-columns: repeat(4, 1fr)
    grid-gap: 15px
    /* espacios entre filas */
    div
      img
        width: 100%
        border-radius: 10px
      h2, p
        margin: 0
  @media screen and (min-width: 62em)
    .products--grid
      grid-template-columns: repeat(5, 1fr)

Mi aporte asi me quedo el codigo para celulares, tablets y PC 😀

//SCSS

.box {
  height: 200px;
  width: 200px;
  overflow: auto;
  background: rgb(110, 63, 63);
}

//
hr {
  background-color: red;
  height: 10px;
}

h1 {
  color: blue;
}

.productGrid {
  background-color: rgb(240, 216, 216);
  display: flex;
  flex-direction: column;
  div {
    img {
      width: 100%;
      border-radius: 10px;
      box-shadow: 7px 6px 13px -5px rgba(0, 0, 0, 0.75);
      -webkit-box-shadow: 7px 6px 13px -5px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: 7px 6px 13px -5px rgba(0, 0, 0, 0.75);
    }
    h2 {
      margin: 0;
      font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
        "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    }
    p {
      color: rgb(114, 106, 106);
      font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
        "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
      margin-top: 0;
    }
  }
}

@media screen and (min-width: 768px) {
  .productGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}

@media screen and (min-width: 992px) {
  .productGrid {
    grid-template-columns: repeat(5, 1fr);
  }
}

Comparto mi código.

• {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

html {
font-size: 62.5%;
}

.box {
height: 11.25rem;
width: 11.25rem;
overflow: auto;
background: red;
}
.products–grid {
display: flex;
flex-direction: column;
div {
img {
width: 100%;
border-radius: 10px;
}
h2, p {
margin: 0;
}
}
}

//* Tablet *//
@media screen and (min-width: 30rem) {
.products–grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 15px;
}
}

//* Desktop *//
@media screen and (min-width: 48rem) {
.products–grid {
grid-template-columns: repeat(5, 1fr);
}
}

Algo asi quedaria

        // ! 40em es la medida estandar para tablets en adelante

@media screen and (min-width: 40em) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}


    // ! 1024px para pantallas desktop

@media screen and (min-width: 1024px) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
  }
}

de esta forma me resulto en scss:

<h1>*ngFor Objs</h1>
<div class="products--grid" [style.grid-template-columns]="'repeat(5,  1fr)'">
  <div *ngFor="let product of products">
      <img width="250" [src]="product.image" alt="image">
      <h2> {{ product.price}} </h2>
      <p> {{ product.name}} </p>    
  </div>    
</div>

Así ajuste mi CSS para tablets y desktop

@media screen and (min-width: 40em) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}

@media screen and (min-width: 1024px) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
  }
}

El reto:
Lo hice con el mismo formato que se realizó en la clase, solo que a este @media le asigné un maximo
y un minimo de width para que se mostraran 4 imagenes.
Ya que desde 0em a 30em será considerado con el .products–grid de mobiles.
De 30em a 40em se mostrarán 4 imagenes y de 40 para arriba lo tomará el display de 5 imagenes.

@media (min-width: 30em) and (max-width: 40em){
    .products--grid{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 15px; 
	}
}

Esto se agregó debajo del @media ya hecho en clases.

Tablets y desktop

//Tablets
@media screen and (min-width: 40em) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}

//Desktop
@media screen and (min-width: 64em) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
  }
}

<code> 
.products--grid{
  display: flex;
  flex-direction: column;
  div{
    img{
      width:100%;
      border-radius:10px;
    }
    h2,p{
      margin: 0;
    }
  }
}
//table
@media screen and (min-width: 30em) {
  .products--grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 15px;
  }
}
//Desktop
@media screen and (min-width: 62em) {
  .products--grid{
    grid-template-columns: repeat(5,1fr);
  }
}

@media (min-width: 30em) and (max-width: 40em){
    .products--grid{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 15px; 
	}
}

Este sin duda es el mejor de los cursos, FELICITACIONES. Absorbiendo conocimiento Nicolas!

// 3 Columnas para Tablet
@media screen and (min-width: 768px) {
    .products--grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

// 5 Columnas para Desktop
@media screen and (min-width: 992px) {
    .products--grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
    }
}