How to do proper and responsive Image Grid view with display:flex

Question

I am pretty confused with display:flex that how to get responsive image grid like this..

Thanks in advance. I have tried many StackOverflow answer but it didn't worked

Right now I have Layout like this...

But i want my layout like this ...

Html code:

<div class="makeExploreCenter">
    <div class="explorePost">
        <img src="skyline-buildings-new-york-skyscrapers.jpg" />
        <div class="likesdetails">
            <div class="propicthumnail">
            </div>
        </div>
    </div>
    <div class="explorePost">
        <img src="url.jpg" />
        <div class="likesdetails">
            <div class="propicthumnail">
            </div>
        </div>
    </div>
    <div class="explorePost">
        <img src="ymbpp1l.jpg" />
        <div class="likesdetails">
            <div class="propicthumnail">
            </div>
        </div>
    </div>
    <div class="explorePost">
        <img src="skyline-buildings-new-york-skyscrapers.jpg" />
        <div class="likesdetails">
            <div class="propicthumnail">
            </div>
        </div>
    </div>
    <div class="explorePost">
        <img src="url.jpg" />
        <div class="likesdetails">
            <div class="propicthumnail">
            </div>
        </div>
    </div>
    <div class="explorePost">
        <img src="ymbpp1l.jpg" />
        <div class="likesdetails">
            <div class="propicthumnail">
            </div>
        </div>
    </div>
</div>

CSS code

.makeExploreCenter{
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap:wrap ;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}
.explorePost{
    text-align: center;
    margin: 5px;
    max-width: 300px;
    min-width: 300px;
    align-self: flex-start;
    background: #545454;
}
.explorePost img{
    max-height: 60vh;
    max-width: 100%;
    max-height: 70vh;
}
.likesdetails{
    width: 100%;
    height: 44px;
    background: #FAFAFA;
    margin-top: -3px;
    overflow: auto;
    overflow: hidden;
    display: flex;
}

score 0 · Accepted Answer · answered Nov 28 '16 at 14:43

0

Using a framework like bootstrap will make life easier.

Bootstrap grid system can achieve that easily.

answered Nov 28 '16 at 14:43

Anthonyji

150
10

No @NingJi I wanted to learn these things.... – Nane Nov 28 '16 at 14:44
http://codepen.io/githubitsme/pen/NbarmP/ – Nane Nov 28 '16 at 17:44

score 0 · Answer 2 · answered Nov 28 '16 at 15:01

You can use the flex-diretion: column property to achieve that effect. See the following example:

.grid{
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  width:400px;
  height:400px;
  list-style:none;
}

img{
  width:100px;
  height:auto;
  display:block;
}

<ul class="grid">
  <li><img src="http://lorempixel.com/100/140/"/></li>
  <li><img src="http://lorempixel.com/100/150/"/></li>
  <li><img src="http://lorempixel.com/100/125/"/></li>
  <li><img src="http://lorempixel.com/100/160/"/></li>
  <li><img src="http://lorempixel.com/100/90/"/></li>
  <li><img src="http://lorempixel.com/100/130/"/></li>
  <li><img src="http://lorempixel.com/100/52/"/></li>
  <li><img src="http://lorempixel.com/100/159/"/></li>
  <li><img src="http://lorempixel.com/100/60/"/></li>
  <li><img src="http://lorempixel.com/100/69/"/></li>
  <li><img src="http://lorempixel.com/100/85/"/></li>
</ul>

codepen

Not Working !!! It gives me total grid align vartically – Nane Nov 28 '16 at 15:12 — Nane, Nov 28 '16 at 15:12
@Nane What browser are you using? – mmgross Nov 28 '16 at 15:37 — mmgross, Nov 28 '16 at 15:37
Flex box is supported by Chrome from version 29 (2013). – DanielBlazquez Nov 28 '16 at 16:14 — DanielBlazquez, Nov 28 '16 at 16:14
http://codepen.io/githubitsme/pen/NbarmP/ – Nane Nov 28 '16 at 17:44 — Nane, Nov 28 '16 at 17:44

score 0 · Answer 3 · 2016-11-28T16:19:18.857

You may do it with float

Example:

---- first div ---- ---- second div --- -------AND-----
4G3Y5B6GBY3G7W10P-- ----5G5W5E6B10P10W- ----SO---------
Picture------------ ----Picture-------- -------ON------
------------------- ------------------- --MORE PICTURES
The text related to Content related to- --MORE TEXT----
this--------------- this--------------- ----MORE SPACE-
----Another picture ----Another picture ---Another-----
3B6G6B7GYB3G7W10P-- ----6B7B8B7WBG10YP- ---content-----
Picture------------ ---Picture--------- Modern content-
------------------- ------------------- ---------------
The text related to Related to picture- ---------------
the another picture above-------------- Whatever-------
-- end first div -- -- end second div-- ---------------

Real example:
CSS:

    .grid0, .grid1{float:left;margin-right:30px;}

HTML:

    <div class='maingrid'>
    <div class='grid0'>
    <img src='http://lorempixel.com/100/140/' style='width:100px; height:100px;' /><br>
    The text to the picture number 1.0<br>
    <img src='http://lorempixel.com/100/140/' style='width:100px;height:100px;' /><br>
    The text to the picture number 1.1
    </div>
    <div class='grid1'>
    <img src='http://lorempixel.com/100/150/' style='width:100px;height:100px;' /><br>
    The text to the picture number 2.0<br>
    <img src='http://lorempixel.com/100/140/' style='width:100px;height:100px;' /><br>
    The text to the picture number 2.1
    </div>
    <div class='grid2'>
    <img src='http://lorempixel.com/100/125/' style='width:100px;height:100px;' /><br>
    The text to the picture number 3.1<br>
    <img src='http://lorempixel.com/100/140/' style='width:100px;height:100px;' /><br>
    The text to the picture number 3.1
    </div>
    </div>

http://codepen.io/githubitsme/pen/NbarmP/ – Nane Nov 28 '16 at 17:44 — Nane, Nov 28 '16 at 17:44

How to do proper and responsive Image Grid view with display:flex

3 Answers3