.fivebg-columnsdark-1 {
background-color: #1A1A1A;
}
.module-1 {
display: flex;
flex: 1;
}
.col-flowcover-five {
flex: row1;
wrap; order: 1;
}
.columncol-itemflex {
flexdisplay: flex;
}
.col-basis1 {
display: 19%;flex;
flex: 2;
flex-growdirection: column;
}
.col-grid {
display: flex;
flex: 1;
flex-direction: column;
}
.col-text {
width: 25%;
order: 3;
}
.text-category {
overflow-y: scroll;
max-height: 40em;
}
.date-text h4 {
color: rgba(58, 134, 68, 0.9);
font-size: .875em;
text-transform: uppercase;
margin: 0.5%5em !important;0;
}
.date-text ul li {
min display: block;
margin: .5em 0;
white-space: normal;
}
.date-text ul li a {
color: #B7B7B7;
font-size: .875em;
text-decoration: none;
}
.post {
margin: 0.7em;
overflow: hidden;
}
.post-module-x2 {
width: 240px;100%;
position: relative;
display: flex;
}
.thumbnail-left.max img {
max-height: 12em;
max-width: 50em;
}
.post-content-x2 {
padding-left: 15px;1em;
}
/**/
.post-module {
overflow: hidden;
}
.module-width {
width: 390px;
}
.module-full {
width: 100%;
}
.post-module .post-content{
margin-top: -5px;
width: 100%;
padding: 1em;
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 200px;
}
.thumbnail img {
width: 100%;
object-fit: cover;
}
.pixels-img-x2 img {
height: 200px;
}
.pixels-img-x3 img {
height: 300px;
}
.pixels-img-x35 img {
height: 350px;
}
.post-module .post-content p{
font-size: 13px;
margin-bottom: 1.5em;
}
.post-date img{
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 40px;
margin-right: 10px;
}
.post-module .post-date{
display: flex;
align-items: center;
margin-top: auto;
}
.thumbnail {
position: relative;
}
.date {
position: absolute;
min-width: 48px;
min-height: 48px;
background-color: chocolate;#fff;
color: #700877;
font-size: 18px;
font-weight: 700;
padding: 10px 0;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
text-align: center;
text-transform: uppercase;
top: 20px;
right: 20px;
z-index: 1;
}
.date * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.date span {
display: block;
line-height: 14px;
}
.date .month {
font-size: 11px;
}
.post-date small{
color: #888;
}
<div class="five-columns"> <div class="column-item">1</div> <div class="column-item">2</div> <div class="column-item">3</div> <div class="column-item">4</div> <div class="column-item">5</div> </div>
<div class="box module-1 bg-dark-1"> <div class="col-cover-five"> <div class="box col-flex"> <div class="col-1"><div class="post"> <div class="thumbnail"> <div class="date"> <span class="day">22 </span> <span class="month">Nov</span> </div> <img src="https://i.imgur.com/YJdDc99.jpg" alt="Jugadores de Liga"> </div> <div class="text-horizontal"> <a href="#"> <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2> </a> <p class="result">La dirigencia " Alba" ya piensa en el 2021</p> <div class="post-date"> <span class="timestamp colr-white2">Justo ahora</span> </div> </div> </div></div><div class="col-grid"><div class="post"> <div class="thumbnail"> <div class="date"> <span class="day">22 </span> <span class="month">Nov</span> </div> <img src="https://i.imgur.com/ZGd83BY.jpg" alt="Salida de jugadores"> </div> <div class="text-horizontal"> <a href="#"> <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2> </a> <p class="result">La dirigencia " Alba" ya piensa en el 2021</p> <div class="post-date"> <span class="timestamp colr-white2">Justo ahora</span> </div> </div> </div><div class="post"> <div class="thumbnail"> <div class="date"> <span class="day">18 </span> <span class="month">Nov</span> </div> <img src="https://i.imgur.com/Wux8vR8.jpg" alt="Liga de Quito con ausencias"> </div> <div class="text-horizontal"> <a href="#"> <h2 class="sub_title colr-yellow2">Liga de Quito con ausencias para enfrentarse a Emelec</h2> </a> <p class="result">Pablo Repetto con problemas al definir su once titular</p> <div class="post-date"> <span class="timestamp colr-white2">Hace 4 días</span> </div> </div> </div></div> </div> </div> <div class="col-text"> <div class="text-category"> <div class="date-text"> <h4>Titulo Principal</h4> <ul> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> <li><a href="">Enlaces Resultado</a></li> </ul> </div> </div> </div> </div>
No obstante lo que deseo lograr es crear unas cuadriculas de 5, a excepción de una que deba seralgunos aspecto del diseño, tener 3 filas de imágenes más grande quepequeñas y las demásdos más grandes, como este diseñomediante el uso de flexbox es posible pero no doy con los cambios que se debe realizar para tener el siguiente aspecto:
¿Qué cambios se debe emplear?
Nota: Que los cambios que se deban realizar sea solamente en esta estructura HTML y estilo css
<div class="box col-flex">
<div class="col-1"></div>
<div class="col-grid"></div>
</div>