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!!

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

![](

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

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

Un poco de mi proyecto.

Blogs terminado

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

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

Que importante es delimitar nuestro max-width

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

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

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

me alegra de haber resuelto esto por mi cuenta xd, digo, cuando hice mi página, había 4 columnas y estuve buen rato tratando de resolverlo leyendo documentación e intentando diferentes soluciones xd.

Super!!!

¿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?

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

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

Genial!

A darle 😄

Creo que en bootstrap se llama wrap

genial

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

Excelente este container ❤️

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

Detalles que afinan la maquetación, buena clase

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 😦

Comparto mi proyecto

Versión desktop

Versión mobile

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

muy sencillo, gracias Diego

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

que tal buen dia… campeon, coparto mi avance…

Genial

estupendo 😄

Grid-container!!! ❤️

Excelente!

terminada la seccion de los blogposts

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

Qué buena herramienta 😃 A seguir

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

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

sin el max-width

con el max-width y margin auto

QUe locura

Excelente consejo profesor Diego De Granda!

Así quedó mi página de blogs.

Excelente!

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

Excelente clase!!

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.

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%

super

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.

¿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.

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