Nested grids responsive - Issues

[Salvatore Tedde]

I think there is a issue with Nested Grids responsive (Example here: http://arnaudleray.github.io/pocketgrid/docs/). The grid works only because every block has the same height, however, in the real world, each block in the grid could have a different height, and this break the design easily. Just try to add some more text for example to the fourth element and you will see that blocks 6,7,8 will float on the right of that, basically the new row (blocks 5,6,7,8) will not clear. That's why twitter bootstrap or foundation use a more complex syntax and cannot achive what you stated there.

Here's an example of how you could achive this:

• http://stackoverflow.com/questions/12586093/applying-a-clearfix-to-nth-child-without-additional-markup
• http://jsfiddle.net/VsH7X/5/

[Arnaud Leray]

Hi microcipcip!

Thanks for your clever remark!

You're right, different block heights could break the grid layout.

As you pointed out, you have 2 solutions to solve this potential issue (2nd solution is better):

Solution 1: using block-group classes for each row:

Automatic rows are just a cool feature of PocketGrid, but it's not mandatory.
Like Twitter Bootstrap or Foundation, you can use a "block-group" container for each row:

<div class="block-group">
    <div class="block demo">Block</div>
    <div class="block demo">
        A very long block<br/>
        on several rows<br/>
        that could break the layout
    </div>
    <div class="block demo">Block</div>
    <div class="block demo">Block</div>
</div>
<div class="block-group">
    <div class="block demo">Block</div>
    <div class="block demo">Block</div>
    <div class="block demo">Block</div>
    <div class="block demo">Block</div>
</div>

Nevertheless, like Twitter Bootstrap or Foundation, this solution is not flexible because you cannot change the block-groups according to a media query (if you want 2 blocks per row on tablets and 4 blocks per row on desktop for example).

Solution 2: using the clear property in the CSS:

You could define one block-group containing your blocks:

<div class="block-group">
    <div class="block demo">Block</div>
    <div class="block demo">
        A very long block<br/>
        on several rows<br/>
        that could break the layout
    </div>
    <div class="block demo">Block</div>
    <div class="block demo">Block</div>
    <div class="block demo">Block</div>
    <div class="block demo">Block</div>
    <div class="block demo">Block</div>
    <div class="block demo">Block</div>
</div>

then you could force rows in your CSS using the clear property with the nth-child selector:

/* Tablet version: 2 blocks per row */
@media (min-width: 768px) {
    .demo { width: 50%; }
    .demo:nth-child(2n+1) { clear: left; } /* force a new row every 2 blocks */
}

/* Desktop version: 4 blocks per row */
@media (min-width: 960px) {
    .demo { width: 25%; }
    .demo:nth-child(4n+1) { clear: left; } /* force a new row every 4 blocks */
}

The "clear: left" property will ensure that the block will be on a real new row, no matter the height of the previous blocks.

This second solution is better because it does not modify your HTML and it's compatible with media queries.

I cannot put it into the PocketGrid source code because it depends on the grid size, but I will try to add a real demo showing this tip!

Thanks again microcipcip!

[Salvatore Tedde]

You're welcome. Nice solution!
Btw, in the second example I think you should use min and max width, otherwise the nth-child(2+1) for the tablet version will also affect the desktop version.

/* Tablet version: 2 blocks per row */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .demo { width: 50%; }
    .demo:nth-child(2n+1) { clear: left; } /* force a new row every 2 blocks */
}

/* Desktop version: 4 blocks per row */
@media (min-width: 960px) {
    .demo { width: 25%; }
    .demo:nth-child(4n+1) { clear: left; } /* force a new row every 4 blocks */
}

[Arnaud Leray]

You're right (again!)

I added 2 examples about this "problem":

• 1 with just the clear property on a simple block: http://arnaudleray.github.io/pocketgrid/examples/fix-for-different-block-heights.html
• 1 using also the nth-child pseudo-selector: http://arnaudleray.github.io/pocketgrid/examples/fix-for-different-block-heights-nthchild.html

I will try to add a FAQ page soon to underline this useful solution.

Thanks for your help to improve PocketGrid!

[Arnaud Leray]

Hi!
For your information, I added a FAQ page where this point is explained in details: http://arnaudleray.github.io/pocketgrid/faq/#different-heights.

Regards

[Salvatore Tedde]

Thank you!

On 2 August 2013 08:58, Arnaud Leray [e-mail] wrote:

Hi!
For your information, I added a FAQ page where this point is explained in
details: http://arnaudleray.github.io/pocketgrid/faq/#different-heights.

Regards

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4#issuecomment-22007148
.

Thank you,
Salvatore Tedde

www.jertix.org