Grid Container

Hola (◠‿◠) comparto mi trabajo, lo voy a daptando a otro tema que elegí

Me hace un poco de ruido que los pos no estén alineados con la línea del título:

Pero se puede solucionar:

Solo debemos aplicar el “text-align” en dos clases:

.blogs-posts-container {
	padding: 0 50px 40px;
	text-align: center;
}

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

Y queda mejor!

Me encanta este curso, el profesor cuida todos los detalles, y el blog esta quedando perfecto!!

grid-container de nuevo innecesario, se llama grid por amor al arte, no hay grid… margin auto para centrar pero sigue con errores de contenido con margin-right. Muy poco preparado este curso, no estoy seguro cuál es el enfoque de este profesor pero maquetar parece que no lo es o no lo hace desde hace mucho, creo que estaría bueno que vea los otros cursos donde se da grid y flex y va a mejorar pila lo que armó porque me parece una lluvia de estilos y etiquetas innecesarios.

Casi me salto esta clase ya que creía que había terminado esta parte, pero no contaba con que max-width es muy importante para mantener la estética del sitio.
No sabes lo que no sabes.

Hice una pequeña modificación en el ccs para la clase grid-container, le agregué text-align: center para que me centrara las tarjetas de los posts. Luego también le agregué text-align: initial a la clase .blogs-posts-container .post-container p para que me alineé los textos a la izquierda.

El resultado funciona, pero me gustaría saber si hay alguna otra forma mejor de hacerlo. Que opinan?

.grid-container {
    max-width: 980px;
    margin: auto;
    text-align: center;
}

.blogs-posts-container .post-container p {
    margin-bottom: 35px;
    text-align: initial;
}```

![](

Así va quedando mi avance hasta el momento.

El efecto de sombra que apliqué a cada sección del post fue:

.post-container {
    background-color: #f6f7f8;
    box-shadow: 5px 5px 10px var(--color-light-green);
    margin: 5px;
    /* border: 1px solid black; */
}

Y el efecto hover del botón es:

.blogs-button {
    display: inline-block;
    margin: 10px 0;
    border: 2px solid var(--color-light-green);
    padding: 10px 15px;
    font-size: 1.2rem;
    transition: all 0.5s ease-out;
}

.blogs-button:hover {
    border: 2px solid white;
    color: var(--color-white);
    background-color: var(--color-primary);
}

Comparto mi avance hasta ahora 😁

les comparto mi progreso en Github
https://github.com/ArzCorp/Blog
lo hago diferente al profesor con la finalidad de practicar, aun me falta aprender a usar bien BEM por si mis nombres de clases los confunden, !perdon!

Aunque estoy haciéndolo exactamente igual que el profe se siente muy cool ver que me va quedando igualito 🤩

Blogs terminado

Aquí les dejo mi versión de la web:
https://maikoldev.github.io/platzi-practico-css/blogs.html
Link al repositorio: https://github.com/maikoldev/platzi-practico-css

Un poco de mi proyecto.

Hasta ahora vengo a entender para qué se usa el max-width! 🤯

Los containers para max width nos permiten mantener un estandar sin importar el ancho en pixeles de la pantalla, al irse reduciendo la pantalla el contenido del container siempre quedara centrado, solo tomar en cuenta un pequeno padding al container en responsive cuando sea necesario, hay secciones que en algunos disenos siempre ocupan el 100, por eso es buena idea que aunque el container sea general se haga como lo pone Diego y se coloque individualmente en cada container, nos da mas control en responsive

Parecido a lo que hace boostrap con la clase container, aunque claro, Boostrap ya se encarga de todo

Excelente explicación instructor Diego, con estos ajustes el proyecto se ve mucho mejor

Que importante es delimitar nuestro max-width

Super!!!

Me gusta el tiempo que le da a cada, cosa. Se entiende mejor y no me siento presionado aprendiendo.
Se agradece.

Listo papa solucionado los bugs de la vista en horizontal en celular, básicamente esta dándole un tamaño definido a los blogs pero esto hacia que en un celular se saldría del espacio establecido, lo que hice fue darle porcentajes. XD

QUe locura

las variables son infitintas podemso cambiar colores formar contenido titulos letras tamaños etc etc el mundo es nuestro

Excelente consejo profesor Diego De Granda!

Comparto mi proyecto

Versión desktop

Versión mobile

Y el rato que reduzco el tamaño de mi pantalla ahi es cuando se va todo al c4r4jo ajaja ya que hize a mi manera que eso entiendo ya posicionar maquetar, el problema me surge para que se haga responsive cuando reduce la pantalla 😦

que tal buen dia… campeon, coparto mi avance…

Este bien el curso, pero si has tomado los anteriores cursos de Diego como el curso definitivo de HTML y CSS este tiene varias cositas malas

Así quedó mi página de blogs.

muy sencillo, gracias Diego

Buen curso, la única pega que vi en esta clase es nombrar “grid-container” a un contenedor en el cual ni siquiera está utilizando grid, pero bueno, de resto todo perfecto

Alguien ayúdeme por favor. Me sale esto y no entiendo porque. Dejaré el código en los comentarios.

Excelente!

Buenísimo! No sabia ese truco en el container para delimitar los lados del container y siempre tenerlo centrado!!!

Genial

¿Cómo puedo hacer para que las imágenes no se cambien de posición cuando los párrafos de descripción son de menos o más lineas a cuatro?

lo que mas me gusto de esta clase fue la explicacion del orden que se lleva por buena practica en el css primero para lo que tocan la mayor cantidad de contenido y luego las secciones

Creo que en bootstrap se llama wrap

estupendo 😄

genial

Excelente este container ❤️

A darle 😄

trucasooo!

Qué buena herramienta 😃 A seguir

El buen uso de las herramientas y la atención a los detalles.

Lo importante de una correcta estructuración y un buen manejo de las clases 🧐

Grid-container!!! ❤️

Excelente!

Excelente clase!!

Genial!

terminada la seccion de los blogposts

si algo me quedo claro de todo, es que bonito se ve todo cuando un diseñador mete mano en un proyecto 😃

Buenas practicas, poner el contenedor que va ha introducir max-width en la parte superior o donde colocamos los cambios generales a nuestro proyecto.

muy buena forma de resolver el problema, y muy rápida y entendible

Detalles que afinan la maquetación, buena clase

porque será que cuando intento achicar la pantalla sucede esto? resaltando que es el mismo codigo del profe!!

Una cosa que yo hice fue utilizar flexbox para darle una mejor estetica a los articles de, y no se explica en este curso pero no es malo, en el curso de responsive design el profesor Diego lo explica de maravilla. Se puede usar grid como flexbox pero es más recomendado utilizar grid para diseños a mayor escala.

Hola! les comparto como lo hice yo, sin ver los videos 😃

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/font/flaticon.css" />
    <link rel="stylesheet" href="./css/blogs.css" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <section class="header-icons-container">
        <div class="icons">
          <a href=""><span class="flaticon-001-facebook"></span></a>
          <a href=""><span class="flaticon-002-twitter"></span></a>
          <a href=""><span class="flaticon-011-instagram"></span></a>
          <a href=""><span class="flaticon-010-linkedin"></span></a>
          <a href=""><span class="flaticon-008-youtube"></span></a>
        </div>
      </section>
      <nav>
        <section class="nav-logo-container">
          <a href="/"
            ><img src="./assets/img/Logo-negro.png" alt="Logo d emi blog"
          /></a>
        </section>
        <section class="profile-link">
          <a href="/perfil.html">Sobre mí</a>
        </section>
      </nav>
    </header>
    <section class="latest-blog-container">
      <div class="latest-blog--img">
        <h3>Noticias</h3>
        <img src="./assets/img/main-news-img.png" alt="" />
      </div>
      <div class="latest-blog--info">
        <h3>Titulo del blogpost</h3>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam
          excepturi fugit aut ipsa temporibus, numquam nesciunt recusandae
          dolorem culpa doloribus mollitia magni modi molestias. Nobis ut hic
          sed voluptatum qui!
        </p>
        <button class="read-more-button">Leer Mas</button>
      </div>
    </section>
    <section class="lasts-blogs-container">
      <h3 class="lasts-blogs-container--title">Últimos Blogposts</h3>
      <div class="last-blogs--grid">
        <article class="last-blogs--blog">
          <img src="./assets/img/post-1.png" alt="blog-img" />
          <h3>Titulo del blogpost</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora in
            nam earum explicabo repudiandae delectus rem ea odio tenetur ratione
            quisquam, distinctio esse nobis quibusdam quidem dolore vitae autem.
            Laudantium?
          </p>
          <a href="./blog.html">
            <button class="read-more-button">Leer Mas</button>
          </a>
        </article>
        <article class="last-blogs--blog">
          <img src="./assets/img/post-2.png" alt="blog-img" />
          <h3>Titulo del blogpost</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora in
            nam earum explicabo repudiandae delectus rem ea odio tenetur ratione
            quisquam, distinctio esse nobis quibusdam quidem dolore vitae autem.
            Laudantium?
          </p>
          <a href="./blog.html">
            <button class="read-more-button">Leer Mas</button>
          </a>
        </article>
        <article class="last-blogs--blog">
          <img src="./assets/img/post-3.png" alt="blog-img" />
          <h3>Titulo del blogpost</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora in
            nam earum explicabo repudiandae delectus rem ea odio tenetur ratione
            quisquam, distinctio esse nobis quibusdam quidem dolore vitae autem.
            Laudantium?
          </p>
          <a href="./blog.html">
            <button class="read-more-button">Leer Mas</button>
          </a>
        </article>
        <article class="last-blogs--blog">
          <img src="./assets/img/post-1.png" alt="blog-img" />
          <h3>Titulo del blogpost</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora in
            nam earum explicabo repudiandae delectus rem ea odio tenetur ratione
            quisquam, distinctio esse nobis quibusdam quidem dolore vitae autem.
            Laudantium?
          </p>
          <a href="./blog.html">
            <button class="read-more-button">Leer Mas</button>
          </a>
        </article>
        <article class="last-blogs--blog">
          <img src="./assets/img/post-2.png" alt="blog-img" />
          <h3>Titulo del blogpost</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora in
            nam earum explicabo repudiandae delectus rem ea odio tenetur ratione
            quisquam, distinctio esse nobis quibusdam quidem dolore vitae autem.
            Laudantium?
          </p>
          <a href="./blog.html">
            <button class="read-more-button">Leer Mas</button>
          </a>
        </article>
        <article class="last-blogs--blog">
          <img src="./assets/img/post-3.png" alt="blog-img" />
          <h3>Titulo del blogpost</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora in
            nam earum explicabo repudiandae delectus rem ea odio tenetur ratione
            quisquam, distinctio esse nobis quibusdam quidem dolore vitae autem.
            Laudantium?
          </p>
          <a href="./blog.html">
            <button class="read-more-button">Leer Mas</button>
          </a>
        </article>
      </div>
    </section>
    <footer>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
    </footer>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}

a {
  text-decoration: none;
  display: inline;
  color: black;
}

header {
  width: 100%;
  height: 140px;
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.header-icons-container {
  width: 100%;
  height: 50px;
  display: grid;
  background-color: #47cfac;
}

.header-icons-container .icons {
  width: 300px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  justify-self: end;
  margin-right: 50px;
}
header .icons span {
  color: white;
}

nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 90px;
}

nav .nav-logo-container {
  margin-left: 50px;
  align-self: center;
}

nav .nav-logo-container img {
  width: 220px;
  margin-top: 10px;
}

nav .profile-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 50px;
  font-size: 2rem;
  font-family: 'Roboto Mono', monospace;
}

nav .profile-link a {
  color: black;
  border-bottom: 1px solid black;
}

.latest-blog-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #e0e3ea;
  padding: 50px 10%;
  font-family: 'Roboto Mono', monospace;
}

.latest-blog--img h3 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.latest-blog--img img {
  max-width: 100%;
}

.latest-blog--info {
  max-width: 350px;
  margin-top: 50px;
  justify-self: center;
}
.latest-blog--info h3 {
  font-size: 3rem;
  font-weight: bolder;
}
.latest-blog--info p {
  margin: 20px 0;
  font-size: 1.5rem;
  font-weight: 500;
  max-height: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.read-more-button {
  height: 40px;
  width: 100px;
  border: solid 1px #47cfac;
  background: none;
  font-family: 'Roboto Mono', monospace;
  font-weight: bold;
  font-size: 1.4rem;
}
.last-blogs--grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.lasts-blogs-container {
  padding: 10px 15%;
  font-family: 'Roboto Mono', monospace;
}
.lasts-blogs-container--title {
  text-align: center;
  height: 30px;
  margin: 10px 0;
  border-bottom: solid 1px #e0e3ea;
  font-size: 2rem;
}

.last-blogs--blog {
  margin: 20px 0;
  margin-right: 20px;
}
.last-blogs--blog h3 {
  font-size: 1.5rem;
}

.last-blogs--blog p {
  font-size: 1.5rem;
  margin: 20px 0;
}

.last-blogs--blog img {
  max-width: 100%;
}
footer {
  background-color: #1f2229;
  border-top: solid 40px #47cfac;
}
footer p {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: 'Roboto Mono', monospace;
  font-size: 1.5rem;
}

super

No había pensado en este detalle.
Muchas Gracias Diego!

Así se veía antes con una escala de 50%

Así se ve ahora con una escala de 50%

¿Entonces por qué usar Grid para el main si no le dimos un uso? Ese Display Grid se puede quitar que no tendría ningún efecto. Se pudo hacer usado para darle forma a la lista de posts.
Este no es uno de los mejores cursos del Profesor De Granda, hay mucho código innecesario a mi parecer.