I'm trying to make a custom grid-based theme for my wordpress site. One thing I want to do is make it so that the vertical spacing between posts in the same column is automatically collapsed, so that there is no empty space between them even if the posts are different heights.
For example, on this site the grid is collapsing how I want it to. However, on this site, the posts are arranged in horiztonally aligned rows and there are spaces between each row.
Is there a name for the technique that is used to make posts arrange themselves as in the first example site? I'm at least looking for a term that I could Google for to learn how to do it ... but even better would be a code sample that would show how to make a grid that auto-arranges in this manner.
Thanks!
This is known as a dynamic grid or perhaps Pinterest-like grid. It was popularized by Pinterest.
Essentially, you cannot do this with CSS and HTML alone. This type of grid needs to be handled with some Javascript or server-side processing. I would suggest going with Javascript and checking out one of the many jQuery plugins which do exactly what you want (note that the first site you linked to uses a plugin for their layout):
http://masonry.desandro.com/ (what the first site you linked to uses)
http://www.wookmark.com/jquery-plugin
http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/
http://yconst.com/web/freetile/
Any of these should do the trick.
Masonry has you set the container width and spacing between blocks using CSS. You specify the width of columns you want in Javascript. The calculation of the block width and spacing will determine how many columns there are in the container.
Wookmark and BlocksIt have similar configuration options. They let you specify the container width and then the block width. Between that and the offset (distance between blocks) you could have it arranged such that you end up with 3 columns of the same width.
Freetile out of the box doesn't support same-width columns (one of its features), however you would be able to accomplish the same thing with a little CSS and/or modifying the plugin directly.
The main part here is getting one of these plugins set up and working. Once that is in place, you'd only need to adjust your CSS to your liking. Each of these plugins provide working examples as well as code samples and documentation. A simple implementation of Masonry would look like this:
HTML:
<div id="grid-container">
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
</div>
CSS:
#grid-container {
width: 940px; //width of your container
}
.post {
margin: 10px; //spacing between each block/post
}
Javascript:
$('#grid-container').masonry({
itemSelector: '.post', //selector for each block
columnWidth: 300 //width of your columns
});
Each block post will be 300px wide with 10px of margin all around. You'll end up with 3 columns, each column with 10px of margin between them.
Each of the plugins listed is licensed in such a way that it's free for personal/commercial use (see each plugin for their respective licensing), so no worries there.
Related
I'm currently using grid-x from XY grid built from Foundation (Zurb), although when I have a cards layout (as shown below) with grid-padding-x, one can see that the cards come centered (which is great), although I would like to put a sorting bar on top of this, aligning this to the card layout underneath proved to be difficult since the card layout adjusts accordingly.
What I would like to have as shown in the jsfiddle, is a fixed width and height of the cards and automatically centered (as fulfilled by using grid-padding-x) although then I would like to give the same margin to the navigation bar on top to be aligned to the cards (margin-left and margin-right)
Is there an easier way of achieving this? or is there a way to align them together?
JSFiddle: https://jsfiddle.net/7hjjt2Lp/
How am I expecting it to look
Probably the simplest way to achieve what I believe you are attempting is to put the navigation bar inside a .grid-x grid-padding-x as well. This alignment problem is one of the challenges of using a padding-based grid; you have to have everything inside the grid to align properly.
So in this case, you would end up with
<div class="grid-x grid-padding-x">
<div class="cell">
<div class="sort-bar"></div>
</div>
</div>
You can see this in this fiddle: https://jsfiddle.net/7hjjt2Lp/2/
Alternatively, if you use margin instead of padding you don't have the same problem. You could shift to using margin grid and no longer need to nest your sort-bar... for that solution just shift your grid-padding-x to grid-margin-x. See https://jsfiddle.net/uy5euxc8/1/
I am using the core-scaffold component to make a list of objects a shown below. My goal is to put 2 items on each row which share the space 50% -50% . However Horizontal layout fails to allocate space with this ratio. How can I achieve equal spacing.
Secondly, when the screen size gets small, I want the horizontal layout to change into a vertical layout so that, as again shown in the picture, items are not compressed. What is a good way to achieve dynamic layout ?
Use the core-media-query element to capture responsive changes:
<core-media-query query="max-width: 600px" queryMatches="{{phoneScreen}}">
</core-media-query>
Use the flex attribute on your columns to get the 50-50 width. Also use the {{phoneScreen}} (set by the core-media-query) to determine if we should use the horizontal layout or not
<div class="row" horizontal?="{{!phoneScreen}}" layout>
<div class="panel" flex>50%</div>
<div class="panel" flex>50%</div>
</div>
Example: http://plnkr.co/edit/WxUFCWFQVMeBgXSLI32M?p=preview
Polymer offers now the app-layout > app-grid helper class.
1.Import the app-grid-style.html which can be found in the app-layout in the bower_components folder.
2.Include include="app-grid-style" in the style section of your custom element.
3.And add the class app-grid to the container which will hold the layout.
A basic example can be found on this Polymer link.
Polymer app-grid documentation
I have a container-fluid container element, and have been using row as opposed to row-fluid, admittedly out of ignorance. Now I am trying to replace the row class with row-fluid class, but have run into some questions. First, I looked at how the row-fluid width is defined in the .less, and it's completely hieroglyphic to me, so would anyone care to explain? More importantly, when I replace row with row-fluid, the height of the element collapses to 0 requiring me to include the .clearfix class in order for the row-fluid element to grow to contain its children columns. Why is this necessary, i.e. what is being floated and why when I replace row with row-fluid?
It depends on what elements you want to know the width of. The row-fluid class itself has a width of 100%. The spans (or columns) have a relative width, set up in such a way that it combines to 100.
On the floating: all columns get floated, this is what makes it fluid. The only height related thing that a row-fluid does is setting min-height: 30px. This makes it by definition strange that anything would collapse to a height of 0.
I'd suspect the styling you've done on top of your old grid is what causes your main problems.
This is what twitter bootstrap says:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Well, that is about container not rows, but if that explanation is not enough for you, then this is the short explanation which should make things clear for you.
NOTE: If its version 2, then row-fluid itself is being float: left which would need to be cleared as you say.
This is because Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.
Hope this helps :)
Bootstrap 2.x to 3.0 class change
Bootstrap 2.x-->.row-fluid and Bootstrap 3.0 -->.row
I will be very appreciative if anyone has a lead how to solve this:
Problem description:
we have Dynamically generated “floating divs” with even witdh but not even heights.(content based) .
the “Parent container” will have diffrent width parameters to allow 2,3,4 (in attached example 2 columns and 3 )divs to fits it’s width.
divs order is left to right, always by hirarchical order 1,2,3 etc...
How can we achieve this without creating gaps? ( casued by traditional floats method).
Number of divs is dynamically created and not limited...
Solution should be ie8,ie9 compatible
thanks, Jonathan. ![enter image description here][1]
example illustration can be found here:
https://app.box.com/s/6y89dlan1jt8bpjvcgb9
Have you considered using something like Masonry?
Pure CSS solution - Cross Browser (IE6+)
Use a column layout instead of floating.
This Working Fiddle demonstrate a 3 column layout, but you can easily change it to N column.
For a N Column Layout, you'll need to create N containers, each of 100/N width, and fill them accordingly.
You just have to build your dynamic content in the right order. (put the dynamic div in the right column each time).
Here's the basic HTML & CSS for the 3 column layout
<div class="Container">
</div>
<div class="Container">
</div>
<div class="Container">
</div>
.Container {
float: left;
width: 31.33%;
margin: 1%;
}
The script in the fiddle is for the sole purpose of adding dynamic content.
and although the content that I had have a fixed height, it will obviously work with changing heights as well.
BTW: for a 2 column layout, you Don't need this. just make the odd item float left, and the even items float right. Like This
I am trying to create a grid like system with div's with content floated left. The problem is that the height of each div is not static since the content is different in each one. Since the height is different.. things get outta whack if one is taller then another in one row.
Is there some sort of css way or js (prefer javascript) way to get around this. I really want to avoid setting large heights on the divs to get them to line up.
You can see the example here: http://www.foreclosurejournalinc.com/index.php?option=com_hotproperty&view=type&id=1
First off - it is not correct to use a table in this situation: The table structure defines a relationship between data in the same row, and data in the same column. Since the second column is the same type of data as the first, there's no table relationship here.
You shouldn't use a table because you're defining your layout in markup, so you can only ever have two columns. For example, if the client decides they want three columns, or you want to show a single-column list for a mobile view or print stylesheet, you need to change the markup (or even have several sets of markup for different purposes).
Flexible markup
OK - let's look at your markup. At the moment, you have almost got a table structure, because you're wrapping each row in a DIV. Again, this means you can't ever have a single column or 3 or 4 columns side-by-side.
A more flexible solution is to markup your data as a list. Because it's sorted, an ordered list is the right choice:
<ol id="list_properties">
<li class="property">
<h3 class="propertyTitle">08-CA-001731</h3>
<dl class="details">
<dt>Plantiff</dt>
<dd>Bob's Mortgages</dd>
<dt>Defendant</dt>
<dd>Harry Skinflint</dd>
</dl>
</li>
<li class="property">
<h3 class="propertyTitle">08-CA-001731</h3>
<dl class="details">
<dt>Plantiff</dt>
<dd>Bob's Mortgages</dd>
<dt>Defendant</dt>
<dd>Harry Skinflint</dd>
</dl>
</li>
</ol>
You'll have one <li class="property"> per item in your 'grid'. I've suggested some nicer markup for the details, too - help yourself to that if you like.
Now to finish it off: Sadly, this can't be done in a cross browser fashion without a bit of final tweaking with Javascript. That said, the JS is unobtrusive, so it really only acts as a bit of polish at the end.
Base styling
Your base styles will look like:
#list_properties {
list-style:none;
margin:0;
padding:0;
width:960px;
float:left;
}
#list_properties li.property{
width:430px;
float:left;
margin:0 50px 50px 0;
min-height:16em; /* For FF, Safari, Opera, IE8 */
_height:16em; /* For IE6 */
*height:16em; /* For IE7 */
}
That recreates the columns - at this stage, if all of the boxes had a height less than 16em, this would be all you need.
Javascript polish
To make sure everything is rock solid, I'd use the equal heights plugin for jQuery: http://www.cssnewbie.com/equalheights-jquery-plugin/ Basically, you pass it your container (#list_properties) and it scans each of the children (li.property), and sets the height of each one to the height of the tallest item.
So, for instance, one item has extra information and needs 18ems of height, all of the other items are set to 18em too.
The linked site has documentation for getting it going, but once you've got jquery and the plugin ready, you need only do:
$(function(){
$('#list_properties').equalHeights();
});
Once you get it set up this way, you can modify the number of items in the column just by changing the width of the li.property.
A last thought...
I'm just thinking, what is the advantage of displaying this list in columns, anyway? After all, the user can sort the list - wouldn't a single-column list be easier to scan? I'm assuming the user will be looking for a particular item, rather than just browsing through semi-randomly.
Floating <div> elements are tricky to work with, especially if you're aiming at multiple browsers.
If it's important that they line up in a grid format, I'd use a <table> instead; <div>s are meant for dynamic content that may or may not line up with everything else, and it seems like a misuse to expect them to line up perfectly, especially if their sizes are unspecified.
Also, since the float CSS property modifies how block-level elements interact with other floating and non-floating elements, I'd float the <table> element and give it a set width.
Check CSS display: table; for layout:
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
I think if you add a cleared element after every two entries that would help.
<div style="clear:both"></div>
That is, you have hp_prop twice then insert the cleared div.
The
<br class="clearboth">
is not having any effect in the position that you have them.
You might want to look into some of the grid-oriented CSS layout "frameworks" out there. The general idea is to have a bunch of classes that are applied to blocks of content so that you're not dropping little numbers all over the place. There are various different approaches; a google search for "CSS grid framework" should get you started.
Here's another idea: do you know how many tables are in a row? Well, can you not wrap each row of <div> boxes in another "row" <div>, with that one set to overflow: hidden so that it stretches out around the floated boxes inside it? The outer <div> elements would not need to float at all (though they could, if need be). That would have the effect of making each row as big as the biggest cell in it.
There are two options:
Mark the end of each "row" with a <div>or <hr> which "clears" both sides by using the css "clear" attribute. You can learn more about hit here: http://www.w3schools.com/Css/pr_class_clear.asp
Do what Pointy said and use a CSS framework. I would specifically recommend 960 Grid (http://960.gs) and/or BluePrint CSS (http://code.google.com/p/blueprintcss/). Both are simple, small, and easy to use. They basically use the above technique to achieve the result as well as offering you a bunch of other nice features (easy to create symmetrical and nicely proportioned layouts).