CODEWITHSUNDEEP
htmlcssless
Manveru
Manveru

Reputation: 945

CSS tiles positioning

Hello I'm working on website that use tiles like this: enter image description here

As you can see almost everything is ready, but there is one tile lower than others. I want to put it in the right place, but nothin came to my mind now. And I am blocked with job, unless it will work perfectly.

My code Less:

.tile-loop(@index: 1) when (@index <= 6){
  .tile-loop(@index + 1);
  &.t@{index}x1{
    width: (@index * @tile-width) + ((@index - 1) * 2 * @tile-margin);
    height: @tile-height;
  }
  &.t@{index}x2{
    width: (@index * @tile-width) + ((@index - 1) * 2 * @tile-margin);
    height: 2 * @tile-height + 2 * @tile-margin;
  }
  &.t@{index}x3{
    width: (@index * @tile-width) + ((@index - 1) * 2 * @tile-margin);
    height: 3 * @tile-height + 4 * @tile-margin;
  }
  &.t@{index}x4{
    width: (@index * @tile-width) + ((@index - 1) * 2 * @tile-margin);
    height: 4 * @tile-height + 6 * @tile-margin;
  }
  &.t@{index}x5{
    width: (@index * @tile-width) + ((@index - 1) * 2 * @tile-margin);
    height: 5 * @tile-height + 8 * @tile-margin;
  }
  &.t@{index}x6{
    width: (@index * @tile-width) + ((@index - 1) * 2 * @tile-margin);
    height: 6 * @tile-height + 10 * @tile-margin;
  }
}
.tiles {
    padding: 40px 0;
    margin: 0;
    border-bottom: 1px solid @color-black;
    .grid {
      margin-left: -10px;
      margin-right: -10px;
      display: block;
      .tile {
        float: left;
        margin: @tile-margin;
        overflow: hidden;
        position: relative;
        .tile-loop();
      }
      .clear {
        clear: both;
        display: block;
        width: 100%;
      }
    }
  }

HTML:

<div class="tiles">
            <div class="grid">
                <div class="tile t3x4" style="background: red;"></div>
                <div class="tile t3x2" style="background: blue;"></div>
                <div class="tile t3x2" style="background: green;"></div>
                <div class="clear"></div>
                <div class="tile t2x3" style="background: red;"></div>
                <div class="tile t2x1" style="background: blue;"></div>
                <div class="tile t2x2" style="background: green;"></div>
                <div class="tile t2x2" style="background: green;"></div>
                <div class="tile t1x1" style="background: green;"></div>
                <div class="tile t1x1" style="background: green;"></div>
            </div>
        </div>

Please help.

Upvotes: 0

Views: 2576

Answers (4)

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

For your layout I would use floating "columns" containers and inside the elements you need so you will be sure there won't be your structure problems.

Basically I would change your html and css to this (sorry, no less):

body {margin:0;}
* {box-sizing:border-box;}
.column {
    float:left;
}
.x1 {
    width:calc(50% - 10px);
    margin-right:20px;
}
.x2 {
    width:calc(50% - 10px);
}
.x3 {
    width:calc(33.3333% - 13.33333px);
    margin-right:20px;
}
.x4 {
    width:calc(33.3333% - 13.33333px);
    margin-right:20px;
}
.x5 {
    width:calc(33.3333% - 13.33333px);
}
.t3x4, .t2x3 {
    height:300px;
    margin-bottom:20px;
    width:100%;
}
.t3x2 {
    height:calc(150px - 10px);
    margin-bottom:20px; 
    width:100%;
}
.t2x1 {
    height:calc(100px - 10px);
    margin-bottom:20px; 
    width:100%;
}
.t2x2 {
    height:calc(200px - 10px);
    margin-bottom:20px; 
    width:100%;
}
.t1x1, .right {
    height:calc(100px - 10px);
    margin-bottom:20px; 
    width:calc(50% - 10px);
    margin-right:20px;
    float:left;
}
.right {margin-right:0px;}
<div class="tiles">
    <div class="grid">
        <div class="column x1">
            <div class="tile t3x4" style="background: red;"></div>
        </div>
        <div class="column x2">
            <div class="tile t3x2" style="background: blue;"></div>
            <div class="tile t3x2" style="background: green;"></div>            
        </div> 
        <div class="clear"></div>
        <div class="column x3">    
            <div class="tile t2x3" style="background: red;"></div>
        </div>    
        <div class="column x4">    
            <div class="tile t2x1" style="background: blue;"></div>
            <div class="tile t2x2" style="background: green;"></div>
        </div>    
        <div class="column x5">    
            <div class="tile t2x2" style="background: green;"></div>
            <div class="tile t1x1" style="background: green;"></div>
            <div class="tile t1x1 right" style="background: green;"></div>
        </div>
    </div>
</div>

JSFIDDLE example

Upvotes: 0

Ivin Raj
Ivin Raj

Reputation: 3429

This type of layout is called Masonry layout, Masonry is another grid layout but it will fill out the whitespace caused by the difference height of elements.

jQuery Masonry is one of jQuery plugin to create masonry layout.

Alternatively, you can use CSS3 columns. But for now jQuery based plugin is the best choice since there is compatibility issue with CSS3 column

DEMO

Upvotes: 2

IonDen
IonDen

Reputation: 773

There is no way to do this kind of layout on CSS only. There are special JS solutions:

Upvotes: 2

razemauze
razemauze

Reputation: 2676

A way to resolve it is to simply just move up the div that is out of place, using positioning:

.up {
    position:absolute;
    top: -@tile-height;
}

And then add the .up-class to the div you need to move up

Upvotes: 0

Related Questions