I need to build a pyramid of content blocks using the Foundation grid.
The problem is that for rows that are not divisible by 12, I cannot stack the next row in the pyramid so that it is centered under the row above it.
It is like I need a half column offset or something equivalent.
I thought about using .centered on a nested row, but that seems to have the same problem of dividing half columns.
<div class='row'>
<div class='small-1 small-centered columns'>1</div>
</div>
<div class="row">
<div class='small-5 columns'></div>
<div class='small-1 columns'>1</div>
<div class='small-1 columns'>2</div>
<div class='small-5 columns'></div>
</div>
<!--- This row with 3 content blocks is not centered below the previous row --->
<div class="row">
<div class='small-4 columns'></div>
<div class='small-1 columns'>1</div>
<div class='small-1 columns'>2</div>
<div class='small-1 columns'>3</div>
<div class='small-3 columns'></div>
</div>
Fiddle:
http://jsfiddle.net/1cq1gqtq/
I would use block grid instead. The block grid utility will fill up whatever available space is created by the row above.
See the Foundation docs for examples of how to use it: http://foundation.zurb.com/docs/components/block_grid.html
I use this a lot when I need no padding on the left/right sides of the outer columns.
Related
If I have a scenario using Bootstrap 5 like...
<div class="container">
<div class="row row-cols-auto">
<div class="col">One</div>
<div class="col">Two</div>
<div class="col">Three</div>
</div>
</div>
All columns currently take whatever width their content needs.
I want column two to be as wide as it can be without interfering with the display of columns one and two.
Is this possible with Bootstrap alone or would I need to rely on additional CSS styling?
Just found the answer. Make all columns EXCEPT the one I want to take up all the space col-auto. Make that one class="col".
<div class="container">
<div class="row">
<div class="col-auto">One</div>
<div class="col">Two</div>
<div class="col-auto">Three</div>
</div>
</div>
I have the following footer that is broken to 2 part: an upper part and a lower part:
The upper part of the footer contains 4 divs and its css has:
display:flex;
justify-content:space-between;
While the lower part contains 3 divs (1 is completely empty) and also its css has:
display:flex
justify-content:space-between;
What I want is to make the unordered list that starts with TERMS & CONDITIONS in the bottom part of the footer to start just under the unordered list that ends with BEST PLAYERS in the upper part of the footer, so along this red line:
The best way to do this, is to rearrange you html code: Instead of making two rows footer, make it one row with two columns, the first column is for the logo and the second column divided into two rows as well, with three columns
<div class="row">
<div class="col-3">
<div class="logo">
<img src="your-logo.png" alt="logo">
</div>
</div>
<div class="col-9">
<div class="row">
<div class="col-4">fixtures</div>
<div class="col-4">latest tweets</div>
<div class="col-4">follow</div>
</div>
<div class="row">
<div class="col-4">blank</div>
<div class="col-4">terms & privary</div>
<div class="col-4">social icons</div>
</div>
</div>
When do yo use row column construct in Zurb Foundation 6.2.3 framework?
<div class="column row">
Row column
</div>
It almost identical to,
<div class="row">
Row
</div>
Only that row column is shorter in length.
This has to do with the way framework grids work (not only foundation), .row elements are not meant to be content containers itself, .column are. Grid elements has paddings and margins and, if you use just .row, that would cause misalignment with other elements on the grid. So, if you have something like:
<div class="row">
<div class="column medium-6">Column A</div>
<div class="column medium-6">Column B</div>
</div>
<div class="row">
<div class="column">Column C, full width always</div>
</div>
<div class="row">
<div class="column medium-6">Column D</div>
<div class="column medium-6">Column E</div>
</div>
Please take a look to the Column C, as it is full width on all breakpoints, doesn't need to have sizing classes, so just "column" or "columns" will suffice, but it still having an extra div with no other need than having the proper sizing/padding/margin to keep content alignment to upper and lower row, so... it's better if second row is: <div class="row column">Column C, full width always</div>, just that.
That's the situation in which you should use the row column construct; and yes, I do encourage you to use that construct, avoid use .row as direct content container.
Hope this helps.
I have a row divided into 3 columns using col-sm-4. Now i expect this row to be divided horizontally into three parts. But it's divided vertically.
See on Jsfillde
Here's my code
<div class="container">
<div class="row" style="padding:13px 15px;">
<div class="pull-left span4">
<img src="themes/custom/img/logo.png" width="120" alt="logo"/>
</div>
<div class="pull-right span4">
<div class="row">
<div class="col-sm-4">One</div>
<div class="col-sm-4">Two</div>
<div class="col-sm-4">Three</div>
</div>
</div>
</div>
</div>
I have kept a logo on the left side and on the right side there is a row that i want to divide horizontally in 3 parts.
What am i doing wrong?
Your code works just fine. The .col-sm-* classes are applied for width 768px and above. If you want make this three divs always horizontally, you have to use classes .col-xs-4 in your case. Updated jsfiddle
Futher reading - http://getbootstrap.com/css/#grid-options
I was having the same problem and was at my wits end. Then I refreshed the browser and it worked.
I'll just show you a jsfiddle I've created to illustrate what I'm trying to achieve:
http://jsfiddle.net/vraG7/3/embedded/result/
Here's the code for that part:
<div class="row">
<div class="twelve columns">
<h2 class="first_column category_title">Nome Categoria</h2>
<div class="row">
<div class="nine columns thumbnail"><img
src="http://www.placehold.it/125x125" alt=""></div>
<div class="three columns date"><time
datetime="2013-02-28" >28<br>02<br>2013</time></div>
</div>
<div class="row">
<div class="twelve columns">
<h2 class="post-title">Titolto del post</h2>
</div>
</div>
</div>
</div>
</div> <!-- category-column -->
What I'm trying to do is to have the 125x125 image and the date box to its right to be the same width as the orange box with "Nome categoria". I thought I did everything right, but apparently I'm missing something.
It is hard to say what exactly the problem is. You are overriding a lot of foundation styles. height, margin, etc. on a bunch of divs.
1) You are applying the background color that you hope to align to to an <h2>. I suggest applying it to the containing <div>. the h2 will never to do the edge of the div, therefore you will not be able to align them.
2) for the date you applying the color to the background. it is possible they are already aligned. if you change the above.
3) for troubleshooting nested grids, it is easy to add the panel class to all of them, this will increase the spacing but let you see the relationship of each nested grid to each other.
this is on foundation 4, but might be useful:
http://foundation.zurb.com/grid-example2.php