如何使用HTML和CSS创建网格视图布局

Question

I have create Grid layout with responsive like bellow:

but I don't want to apply space after second rows. I want to style like pintrest.

Exactly what I want is:

My Sample : HTML

I will appropriate If someone help to complete this view :)

Thanks

Answer 1

You can easily do this using bootstrap

for eg

<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
</div>

add as many as div you want. They will grow horizontally as per content and then will be floated left.

Answer 2

Here is your layout.. We have create demo content for your layout..

Click on following link and download source code: http://www.chameleoninfotech.com/theme/mansory-layout/mansory-layout.zip

I hope its helpful for you..

Answer 3

Does something like this work for you? basically what I explained in the comments:

EXAMPLE

I've used table-layout:fixed to keep the width from messing up.

You'd just need to adjust the width of the columns to suit your content