'I am trying to show a collection grid using flexbox but i am not able to get the layout right

I am trying to achieve following responsive layout using flexbox as show in below image..

enter image description here

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 its lot of css and other tags, i though 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 cant 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>
htmlcsstwitter-bootstrapflexbox


Solution 1:[1]

I would suggest you use grid, there are many ways to achieve this but most definitely flex is not the best way to deal with a grid like this if you care about media query. Nevertheless, one way is to use positions and flex. But its a trade off.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1px;
}

.item {
    height: 4rem;
    width: 4rem;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-1 {
    height: 8rem;
    width: 8rem;
}

.item-2,
.item-3 {
    margin-top: -4rem;
}

.row {
    display: flex;
    gap: 1px;
}

.item-4 {
    position: absolute;
    margin-top: 1px;
}

.item-5 {
    position: absolute;
    margin-top: 1px;
    margin-left: 4.1rem;
}
  <div class="container">
    <div class="item item-1">1</div>
    <div class="row">
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">6</div>
    </div>
  </div>

I have also realised that you can wrap the 2 items 2 and 4 into a single div and set its flex-direction to column, do the same for 3 and 6 items.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions