Con esto va’:
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
Primeros pasos
Qué es Angular: ventajas y cómo aprenderlo
Instalación de Angular CLI
Comandos de Angular para correr tu proyecto
Estructura de un proyecto en Angular
Conceptos básicos de TypeScript para usar Angular
Comunicación de datos
String interpolation
Property Binding
Introducción al Event Binding de Angular
Otros eventos que puedes escuchar
Data binding con ngModel
Estructuras de control
Uso de *ngIf
Uso de *ngFor
*ngFor para arrays
Uso de *ngSwitch
Angular Devtools
Estilos
Estilos a la lista de productos
Class and style
NgClass y NgStyle
Crear un formulario
Deploy
Despliegue con Firebase Hosting
Despedida
Continúa con el Curso de Angular: Componentes y Servicios
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Nicolas Molina
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;
}
}
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.
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
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
<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>
<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>
// Estilos para dispositivos moviles
.products--grid {
display: flex;
flex-direction: column;
div {
img {
width: 100%;
border-radius: 10px;
}
h2, h3, p {
margin: 0;
}
}
}
// 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);
}
}
✅
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 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.
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;
}
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?