Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using CSS/CSS3 how build fluid column layout where different height items appear close to item above? [duplicate]

Tags:

html

css

Using the below code (after the images) I'm getting a layout like this:

enter image description here

But what I want is a layout like this:

enter image description here

My current code:

CSS:

#columns
{
    column-width: 320px; /* change to EM later */
    column-gap: 15px;
    width: 90%;
    max-width: 770px;
    margin: 50px auto;
}

#columns .card 
{
    background: #fefefe;
    border: 2px solid #fcfcfc;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    padding: 15px; padding-bottom: 10px;
    transition: opacity .4s ease-in-out;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    column-break-inside: avoid;
    display: inline-block;
    background-color: #e8e8e8;
}

#columns:hover .card:not(:hover)
{
    opacity: 0.4;
}

#card1
{
    width: 320px;
    height: 200px;
}

#card2
{
    width: 320px;
    height: 160px;
}

#card3
{
    width: 320px;
    height: 200px;
}

#card4
{
    width: 320px;
    height: 200px;
}

#card5
{
    width: 320px;
    height: 200px;
}

#card6
{
    width: 320px;
    height: 200px;
}

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Layout</title>

        <link href="stylesheets/reset.css" media="screen" rel="stylesheet" type="text/css" />
        <link href="stylesheets/main.css" media="screen" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="columns">
            <div id="card1" class="card">Card 1 here</div>
            <div id="card2" class="card">Card 2 here</div>
            <div id="card3" class="card">Card 3 here</div>
            <div id="card4" class="card">Card 4 here</div>
            <div id="card5" class="card">Card 5 here</div>
            <div id="card6" class="card">Card 6 here</div>
        </div>
    </body>
</html>

Must work in Chrome (Android/Desktop), Safari iOS 7+, Firefox 38+ (Android/Desktop)

like image 738
Don Rhummy Avatar asked Nov 10 '22 08:11

Don Rhummy


1 Answers

You have to use jquery for that. This jquery plugin will help you. Download it and get your result.

http://masonry.desandro.com/

You don't have to use height.

like image 58
coderpol Avatar answered Nov 15 '22 06:11

coderpol