Correctly Gridded Tiles

papillonstudios · August 30, 2012

Im not sure if Im posting in the correct spot but I am trying to create a metro styled tile grid.

I have made all my tiles but I have one problem. If you put a big tile next to a small tile and then have more tiles below it, there is a space where tiles should be(Figure 1)

Figure 1

When i want it to look like this(Figure 2)

Figure 2

Any ideas on how I can fix this? The tiles are going to load dynamically so its gotta be a universal fix. Im not sure if I should be using Javascript or css either.

So I would like to know:

1: Do I use Javascript or css?

2. How would I fix it with javascript or css?(Depending on what you answered to the first question)

My Code

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Metro Tile Navigation Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div class="tile doubleWidth">

</div>

<div class="tile double">

</div>

<div class="tile single">

</div>

<div class="tile single">

</div>

<div class="tile single">

</div>

<div class="tile single">

</div>

<div class="tile single">

</div>

<div class="tile single">

</div>

</body>
</html>

My CSS

.tile {
display: block;
float: left;
margin: 7.5px;
background: #B50000;
}

.single {
width: 234px;
height: 234px;
}

.doubleWidth {
width: 483px;
height: 234px;
}

.doubleHeight {
width: 234px;
height: 483px;
}

.double {
width: 483px;
height: 483px;
}

Thanks in Advance

White_Lily · August 30, 2012

Okay - so i thought i would make this quick and slighty simple.

ive taken your code and changed it (quick bit)

here it is (was simple really)


<!DOCTYPE HTML>
<html lang="en-US">
<head>
   <meta charset="UTF-8">
   <title>Metro Tile Navigation Test</title>
   <style type="text/css">
      .wrapper{
         width:996px;
         padding:0;
         margin:auto;
      }
      
      .clear
      {
         clear:both;
      }
   
      .square
      {
         width:498px;
         height:498px;
         float:left;
      }
   
      .tile {
         display: block;
         float: left;
         margin: 7.5px;
         background: #B50000;
      }


      .single {
         width: 234px;
         height: 234px;
      }


      .doubleWidth {
         width: 483px;
         height: 234px;
      }


      .doubleHeight {
         width: 234px;
         height: 483px;
      }


      .double {
         width: 483px;
         height: 483px;
      }
   </style>
</head>
<body>


   <div class="wrapper">
   
      <div class="square">
      
         <div class="tile doubleWidth">
         
         <>
         
         <div class="tile single">
         
         <>
         
         <div class="tile single">
         
         <>
      
      <>
      
      <div class="square">
      
         <div class="tile double">
         
         <>
      
      <>
      
      <div class="tile single">
         
      <>
         
      <div class="tile single">
         
      <>
         
      <div class="tile single">
         
      <>
         
      <div class="tile single">
         
      <>
   
   <>
   
</body>
</html>

PS: you will need to put div closing tags where "<>" is.

papillonstudios · August 30, 2012

That works and all but only one thing. I don't want to restrict the layout of the tiles. Since it will be grabbing data from a database the size of the tile will depend on what is selected with each entry in the database. Its for a blog so each tile will be displayed in by date.

With your code when I have a 2x1 tile then I must have 2 1x1 tiles which sometimes will not be the case. it maybe a 2x1 tile followed by a 2x2 tile which would not display correctly. All posts except image posts will start as a 1x1 tile and when you click on it, it will turn into a 2x1 to display more content. So the other tiles have to be able to adapt to other tiles changing dimensions.

xyph · August 30, 2012

That works and all but only one thing. I don't want to restrict the layout of the tiles. Since it will be grabbing data from a database the size of the tile will depend on what is selected with each entry in the database. Its for a blog so each tile will be displayed in by date.

With your code when I have a 2x1 tile then I must have 2 1x1 tiles which sometimes will not be the case. it maybe a 2x1 tile followed by a 2x2 tile which would not display correctly. All posts except image posts will start as a 1x1 tile and when you click on it, it will turn into a 2x1 to display more content. So the other tiles have to be able to adapt to other tiles changing dimensions.

How would that even work?

White_Lily · August 31, 2012

I'm guessing from that explanation your not very simple person lol. Well put it this way, you could try using my code as a template, or a base line per say.

Try setting the heights to: "height:auto;"? maybe even set a min-height for the individual boxes with a height of auto also.

All I can really say is use the code I've provided and just play with it, that's what I did with your original code.

papillonstudios · September 8, 2012

Alright so I took another shot a masonry and Im still right where i started .

if I remove the column-width from the item class this happens:

add the column-width back and i get this:

Here are the file i modified from the the masonry demo site(http://meta.metafizzy.co/files/masonry-site.zip)

style.css

/**** Base styles ****/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

html {
  overflow-y: scroll;
}

body { 
  font: 13px 'Helvetica Neue', Arial, sans-serif;
  background: #D8D5D2;
  color: #222;
  line-height: 1.6em;
}

a {
  color: #A2C;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #D26;
}

a:active {
  background: hsla( 0, 100%, 100%, 0.5 );
}

h1, h2 {
  font-weight: 100;
  line-height: 1.2em;
  margin-bottom: 0.6em;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 17px;
  font-weight: bold;
}

h3, p, ul, ol, pre, dl {
  margin-bottom: 1.0em;
}

strong { font-weight: bold; }

/**** #site-nav ****/

#site-nav {
  position: absolute;
  width: 180px;
  padding:  0 10px;
}

#site-nav h1 {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 0.8em;
  padding-top: 10px;
}

#site-nav h1 a { color: #D26; }
#site-nav h1 a:hover { color: #A2C; }

#site-nav h2 {
  font-size: 17px;
  font-weight: normal;
  margin-bottom: 0.3em;
}

#site-nav ul {
  list-style: none;
  padding-left: 0;
  font-size: 12px;
}

#site-nav li {
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

#site-nav li a {
  display: block;
  padding: 3px 5px;
}

#site-nav li.current {
  background: #C8C5C2;
}

#site-nav li.current a { color: white; }
#site-nav li.current a:hover { color: #D26; }

#site-nav li ul { 
  margin-bottom: 0;
}

#site-nav li li {
  font-size: 11px;
  line-height: 1.4em;
}

#site-nav li li a {
  padding-left: 15px;
}

#site-nav li.selected li a {
  padding: 3px;
  background: none;
}

#site-nav li.selected li a:hover {
  color: #D26;
}

/**** Content ****/

#content {
  padding: 10px;
}

/* screens smaller than 640 */
@media screen and (max-width: 640px) {

  #site-nav {
    width: auto;
    position: relative;
    left: auto;
    top: auto;
    padding-top: 0px;
    height: auto;
    margin-bottom: 20px;
  }
  
  #content {
    padding-left: 10px;
  }

}

.copy h2 {
  clear: both;
}

a img {
  border: none;
}

pre, code {
  font-family: Monaco, monospace;
  font-size: 12px;
  background: #111;
  color: #F5F5F5;
}

p code {
  padding: 1px 3px;
}

pre {
  padding: 10px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

ul, ol { padding-left: 1.3em;}

.hidden { display: none; }

.copy {
  width: 600px;
  line-height: 1.55em;
}

blockquote {
margin: 0;
font: italic 18px Georgia, serif;
}

dt {
  font-weight: bold;
  font-size: 14px;
}

dd + dt {
  margin-top: 0.5em;
}

dd {
  margin-left: 1.0em;
}

button {
  -webkit-appearance: push-button;
}

#site-footer {
  clear: both;
  margin: 20px 0px;
  border-top: 2px solid white;
  padding-top: 10px;
  line-height: 30px;
  font-size: 95%;
  font-style: italic;
}

.license-copy {
  font-size: 85%;
}

.demos #copy,
.docs #content {
  max-width: 640px;
}

.docs #content h2 {
  border-top: 2px solid #FFF;
  padding-top: 10px;
}

.docs #content h2:target { 
  background: #D26;
  color: white;
  padding: 10px 5px 5px;
}

/**** Docs ****/



.options dl dt { font-weight: normal; }

.options dl dt,
.options dl dd {
  float: left;
  padding: 0 1.2em;;
  background: #161616;
  line-height: 32px;
  height: 32px;
  margin: 0;
}

.options dl.header dt,
.options dl.header dd {
  background: #444;
}

.options dl .option-type {
  font-size: 13px;
  color: #AAA;
  font-style: italic;
}

.options dl dd {
  margin-left: 1px;
}

/**** Demos ****/

#container {
  background: #FFF;
  padding: 5px;
  border-radius: 5px;
  width: 1024px;
  margin: 0 auto;
}

.centered { margin: 0 auto; }

.box {
  margin: 5px;
  padding: 5px;
  background: #D8D5D2;
  font-size: 11px;
  line-height: 1.4em;
  float: left;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.box h2 {
  font-size: 14px;
  font-weight: 200;
}

.box img,
#tumblelog img {
  display: block;
  width: 100%;
}

.rtl .box {
  float: right;
  text-align: right; 
  direction: rtl;
}



.col1 { width: 234px; }
.col2 { width: 483px; }
.row1 { height: 234px; max-height: 234px; }
.row2 { height: 483px; max-height: 483px; }

.col1 img { max-width: 80px; }
.col2 img { max-width: 180px; }
.col3 img { max-width: 280px; }
.col4 img { max-width: 380px; }
.col5 img { max-width: 480px; }

/**** Gutters ****/

.has-gutters .box {
  margin: 5px 0;
}

.has-gutters .col1 { width: 90px; }
.has-gutters .col2 { width: 230px; }
.has-gutters .col3 { width: 370px; }
.has-gutters .col4 { width: 550px; }

/**** Transitions ****/

.transitions-enabled.masonry,
.transitions-enabled.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.transitions-enabled.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.transitions-enabled.masonry  .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}


/* disable transitions on container */
.transitions-enabled.infinite-scroll.masonry {
  -webkit-transition-property: none;
     -moz-transition-property: none;
       -o-transition-property: none;
          transition-property: none;
}

/**** Primer comparison ****/

#comparison {
  overflow: auto;
}

#comparison .example {
  width: 420px;
  float: left;
  margin-right: 20px;
}

#comparison .box h5 {
  float: left;
  margin-bottom: 0;
  font-size: 30px;
  margin-right: 4px;
  line-height: 28px;
  font-weight: bold;
  color: #FFF;
}

/* Homepage */

.homepage .item {
  width: 234px;
  float: left;
  margin: 7.5px;
  background: #B50000;
  font-weight: 300;
}

.homepage .big-text,
.homepage .link {
  font-size: 24px;
  line-height: 1.2em;
}

.homepage .link {
  padding: 0;
}

.homepage .link a {
  display: block;
  padding: 10px;
  width: 200px;
  background: #D26;
  color: white;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.homepage .link a:hover {
  background: #A2C;
}

.homepage .col2 {
  width: 483px;
}

.homepage .example {
  padding: 0;
  width: 220px;
  background: transparent;
}

.homepage .example a { display: block; }

.homepage .example img {
  display: block;
  width: 100%;
}

.homepage .example a:hover { 
  background: #D26;
  color: white;
}

.homepage .loading {
  background: black;
  color: #D8D5D2;
}

.homepage .loading img {
  float: left; 
  padding-right: 5px;
  width: 54px;
}

/* mini example */

.homepage .mini div {
  float: left;
  background: white;
  margin: 3px;
  color: #D8D5D2;
  font-weight: bold;
  font-size: 32px;
  line-height: 46px;
  text-align: center;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

.homepage .mini .w1 { width: 44px; }
.homepage .mini .h1 { height: 44px; }
.homepage .mini .w2 { width: 94px; }
.homepage .mini .h2 { height: 94px; }

/* Tumblelog example */

#tumblelog {
  background: #FFF;
  padding: 1.0em;
}

#tumblelog .story {
  margin: 10px;
  border-top: 4px solid #DCB;
  padding-top: 10px;
  background: #FFF;
  float: left;
}

#tumblelog h1, #tumblelog h2, #tumblelog h3 { font-weight: bold;}

#tumblelog .col1 { width: 220px; }
#tumblelog .col2 { width: 460px; }
#tumblelog .col3 { width: 700px; }

#tumblelog .col1 img,
#tumblelog .col2 img,
#tumblelog .col3 img {
  max-width: none;
}

/* Infinite Scroll loader */
#infscr-loading { 
  text-align: center;
  z-index: 100;
  position: fixed;
  left: 45%;
  bottom: 40px;
  width: 200px;
  padding: 10px;
  background: #000; 
  opacity: 0.8;
  color: #FFF;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

/**** Fluid ****/

#container.fluid  {

}

/* right margin value is 0.1% less than calculated,
  to allow for rounding errors in Firefox */
.fluid .box {
  margin: 5px 0.9% 5px 1%;
  padding: 5px 1%;
}

.fluid .box.col1 { width: 16%; }
.fluid .box.col2 { width: 36%; }
.fluid .box.col3 { width: 56%; }

/**** Corner stamp ****/

.corner-stamp {
  width: 280px;
  height: 340px;
  padding: 10px;
  margin: 10px;
  float: right;
  background: red;
  color: white;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

/**** Pygments ****/

code .s1,
code .s { color: #78BD55; } /* string */
code .mi, /* integer */
code .cp, /* doctype */
code .kc { color: #5298D4; } /*boolean*/
code .k { color: #E39B79; } /* keyword */
code .kd, /* storage */
code .na { color: #A9D866; } /* markup attribute */
code .p  { color: #EDB; } /* punctuation */
code .o  { color: #F63; }   /* operator */
code .nb { color: #AA97AC;} /* support */

/* comment */
code .c,
code .c1 { color: #666; font-style: italic; }

code .nt { color: #A0C8FC; } /* Markup open tag */

code .nf { color: #9EA8B8; } /* css id */
code .nc { color: #A78352; }  /* CSS class */
code .m  { color: #DE8E50; } /* CSS value */
code .nd { color: #9FAD7E; } /* CSS pseudo selector */

/**** Clearfix ****/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery Masonry</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->  
  <link rel="stylesheet" href="css/style.css" />
  <script src="js/modernizr-transitions.js"></script>
  <!-- scripts at bottom of page -->
</head>
<body class="homepage ">
  <section id="content">
    <div id="container" class="clearfix">  

  		<div class="item big-text col2 row1">
    	
  		</div>

	<div class="item big-text col2 row2">
    
  		</div>

	<div class="item big-text row1">
    
  		</div>

	<div class="item big-text row1">
    
  		</div>

	<div class="item big-text row1">
    
  		</div>

	<div class="item big-text row1">
    
  		</div>

	<div class="item big-text row1">
    
  		</div>

	<div class="item big-text row1">
    
  		</div>

</div> <!-- #container -->

<script src="js/jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script>
  	$(function(){
    
    	var $container = $('#container');
        
    	$container.masonry({itemSelector: '.item',isAnimated: !Modernizr.csstransitions});
        //$container.masonry({itemSelector: '.item', column-width: 234,isAnimated: !Modernizr.csstransitions});
  	});
</script>
  </section> <!-- #content -->

</body>
</html>

The rest of the files are all the same.

Any ideas?

White_Lily · September 8, 2012

i don't remember saying anything about column-width >_>

i said try setting heights:

e.g: "min-height: px;" and "height: auto;" <-- nothing there about column-width >_>

papillonstudios · September 9, 2012

i don't remember saying anything about column-width >_>

i said try setting heights:

e.g: "min-height: px;" and "height: auto;" <-- nothing there about column-width >_>

Like I said I went back to Masonry and got it partially working.

papillonstudios · September 22, 2012

Ok this is what im look for, as a direct example! http://tweetwall.apps.zappos.com/index.html

White_Lily im not doing it your way, I know now that with masonry that it does work

papillonstudios · September 22, 2012

or this one http://erikjohanssonphoto.com/work/imagecats/personal/

papillonstudios · September 22, 2012

Fixed it myself, My solution was Isotope!

Sign In

Correctly Gridded Tiles

Recommended Posts

papillonstudios

Link to comment

Share on other sites

White_Lily

Link to comment

Share on other sites

papillonstudios

Link to comment

Share on other sites

xyph

Link to comment

Share on other sites

White_Lily

Link to comment

Share on other sites

papillonstudios

Link to comment

Share on other sites

White_Lily

Link to comment

Share on other sites

papillonstudios

Link to comment

Share on other sites

papillonstudios

Link to comment

Share on other sites

papillonstudios

Link to comment

Share on other sites

papillonstudios

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information