I am trying to achieve following responsive layout using flexbox as show in below image..
I tried few thing but is not getting the desired result.
Each item in this design has a image and top of that I need to show blog title, date & category but I am not able to get the layout right
Currently I am doing same without flexbox but it's a lot of css and other tags, I thought I could change same with less code using flex.
I have looked at lot of example but I am not able to find 1 example similar to my layout
Current page is using bootstrap v3.3.6 which I can't change as it can impact other parts of the website
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.flex1 {
flex: 100%;
max-height:372px;
}
.flex2 {
flex:25%;
max-height:372px;
}
.flex3 {
flex:25%;
max-height:372px;
}
.flex4 {
flex:25%;
max-height:372px;
}
.flex5 {
flex:25%;
max-height:372px;
}
.flex-container > div > span {
position:absolute;
z-index:1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row row-margin">
<div class="flex-container">
<div class="flex1">
<img src="https://dummyimage.com/645x424/753075/fff.jpg&text=Image" class="img-responsive">
<span>1</span>
</div>
<div class="flex2">
<img src="https://dummyimage.com/480x360/3b063b/fff.jpg&text=Image" class="img-responsive">
<span>2</span>
</div>
<div class="flex3">
<img src="https://dummyimage.com/645x424/3b063b/fff.jpg&text=Image" class="img-responsive">
<span>3</span>
</div>
<div class="flex4">
<img src="https://dummyimage.com/480x360/3b063b/fff.jpg&text=Image" class="img-responsive">
<span>4</span>
</div>
<div class="flex5">
<img src="https://dummyimage.com/480x360/3b063b/fff.jpg&text=Image" class="img-responsive">
<span>5</span>
</div>
</div>
</div>
</div>
I have managed to do it using grid and this is responsive without writing any extra media queries
basic working code example https://codepen.io/KGuide/pen/xxPWxKj
<div class="container">
<div class="row">
<div class="column1 columnX grid-col" style="background-color:#f00;">
<img src="https://dummyimage.com/645x424/753075/fff.jpg&text=Image" class="img-responsive">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class=" column2 column grid-col" style="background-color:#f00;">
<div class="row margin-0">
<div class="column grid-col" style="background-color:#aaa;">
<img src="https://dummyimage.com/645x424/753075/fff.jpg&text=Image" class="img-responsive">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column grid-col" style="background-color:#bbb;">
<img src="https://dummyimage.com/645x424/753075/fff.jpg&text=Image" class="img-responsive">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
</div>
<div class="row margin-0">
<div class="column grid-col" style="background-color:#ccc;">
<img src="https://dummyimage.com/645x424/753075/fff.jpg&text=Image" class="img-responsive">
<h2>Column 4</h2>
<p>Some text..</p>
</div>
<div class="column grid-col" style="background-color:#ddd;">
<img src="https://dummyimage.com/645x424/753075/fff.jpg&text=Image" class="img-responsive">
<h2>Column 5</h2>
<p>Some text..</p>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 1px;
margin:0;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: #f1f1f1;
cursor: pointer;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}
.column1{float: left; width:50%; padding:0; margin:0;}
.column2{float: left; width:50%; padding:0; margin:0;}
.grid-col {position:relative;}
.grid-col > img {z-index:9;}
.grid-col > h2,p {position:absolute; z-index:10;top:30px;left:25px; }
.margin-0{margin:0px;}