A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Estilos a la lista de productos

16/21
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 鈥榓ngular.json鈥 en la ra铆z de tu proyecto

Aporte creado por: Kevin Fiorentino.

Aportes 24

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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

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

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

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

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

Angular es Genial 馃槂

//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鈥揼rid {
display: flex;
flex-direction: column;
div {
img {
width: 100%;
border-radius: 10px;
}
h2, p {
margin: 0;
}
}
}

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

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

Estoy usando css y qued贸 algo as铆

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鈥揼rid 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;
    }
}

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