Menu icon Foundation
Why not use block grid instead of columns?

lets say I want to create a regular 3 columns feature introduction columns. Foundation home page is good example. Why would I use "small, medium, large, columns, data-equalizr and data-equalizer-watch" for the columns instead of simply using Block Grid style?

block gridcolumnsstyle

lets say I want to create a regular 3 columns feature introduction columns. Foundation home page is good example. Why would I use "small, medium, large, columns, data-equalizr and data-equalizer-watch" for the columns instead of simply using Block Grid style?

schlubadub over 5 years ago

Put a border on your block-grid li tags and you'll see why...

The borders won't line up at all for uneven heights. If you're not using borders then you probably could just use the block-grid.

Rafi Benkual over 5 years ago

Also block grid adjusts its formation to page width based on the classes you choose like small-block-3. This is not desirable if you want to keep the layout consistent on different devices..

Brandon Arnold over 5 years ago

Rows and columns are great when you want to build things within one row, but they tend to break down if you cram more than 12 columns in one row. Columns are floated and rows clear those floats, so that things don;'t stack like they are in the linked example.

Blockgrids are aware of how many blocks there are before they stack, so we can, through scss, insert a clear after that number (every 3 in this case). This way, even with variable height, they won;t stack.

This may help explain it visually
http://cdpn.io/EmfoK

Karl Ward over 5 years ago

Grid is best for general layout flow, where you know the amount columns and can predict the design.

Block-grid is better for stacking items, for example blog-listings or galleries, especially when you do not know how many items there will be ... It does not matter how many elements you have, they will simply flow based on the block-grid-number you assign. Example http://d.pr/i/jdsx ... Variable amount of list items I want to flow with 3 per row ...

samjin over 5 years ago

@schlubadub, with data-equalizr it will be same height.
@Rafi Benkual, what exactly do you mean by consistent layout? would you provide an example please?

Guys, it seems like everyone's having different opinion and some points conflict with each other's.
I still don't understand clearly for the differences. what's the significant drawback using grid?
Lets say I want to use 4columns layout, and I want them to have equal width and height(this is probably most used layout style), I can simply use block-grid and specify small,medium,large for it. what's the drawback of doing this?

Brandon Arnold over 5 years ago

In that instance you can use a blockgrid without a problem. The benefit of columns is they don't have to be the same width. You can do a 1/3 2/3 layout with columns where you couldn't with a block grid. With columns you can do push and pull for source ordering, that you can't do with a blockgrid.

Its a choice of personal preference at a certain point. Really not a right or wrong, if you're doing all columns with equal widths.

Amos Shacham almost 4 years ago

Another thing I noticed is that the block grid can span all over the screen (if not inside a 'row') while the grid maximum (default) width is 1000 pixels.

But, please help me understand - on both the grid and the block grid, it seems like different height content will have different height borders, and both don't make the height even... What am I missing?

Rafi Benkual almost 4 years ago

The block -grid and columns do not have a hard coded height. They are by default height: auto;

Also, the only thing a .row does is provide a max-width. So if you leave it out, your content will be 100% width of the viewport regardless if it is a column, block-grid or otherwise.

Amos Shacham almost 4 years ago

Ok, thanks - that makes sense.

But what I don't understand is some of the replies here, for example even your own:

schlubadub: "[on block-grid] The borders won't line up at all for uneven heights. If you're not using borders then you probably could just use the block-grid."

Brandon Arnold: "Blockgrids are aware of how many blocks there are before they stack, so we can, through scss, insert a clear after that number (every 3 in this case). This way, even with variable height, they won;t stack."

and also yours: "block grid adjusts its formation to page width based on the classes you choose like small-block-3. This is not desirable if you want to keep the layout consistent on different devices.."

Lastly - I wonder what is the difference of building a static x-column layout with grid vs block-grid.

Thanks!

Rafi Benkual almost 4 years ago

Block-grids automatically clear floats, meaning the heights of the blocks will not cause content to pushed down out of it's row.

Do demonstrate I made a codepen:

Block-grid with variable heights
http://codepen.io/rafibomb/pen/ZGgyJE?editors=110

Regular Grid with variable heights - See the unwanted space created by the floats
http://codepen.io/rafibomb/pen/KpOqvL?editors=100

You can use a block-grid for layout. You cannot specify withs for particular blocks though. So with the grid, you can split the layout into 2/3rds and 1/3rd but with a block-grid of say 3 elements, it will be split 33.3333% of the container width.

Amos Shacham almost 4 years ago

I see now what you mean, but the regular grid you created is not a 12 columns grid and that too is part of the problem I think.

But I understand now what you mean - block-grid is useful for a list of items that comes one after the other, without the possibility to put them in separate rows. Best scenario for this is dynamic content.

Thanks!