El mundo del desarrollo web es un lugar fascinante donde la organización y el diseño juegan un papel primordial. Al trabajar con HTML y CSS, crear una disposición atractiva y funcional para un blog puede llevar tu sitio web al siguiente nivel. El uso de CSS Grid es una herramienta poderosa para lograr esto. Veamos cómo puedes estructurar un blog empleando esta técnica de manera efectiva.
¿Cómo se crean las columnas en CSS Grid?
Para crear una estructura de columnas en nuestro blog, comenzamos por definir un contenedor principal usando CSS Grid. Este contenedor alojará todos los elementos del blog, permitiéndonos organizar eficientemente los contenidos.
.blog-main{display: grid;grid-template-columns:repeat(3,1fr);/* Tres columnas iguales */}
Aquí, grid-template-columns: repeat(3, 1fr); asegura que nuestro contenedor principal esté dividido en tres columnas de igual ancho, donde cada artículo del blog puede ser colocado.
¿Cómo darle estilos al contenedor del blog?
El contenedor principal requiere algunos ajustes estéticos para mejorar su presentación visual. Vamos a aplicar un color de fondo, ajustar el espacio interno, y asegurarnos de que los elementos estén correctamente espaciados.
.blog-main-container{background-color:#f0f0f0;/* Color de fondo */padding:050px40px50px;/* Espaciado interno: abajo e izquierda-derecha */}
La propiedad background-color establece un color base, mientras que padding define el espacio interno del contenedor, asegurando que haya suficiente separación entre el contenido y los bordes del contenedor.
¿Cómo se organiza el título y la imagen del blog?
Para la sección principal del blog, que incluirá un título y una imagen, utilizamos una estructura de cuadrícula que permita acomodar estos elementos eficientemente. Aquí, el título y la imagen se distribuyen visualmente en un diseño de dos fracciones.
.blog-main-new{display: grid;grid-template-columns:2fr1fr;/* Dos fracciones para el título y una para la imagen */}
Esta configuración asegura que el título del blog ocupe un espacio más prominente, mientras que la imagen se ajusta al lado derecho en su fracción dedicada.
¿Cómo manejar problemas de alineación en CSS Grid?
Si alguna de las clases no se alinea correctamente dentro del grid, es posible que tu código necesite reestructurarse. Asegúrate de que todos los elementos hijos estén correctamente anidados dentro del contenedor del grid.
<divclass="blog-main-new"><divclass="blog-title"></div><divclass="blog-image"><imgsrc="ruta-de-la-imagen.jpg"alt="Imagen del blog"></div></div>
Los errores de alineación pueden surgir si los contenedores de elementos no están bien organizados dentro del grid, como ser colocados erróneamente como elementos hermanos en vez de hijos.
¿Cómo agregar márgenes y ajustes de flexibilidad?
Finalmente, para asegurar un espacio estético y flexible, se pueden aplicar margenes y ajustes de tamaño a las imágenes y los textos dentro de nuestros contenedores.
.blog-content{margin:35px;/* Márgenes alrededor del contenido */}
Utilizar márgenes permite que las diferentes partes del blog se respiren visualmente, mejorando el dinamismo general del diseño.
Con estas configuraciones, lograremos que las columnas, imágenes y textos se acomoden perfectamente, generando una disposición armoniosa y profesional para cualquier blog. ¡Ya estás listo para experimentar con CSS Grid y construir tu propio diseño de blog! Tu viaje en el desarrollo web está comenzando, ¡sigue explorando y aprendiendo!
Aportes 62
Preguntas 8
Ordenar por:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
Si quieres practicar algo del CSS Grid que vimos en la clase de hoy, te dejo un juego en el que aprenderás lo que necesitas de CSS Grid de una manera muy interactiva! 😄
Les comparto este link Aqui esta muy bien explicado y trae muy buen contenido con respecto al CSS grid. Espero les ayude y les resuelva sus dudas con este tema.
Es la primer ocasión en que logro completar un reto al 100%, se que puedo tener muchos errores pero visualmente esta muy parecido a lo que nos pedían.
adjunto imágenes y mi código, agradezco cualquier critica constructiva.
código html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>My BLog</title><linkrel="stylesheet"href="css/main.css"><linkrel="stylesheet"href="css/font/flaticon.css"></head><body><header><sectionclass="header-icons-container"><divclass="icons"><ahref=""><spanclass="flaticon-001-facebook"></span></a><ahref=""><spanclass="flaticon-002-twitter"></span></a><ahref=""><spanclass="flaticon-011-instagram"></span></a><ahref=""><spanclass="flaticon-010-linkedin"></span></a><ahref=""><spanclass="flaticon-008-youtube"></span></a></div></section><nav><sectionclass="nav-logo-container"><ahref="index.html"><imgsrc="assetts/img/Logo-negro.png"alt="Logo de mi blog"></a></section><sectionclass="profile-link"><ahref="perfil.html">Sobre mí</a></section></nav></header><mainclass="main-blogs"><sectionclass=" grid-container blogs-news-container"><h3>Soy un título</h3><divclass="img-blogs-news"><imgsrc="./assetts/img/main-news-img.png"alt="imagen principal del blog"></div><divclass="blogs-news-info-container"><h2>Título del Blogpost</h2><p> It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less
normal distribution of letters, as opposed to using 'Content here,
</p><ahref="/"class="button-blogs-news">Leer más</a></div></section></main><br><hr><br><Sectionclass="blogs-post-container"><articleclass="post-container"><imgsrc="./assetts/img/post-1.png"alt="imagen del post"><p>Título del blog post</p><p>descripsion el post
Lorem ipsum dolor sit
amet consectetur adipisicing
elit. Suscipit ut a fugiat
</p><ahref=""class="blogs-button">Leer más</a></article><articleclass="post-container"><imgsrc="./assetts/img/post-1.png"alt="imagen del post"><p>Título del blog post</p><p>descripsion el post
Lorem ipsum dolor sit
amet consectetur adipisicing
elit. Suscipit ut a fugiat
</p><ahref=""class="blogs-button">Leer más</a></article><articleclass="post-container"><imgsrc="./assetts/img/post-1.png"alt="imagen del post"><p>Título del blog post</p><p>descripsion el post
Lorem ipsum dolor sit
amet consectetur adipisicing
elit. Suscipit ut a fugiat
</p><ahref=""class="blogs-button">Leer más</a></article><articleclass="post-container"><imgsrc="./assetts/img/post-1.png"alt="imagen del post"><p>Título del blog post</p><p>descripsion el post
Lorem ipsum dolor sit
amet consectetur adipisicing
elit. Suscipit ut a fugiat
</p><ahref=""class="blogs-button">Leer más</a></article><articleclass="post-container"><imgsrc="./assetts/img/post-1.png"alt="imagen del post"><p>Título del blog post</p><p>descripsion el post
Lorem ipsum dolor sit
amet consectetur adipisicing
elit. Suscipit ut a fugiat
</p><ahref=""class="blogs-button">Leer más</a></article><articleclass="post-container"><imgsrc="./assetts/img/post-1.png"alt="imagen del post"><p>Título del blog post</p><p>descripsion el post
Lorem ipsum dolor sit
amet consectetur adipisicing
elit. Suscipit ut a fugiat
</p><ahref=""class="blogs-button">Leer más</a></article></Section><footer><sectionclass="footer-bg-green"></section><sectionclass="footer-creditos"><p>Éste es el primer reto que logro al 100%</p></section></footer></body></html>
Hola, vengo de terminar los cursos de CSS GRID y de Grid con flexbox, los recomiendo antes de tomar este. De hecho con el definitivo de html y css junto con el mobile first son una gran guia para poder hacer este proyecto mobile first.
Para el toogle word wrap en VS CODE pueden utilizar el atajo de letras “ALT+Z”.
De esa forman hacen que su código no rompa el viewport de su editor de texto. 👍
Que bien se siente entender de lleno el código, realmente la practica te hace mejorar, el curso de Css Grid vale la pena, grade Leonidas, grande Diego.
💪👍📈🤓👨🏻💻
https://gridcritters.com/
aqui puedes practicar grid de una manera muy interesante y a profundida. Igualmente encontraras para practicar muchas otras cosas de css.
Pueden jugar con el inspector el navegador para entender mejor los grid, lo que pasa es que el profe lo coloca algunos valores e ignora otros porque automáticamente se posicionan como está el diseño, pero aquí va el código un poco más específico:
.blogs-main {
display: grid;
}
.blogs-news-container {
background-color: #E6E9ED;
padding: 050px40px;
}
.blogs-main-new {
display: grid;
grid-template-columns: 2fr 1fr;
/* No es necesario ya que al colocar grid este detecta la cantidad de items dentro y lo coloca las grillas de acuerdo a la cantidad de columnas *//* grid-template-rows: 1fr 5fr; */
}
blogs-main-new h3 {
grid-column: 1; /* Para indicarle en que grid se va a posicionar */
grid-row: 1;
}
.blogs-news-img-container {
grid-column: 1;
grid-row: 2;
}
.blogs-news-img-containerimg {
height: 100px;
}
.blogs-news-info-container {
grid-column: 2;
grid-row: 2;
}
.blogs-news-info-containerp {
margin-bottom: 35px;
}
Les comparto esta extensión de Chrome para tomar el color que quieran de cualquier sitio web (como el ColorPicker que usa el profesor). También viene una herramienta para generar gradientes.
Gracias a emmet podemos seleccionar la cantidad de palabras que aparece en nuestro “texto dummy”.
Digamos que quieres que sean 7 palabras entonces simplemente pones:
lorem7
y despliega:
Lorem ipsum dolor, sit amet consectetur adipisicing.
Osea qué: grid-template-columns: 2fr 1fr; / declara la proporcion de espacio ocupado por cada columna y el numero de columnas y grid-column: 1; la columna que ocupará determinado contenido. Interesante!!!
Ya finalicé este curso pero estoy devuelta por acá para corregir mi código. Esta primera parte me quedó de la siguiente manera:
Versión mobile
Versión desktop
Lo genial es que hoy me siento con mucha más confianza para criticar mi juicio del pasado con respecto al código, jajajjajaja. Les dejo el demo por si lo quieren ver mejor:
<https://iamanyyeei.github.io/Blog-Maquetacion-CSS-PLATZI/blogs.html>
En la seccion de blogs-news-container, creo que hay un error, esto en realidad si deberia de quedar asi.
`<section class="blogs-news-container">
Noticias
Titulo del Blogpost
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, officiis exercitationem! Quia ipsam neque et accusantium debitis! Debitis, commodi iusto vero ex odio voluptates cum soluta hic aliquam nesciunt repellat.
Titulo del Blogpost
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, officiis exercitationem! Quia ipsam neque et accusantium debitis! Debitis, commodi iusto vero ex odio voluptates cum soluta hic aliquam nesciunt repellat.
`
` </section>`
La unica diferencia en el CSS es que el display:grid se debe de poner en el contenedor padre, es el unico cambio
`.blogs-news-container{ ``background-color``: #e6e9ed; ``padding``: 0 50px 40px; ``display``: grid; ``grid-template-columns``: 2fr 1fr; /* grid-template-rows: 2fr; */}`
`.blogs-main-new{ }`
En la seccion de blogs-news-container, creo que hay un error, esto en realidad si deberia de quedar asi.
\<section class="blogs-news-container"> \
\
Noticias\
\ \ \
\
\
Titulo del Blogpost\
\
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, officiis exercitationem! Quia ipsam neque et accusantium debitis! Debitis, commodi iusto vero ex odio voluptates cum soluta hic aliquam nesciunt repellat.\
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, officiis exercitationem! Quia ipsam neque et accusantium debitis! Debitis, commodi iusto vero ex odio voluptates cum soluta hic aliquam nesciunt repellat.\
\</section>
La unica diferencia en el CSS es que el display:grid se debe de poner en el contenedor padre, es el unico cambio
.blogs-news-container{ *background-color*: #e6e9ed; *padding*: 0 50px 40px; *display*: grid; *grid-template-columns*: 2fr 1fr; /\* grid-template-rows: 2fr; \*/}
.blogs-main-new{ }
Les quiero compartir la manera en la que organizo los css para tenerlos separados y que no se haga tanto codigo.
Lo que hice fue hacer un ccs llamado “layout” en el que meto los estilos del navbar, para poder traerme solo eso.
Y después llamo a otro archivo css en el que agrego los estilos específicos de la vista que estamos construyendo (el main)
Cabe destacar que en el html recomiendo llamar primero al layout y después al blogs.css. esto por si queremos realizarle algún cambio especifico por vista podamos caerle encima a los estilos del layyout.
si necesitan crear un lorem con un numero determinado de parrafos, por ejemplo 5. Simplemente escriban lorem*5 y tabulador. y voila!!
Espero les sea de ayuda!!
una pregunta tengo mi menu del header donde dice “sobre mi”,
al momento de reducir la pantalla este se divide en do s es decir sobre en la parte de arriba y mi en la parte de abajo pero no quiero qe pase eso solo quiero qe este en una linea como lo hago.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?