No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Estilos a la lista de productos

16/22
Recursos

En el decorador de tu componente, verás la propiedad styleUrls donde se hace referencia a la hoja de estilos que el componente utiliza.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
    ...
}

En este archivo puedes escribir todo el código CSS que tu componente necesita. Por ejemplo, si escogiste SCSS:

div {
    margin: 15px;
    h1 {
        font-family: Arial;
        font-size: 22px;
        font-weight: bold;
    }
    p {
        font-family: Arial;
        font-size: 18px;
        padding-bottom: 10px;
    }
}

Preprocesadores de CSS

Dependiendo el preprocesador que hayas elegido, tus hojas de estilos tendrán una extensión u otra. A excepción de .css si no escogiste utilizar un preprocesador.

tabla preprocesadores.png

TIP: Para escojer otro preprocesador, puedes realizar este cambio manualmente en el archivo ‘angular.json’ en la raíz de tu proyecto

Aporte creado por: Kevin Fiorentino.

Aportes 53

Preguntas 9

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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:

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

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 😃

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.

asi quedo… comparto mi codigo de estilos

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

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);
    }
}
```css .products-grid{ display: flex; flex-direction: column; div{ img{ width: 100%; border-radius: 10px; } h2, p { margin: 0; } } } @media screen and (min-width: 25em) and (max-width: 50em){ .products-grid{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 15px; } } @media screen and (min-width: 51em) { .products-grid{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 15px; } } ```.products-grid{ display: flex; flex-direction: column; div{ img{ width: 100%; border-radius: 10px; } h2, p { margin: 0; } }}*@media* screen and (min-width: 25em) and (max-width: 50em){ .products-grid{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 15px; }}*@media* screen and (min-width: 51em) { .products-grid{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 15px; }}

¿Por qué usó (min-width: 40em) en lugar del clásico (min-width: 640px)? Bueno, esto se realiza para tener más escalabilidad, flexibilidad y accesibilidad. Puedes comprobarlo en tu dispositivo jugando con el tamaño de fuente de tu navegador, para que puedas notar la diferencia. Si me equivoco, puedes corregirme que estaré encantado de leerte.

Esta es mi configuración

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

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.

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

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