How can I make a grid with more than 12 columns? I'd like to make a grid to represent 24 hours in a day in half hour increments (total of 48 columns).
<div class="row display">
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
</div>
You can simply use a nested Grid.
First you divide your row into 2 columns. Than you place your 12 hours into each section:
<div class="row">
<div class="small-6 large-6 columns">
<div class="row">
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">2</div>
<div class="small-2 large-1 columns">3</div>
<div class="small-2 large-1 columns">4</div>
<div class="small-2 large-1 columns">5</div>
<div class="small-2 large-1 columns">6</div>
<div class="small-2 large-1 columns">7</div>
<div class="small-2 large-1 columns">8</div>
<div class="small-2 large-1 columns">9</div>
<div class="small-2 large-1 columns">10</div>
<div class="small-2 large-1 columns">11</div>
<div class="small-2 large-1 columns">12</div>
</div>
</div>
<div class="small-6 large-6 columns">
<div class="row">
<div class="small-2 large-1 columns">13</div>
<div class="small-2 large-1 columns">14</div>
<div class="small-2 large-1 columns">15</div>
<div class="small-2 large-1 columns">16</div>
<div class="small-2 large-1 columns">17</div>
<div class="small-2 large-1 columns">18</div>
<div class="small-2 large-1 columns">19</div>
<div class="small-2 large-1 columns">20</div>
<div class="small-2 large-1 columns">21</div>
<div class="small-2 large-1 columns">22</div>
<div class="small-2 large-1 columns">23</div>
<div class="small-2 large-1 columns">24</div>
</div>
</div>
</div>
You can customize Foundation on this subpage of Zurb, and you can set 48 columns for yourself. Then you can use large classes from .large-1 to .large-48, and small classes from .small-1 to .small-48.
After searching for something similar, finally figured out how to do this with foundation's mixins.
In another scss file you can create your custom class as follows. This only implements the coding for the "large-x" sub class for this parent class. I reset the total-columns variable to 12 just in case.
#import "foundation/components/grid"
.customClassName {
$total-columns:24;
#include grid-row();
#include grid-html-classes($size:large);
$total-columns:12;
}
This gives me a 24 column grid that I can place anywhere without overwriting the defaults for foundation in the project.
There a most likely multiple solutions to this. I tried the solution from Jay, and it does not work - not sure why? So I discovered another solution - there's a function in Foundation that can be used.
Let's assume that you're outputting the alphabet A-Z as a list:
<ul>
<li class="grid-26">A</li>
...
<li class="grid-26">Z</li>
</ul>
In your SCSS, create your class and call the grid-calc function:
.grid-26 {
width: grid-calc(1, 26);
}
This will return a width which equals 1/26 or 3.84615%
Dress up the SCSS so that each li floats and the text is centered:
.grid-26 {
width: grid-calc(1, 26);
float: left;
text-align: center;
}
Related
I'm using the grid-xy system and I'm attempting to change the gutter width of Foundation 6 with my settings.scss file but I'm having no luck. My ultimate goal is to have the gutters between my cells to be 20px wide instead of 15px. I tried changing any variable I could think of or find in my research. Below is a list of variables I've tried.
$grid-column-gutter: (
small: 30px,
medium: 45px,
);
$column-gutter: rem-calc(20);
$gutters: rem-calc(20);
$gutter: rem-calc(20);
$grid-margin-gutters: rem-calc(20);
I know for sure my _settings.scss is working though because I was able to change $global-width and it did have an effect.
Here is the html I'm using
<div class="grid-x grid-padding-x grid-container">
<div class="cell large-4 medium-6 small-12">
<h2>Test</h2>
</div>
<div class="cell large-4 medium-6 small-12">
<h2>Test 2</h2>
</div>
<div class="cell large-4 medium-6 small-12">
<h2>Test 3</h2>
</div>
<div class="cell large-4 medium-6 small-12">
<h2>Test 4</h2>
</div>
<div class="cell large-4 medium-6 small-12">
<h2>Test 5</h2>
</div>
<div class="cell large-4 medium-6 small-12">
<h2>Test 6</h2>
</div>
</div>
How do you change the default padding width between grid-xy cells?
Turns out I wasn't using the right variables
$grid-padding-gutters: 40px;
$grid-margin-gutters: 40px;
Worked
I sometimes use columns as spacers, and so when there is no content, I don't want the column to collapse, which is the default behavior. Is there a built-in way to prevent empty columns from collapsing?
I know I can add some invisible div or something, but I'm asking if there's a standard way to accomplish this without resorting to hacks like that.
You can use offsets to create gaps:
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-11 columns">11</div>
</div>
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-9 large-offset-2 columns">9, offset 2</div>
</div>
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>
I created a hacky style for this. Like so:
.row.no-collapse .columns {
min-height: 1px;
}
<div class="row no-collapse">
<div class="large-1 columns">1</div>
<div class="large-11 columns">11</div>
</div>
While Designing website layout using foundation css,if i use grid system as bellow within the div with class row.its giving more space at left and right as in the Image.
The Code I am using is as bellow within the div with class="row"
<div class="row">
<div class="small-2 large-4 columns">small-2 large-4 columns</div>
<div class="small-4 large-4 columns">small-4 large-4 columns</div>
<div class="small-6 large-4 columns">small-6 large-4 columns</div>
</div>
Here I need just 5-7% space both at left and right side.How to achieve this by using foundation?
You can use Centered Columns in Foundation to do this.
Small-1 row takes up 8.3333% so by the below html you can have space of 4.166% on the right and on the left.
<div class="row">
<div class="small-11 small-centered columns">
<div class="row">
<div class="small-2 large-4 columns">small-2 large-4 columns</div>
<div class="small-4 large-4 columns">small-4 large-4 columns</div>
<div class="small-6 large-4 columns">small-6 large-4 columns</div>
</div>
</div>
</div>
Here is a fiddle-link
If I understood you correctly you want something like this http://jsfiddle.net/Tb9Vg/1/ But it has nothing to do with the Foundation itself.
html:
<div class="wrap">
<div class="row">
<div class="small-2 large-4 columns">small-2 large-4 columns</div>
<div class="small-4 large-4 columns">small-4 large-4 columns</div>
<div class="small-6 large-4 columns">small-6 large-4 columns</div>
</div>
</div>
css:
.wrap{
padding-left:7%;
padding-right:7%;
}
.columns{
height: 500px;
background-color:blue;
}
.row ( margin-left:auto; margin-right:auto; width : 30em;}
The margin-left and margin-right centers your element, and with width property you can set the size of your element as big as you like (30 is just an example). The benefit is that when you resize the screen, it retains distance from both sides.
We need to change the width of class "row" of a foundation as much as we need.thats it we will get space at both left and right side.
This question is similar to one I asked earlier, but this time I am trying to achieve the layout using a different approach: grids, not block-grids.
I read ZURB's article on How to bridge rows in Foundation, but the end result deviates from my expectation. There is no margin between the first and the second row. So how do I get that margin to work, that you see in the picture at the article?
This is what I got so far: http://jsfiddle.net/NPUHy/
First approach
<div class="row">
<div class="small-9 small-centered column">
<div class="row">
<div class="small-4 column">
<img src="http://placehold.it/256x512&text=PANEL"/>
</div>
<div class="small-8 column">
<div class="row">
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-1"/>
</div>
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-1"/>
</div>
</div>
<div class="row">
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
</div>
</div>
</div>
Second Approach
<div class="row">
<div class="small-9 small-centered column">
<div class="row">
<div class="small-4 columns">
<img src="http://placehold.it/256x512&text=PANEL"/>
</div>
<div class="small-4 columns">
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
<div class="small-4 columns">
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
</div>
</div>
</div>
add a class to the row div<div class="row custom">, and then add a padding to the class
.row .custom {
padding-bottom: 10px;
}
updated fiddle http://jsfiddle.net/NPUHy/1/
i have the following situation in a project
<div class="row">
<div class="large-3"></div>
<div class="large-3"></div>
<div class="large-3"></div>
<div class="large-3"></div>
</div>
i would like to use media query to modify to hide a div (large-3) for a certain width and let the other three to be large-4
how can i achieve this ?
thanks
There should be a more efficient way to do that, but this is the first thing that comes to mind:
Sample HTML:
<div class="row design-4-columns">
<div class="large-3 columns"></div>
<div class="large-3 columns"></div>
<div class="large-3 columns"></div>
<div class="large-3 columns"></div>
</div>
<div class="row design-3-columns">
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
</div>
Your css would be something like this:
/* Used to alter styles for screens at least 500px wide.*/
#media only screen and (min-width: 500px) {
.design-4-columns {
display: none !important;
}
}