Creating responsive grid layouts where all elements are equidistant from eachother vertically and horizontally

Question

How can one create the vertically "equi-distant" item alignment apparent in "uneven" grid like layouts (for example https://www.zergnet.com/)?

I tried CSS flex layout to do the same, and all I get is:

My code is something like this (simplified version), and the screenshot above was taken when the viewport was set to 320px width:

My goal is to create a layout where all the buttons on the right of the image above have the same vertical space between them as the buttons on the left. The design also needs to be fully responsive.

<div style="display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;">
    <button>Lorem ipsum</button>
    <button>Lorem ipsum gypsum</button>
    <button>Lorem ipsum</button>
    <button>Lorem ipsum gypsum</button>
    <button>Lorem ipsum</button>
</div>

might wanna take a look at [this](https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/) — Rainbow, Jun 13 '19 at 23:40
Possible duplicate of [CSS-only masonry layout](https://stackoverflow.com/questions/44377343/css-only-masonry-layout) — Rainbow, Jun 14 '19 at 17:18

score 0 · Answer 1 · edited Jun 14 '19 at 13:34

0

If you mean something like this, you are looking for flex-direction: column and justify-content: flex-start; that are flexbox properties.

You can read more about it here.

<div class="wrapper">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>7</button>
        <button>8</button>
    </div>
<style>
    .wrapper {
            width: 300px; height: 270px;
            border: 1px solid blue;
            display:flex;
            align-items:flex-start;
            flex-wrap:wrap;
            flex-direction: column;
            justify-content: flex-start;
    }
    .wrapper button {  width: 70px; height: 50px; margin: 6px;}
    .wrapper button:nth-child(2),
    .wrapper button:nth-child(4),
    .wrapper button:nth-child(6) {  height: 80px; }
</style>

edited Jun 14 '19 at 13:34

TylerH

20,799
66
75
101

answered Jun 13 '19 at 19:29

Nico Diz

1,484
1
7
20

The buttons need to be of different heights, and when they wrap onto the next line, they need to be vertically equi-distant from eachother. I hope that makes my requirement clear? :-) – Hassan Baig Jun 13 '19 at 19:32
Now I understand you. I just update my code. This is what I propose to do. Hope it helps. – Nico Diz Jun 13 '19 at 21:26
I'm going to try it and get back to yoy – Hassan Baig Jun 13 '19 at 23:00
Why do you have `justify-content: flex-start;` twice in `.wrapper`? – Hassan Baig Jun 13 '19 at 23:09
It is a typo. Good to note it. I will fix it later. – Nico Diz Jun 13 '19 at 23:21

Creating responsive grid layouts where all elements are equidistant from eachother vertically and horizontally

1 Answers1