No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Grid Container

19/26
Recursos

Aportes 75

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥渢ext-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;
}```

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

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!

Blogs terminado

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.

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.

Quisiera un curso de Bootstrap 5, gracias.
La Mia va Quedando as铆 ![](https://static.platzi.com/media/user_upload/image-852c1128-6929-444e-9272-353c2e8cc262.jpg)![](https://static.platzi.com/media/user_upload/image-08cec7a0-f452-4f51-8cb6-06448458b492.jpg)![](https://static.platzi.com/media/user_upload/image-e117d11d-eaf4-4bdc-8643-fa66dda93e53.jpg)

sin el max-width

con el max-width y margin auto

As铆 vamos


Visita

Repositorio


Es responsive

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 鈥済rid-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.