Crear diseño de entradas destacadas con HTML y CSS

Crear estilo de entradas destacadas responsive con display: grid

Aplicamos HTML:

<div class="destacados">
    <div class="post-dest"><img src="https://i.pinimg.com/originals/0e/7f/66/0e7f665474914ade5e81f54e986a73e1.jpg"><h1>titulo de entrada</h1></div>
    <div class="post-dest"><img src="https://i.pinimg.com/originals/0e/7f/66/0e7f665474914ade5e81f54e986a73e1.jpg"><h1>titulo de entrada</h1></div>
    <div class="post-dest"><img src="https://i.pinimg.com/originals/0e/7f/66/0e7f665474914ade5e81f54e986a73e1.jpg"><h1>titulo de entrada</h1></div>
    <div class="post-dest"><img src="https://i.pinimg.com/originals/0e/7f/66/0e7f665474914ade5e81f54e986a73e1.jpg"><h1>titulo de entrada</h1></div>
    <div class="post-dest"><img src="https://i.pinimg.com/originals/0e/7f/66/0e7f665474914ade5e81f54e986a73e1.jpg"><h1>titulo de entrada</h1></div>
</div>

Aplicamos CSS:

.destacados {
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 1rem;
  height: 1000px;
}
.post-dest {
  border-radius: 0.375rem;
  overflow: hidden;
  position: relative;
}
.post-dest img {
  width: 100%%;
  height: 100%%;
  object-fit: cover;
}
.post-dest h1 {
  padding: 3rem 1rem 1rem;
  width: -webkit-fill-available;
  position: absolute;
  bottom: 0px;
  background-image: linear-gradient(to bottom,transparent,rgba(0,0,0,0.75) 100%%);
  margin: 0;
  color: #fff;
}
@media (min-width: 640px) {
  .destacados {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .post-dest:first-child {
    grid-column: span 2 / span 2;
  }
}
@media (min-width: 1024px) {
  .destacados {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: 500px;
  }
  .post-dest:first-child {
    grid-row: span 2 / span 2;
    grid-column: span 1 / span 1;
  }
}

See the Pen Entradas destacadas con HTML y CSS by Gustavo (@gusta1996) on CodePen.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
100% Free SEO Tools - Tool Kits PRO
close