htmlcssgridasymmetric

CSS only asymmetrical fluid grid

I was wondering if anyone can help me with this asymmetrical fluid grid I have, but I cannot use Javascript or modify html, it must be CSS only

enter image description here

The html code is this:

<ul>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image"></li>
</ul>

And the CSS is something like this:

ul {
width:1200px;
padding:10px;
}
li.image {
float: left;
margin: 10px;
overflow: hidden;
width:220px;
height:220px;
}
Solution

  • If you will use media queries, this could help, hopefully:

    HTML:

    <ul>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image2"></li>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image fix1" ></li>
  <li class="image2"></li> 
  <li class="image"></li> 
  <li class="image"></li>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image"></li>
  <li class="image fix2"></li>

</ul>

    CSS:

    ul {
width:1200px;
padding:10px;
}
li.image {
float: left;
margin: 10px;
overflow: hidden;
width:220px;
height:220px;
background-color:black;
}
li.image2 {
float: left;
margin: 10px;
overflow: hidden;
width:460px;
height:460px;
background-color:black;
}
li.fix1 {
    margin-top:-230px;
}
li.fix2 {
    margin-top:-710px;
    margin-left:250px;
}

    Demo: http://fiddle.jshell.net/upwxrga3/show/

    EDIT: Updated CSS, because HTML can't be changed:

    ul {
width:1200px;
padding:10px;
}
li.image {
float: left;
margin: 10px;
overflow: hidden;
width:220px;
height:220px;
background-color:black;
}


ul li:nth-child(3), ul li:nth-child(7) {
   float: left;
margin: 10px;
overflow: hidden;
width:460px;
height:460px;
background-color:black;
} 

ul li:nth-child(6) {
    margin-top:-230px;
}
ul li:nth-child(14) {
    margin-top:-710px;
    margin-left:250px;
}