Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Trabajando la sección de post

18/26
Recursos

Aportes 94

Preguntas 10

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Hola compañeros, Le comparto como va quedando Mi Blog, agregando unos recursos extras.

![](

Otra forma de hacer esta sección es haciendo uso del display grid, ya que de esto iría el curso.
En resumen, para lograr el mismo resultado debemos modificar un poco el html y hacer el uso de:

display: grid;
grid-template-columns: repeat(auto-fill, 300px);
grid-gap: 10px;

Adjunto los archivos para que entiendan de una forma mas clara: Enlace

Comparto como va quedando el mio

Para que los blogs quedaran centrados, quité el padding que tenía cada article e hice una clase contenedora de artículos con las siguientes propiedades:

.blogs-posts-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

Resultado:


.
Repositorio en Github

Comparto como va quedando mi blog.

Aqui esta mi tarea completada!!

Listo, cambio de imagenes exitoso

En el reto la parte de los posts (articulos) lo hice con grid y preferí utilizar gap para ese espacio de los articulos.

Reto cumplido.
Debo decir que lo estoy haciendo igual que el diseño del curso.
Pero hare un proyecto propio para seguir practicando cuando acabé este 😄

Me gusto esta clase 👌

Otra forma de hacer la sección de blogs-posts-container, es utilizando display grid;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;



Les comparto mi version 😁
.

.

.

Así quedó el mío:

Que tal campeon… buen dia.

solo display:grid… muy satisfecho con la maquetacion…

claro que le hace falta pulir unos detalles de box-shadow en los cards pero de ahi mas increible…

latest.

Este es mi trabajo. vamos poco a poco 😃

esta mejor hacer los blog con grid

/* blog posts seccion */
.blogs-posts-container {
    padding: 0 50px 40px;  
    margin-top: 80px;
}
.blogs-grid-conatiner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 32px;
}
.blog1 {
    grid-column: 1;
}
.blog2 {
    grid-column: 2;
}
.blog3 {
    grid-column: 3;
}
.blogs-posts-container h3 {
    border-bottom: 1px solid #cdd2da;
    padding-bottom: 20px;
    text-align: center;
}
.post-container {
    
    padding-left: 12px;
    
    margin-bottom: 48px;
}
.post-container p {
    margin-bottom: 35px;
}
.post-container img {
    width: 100%;
    height: 320px;
    object-position: center;
    object-fit: cover;
} 

Aquí mi aporte colegas!

Creeria que es mucho mejor hacerlo con grid, de hecho si vemos toda la sección de blogs se comporta como una grilla de 3x2, inclusive para usar las propiedades de grid y que sea mas versatil

si que estoy emocionado raaaaaaaaaaaaaa

Como observación crearía un contenedor para la lista de post con display grid y lo dividria en columnas 1fr 1fr 1fr quitándole esa propiedad a los post-container ya que si vemos el contenido no esta alineado con el h3, hay mas espacio del lado derecho que el izquierdo.

😃

Para dar separación entre las columnas y filas a un elemento con display grid, se puede usar la propiedad grid-gap en los estilos al elemento contenedor.
Les dejo un link donde pueden entender mejor lo que estoy diciendo XD. Saludos
https://www.w3schools.com/cssref/pr_grid-gap.asp

asi es como me quedó:




Mi avance hasta el momento

Se podría haber utlizado un grid con 3 columnas en lugar del viejo inline-block.

Buena clase

Como van en el momento, construido Mobile-First

Les dejo un secreto, para no tener que estar copiando pegando seleccionando etc etc etc, vayan a la parte de arriba de vscode donde dice SELECCION , se les despliega un menu con un monton de funciones como poder sacar varias barras y poder escribir en varias lineas de forma simultanea!

Hasta que el profe deja un reto que si puedo hacer xD
(agregar las imágenes correspondientes)

Para ahorrarse tener que pixelear para ver el color que es, en el curso de ResponsingDesing ensenyan, puedes crear variables en el :root de los colores en css así

:root {
    --verde-cool: #5fc6a6;
    --grey-saturated: #e6e9ed;
    --petter: #cdd2da;
}

y luego las vas llamando, ejemplo

.blogs-news-container {
    background-color: var(--grey-saturated);
    padding: 0 50px 50px;
}

… o por ejemplo

.blogs-button {
    border: 1px solid var(--verde-cool);
    padding: 10px 15px;
    font-size: 12px;
}

Comparte en los comentarios cómo te va quedando

Necesito tomar cursos de diseño x2 jasjasjas

😃 Este curso me esta ayudando mucho 😄 excelente profesor

Hi five mental 🖐🖐

les comparto mi solicion por si tienes dudas

.blogs__button {
    border: 1px solid var(--secundary-color);
    padding: 10px 15px;
    font-size: 12px;
}

.blogs__button:hover {
    color: var(--primary-color);
    background-color: var(--header-text);
}

.grid__container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px);
    gap: 30px;
    justify-content: center;
}

.post__container {
    height: 100%;
}

.grid__container .post__container {
    padding: 5px;
}

.grid__container .post__container p {
    margin-bottom: 35px;
}

.grid__container .post__container img {
    width: 100%;
}

footer {
    width: 100%;
    height: 80px;
    background-color: #22272d;
    border-top: 35px solid var(--primary-color);
}

footer p {
    color: blanchedalmond;
    margin: 10px 10px;
    text-align: center;
} 

comparto como quedo el mio

.blogs-posts-container .post-container {
    display: inline-block;
    padding-left: 10px;
    max-width: 32.5%;
    margin-bottom: 50px;
}

.blogs-posts-container .post-container p {
    margin-bottom: 35px;
}

.blogs-posts-container .post-container img {
    width: 100%;
}

.blogs-posts-container .post-container img + p {
    font-weight: bold;
    padding-top: 15px;
    height: 36px;
}

.blogs-posts-container .post-container p + p {
    height: 130px;
}

footer {
    width: 100%;
    height: 80px;
    background-color: #22272D;
    border-top: 30px solid #47cfac;
}

footer p {
    color: white;
    text-align: center;
    padding-top: 15px;
}

dato curioto xD

inline-block, un curso de CSS Grid básico… clase 18, casi no hay presencia de grid solo para algunas cosas y diría que casi a la fuerza.

Asi me va quedando…

Sin duda grid facilita la vida

Muy práctico el curso.

Que agradable al momento de hacer un solo cuadro y replicarlo después en las veces que necesites, ese momento se llama felicidad…
✅📈🤣🤓👨🏻‍💻💪

Mi código lo hice distinto a la clase pero el resultado fue el mismo a mi parecer

Vamos por más 😄 ya casi está!

Grandisima clase

Sigamos 😄

excelente aunque si veo gracias a mis compañeros el detalle de la alineacion de los post

Excelente hasta el momento. Muy práctico el curso.

estupendo sigamos 😄

Solo con el display: inline-block; y el max width: 30% logró colocar todos los <article> alineados sin necesidad de crear contenedores para los 3 elementos en fila, wow. Me tomaba mucho tiempo con display flex y hacer justify content: space-between de los containers.

Ya tomó la forma. A detallar nada más.

  • Seguí los consejos de @cosmosoftroot e hice los sihuientes cambios y quedó bien centrado:
/*Agregue esta clase CSS*/
.grid-container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
/*modifique esta clase CSS*/
.blogs-posts-container .post-container {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 50px;
}

Yo lo hice con flex y flex wrap, creo que es más rápido.

Reto cumplido

![](

Muy buena clase!

Excelente 😄

me salio asi, aunque en cada articulo si varia el tamanio del contenido de la etiqueta “p”, varian las posiciones. Como lo corrijo?

Falta poco 😊

![](

Listo!!! 😃

ya casi queda 🤠🤠🤠🤠********


Yayyyyyyyyy…😃

![](

Estupenda clase instructor Diego, que claro cómo organizar los distintos artículos en base a su contenedor, acá comportado los resultados del que hice:
   

Me confundí en la parte del home-body, lo veo en la parte de CSS pero no existe ninguna clase en el html, si la elimino me desarma toda mi estructura.

Es mi impresion o el profe elimino el position:fixed de la clase del body?, y por apilamiento se organizaron los 6 articulos del blogspot, por que no estaba declarado con grid?

border-top: 35px solid #47cfac;

Excelente! Asi me quedó a mi

![](

Excelente, clase.

Agregando unos detalles personales, que buen curso.

muy buena clase, a seguir aprendiendo!!!

“hive five mental” jajajjaja, Super profe!

Hi five mental!! 😂

Listo 😃

Vamos mejorando día a día

Ahí va quedando … Genial

genial

Asi quedo!.