Con esto va’:
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
Primeros pasos
Qué es Angular 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
Despedida
Continúa con el Curso de Angular: Componentes y Servicios
Deploy
Despliegue con Firebase Hosting
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
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 24
Preguntas 2
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.
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);
}
}
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–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;
}
}
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;
}
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.