I am trying to make a fluid grid which at its maximum width has these values:
http://gridcalculator.dk/#/1224/12/40/56
When the browser is resized below 1264px (to allow for 20px padding on the body), everything (margins, gutters and columns) should scale down proportionally. Is this possible?
I have tried these approaches:
First try:
$total-columns : 12;
$column-width : 56px;
$gutter-width : 40px;
$grid-padding : 56px;
This doesn't work because the padding is fixed at 56px and doesn't scale down.
Second try:
$total-columns : 12;
$column-width : 4.575163%;
$gutter-width : 3.267973%;
$grid-padding : 4.575163%;
$container-width: 1224px;
This almost works but the grid padding is greater than the column width for some reason...
What am I missing? Thanks!
Susy 1.0 handles grid-padding differently from columns and gutters. In order to achieve what you are looking for, we would have to require special classes on both the first and last elements in a row. That is how Susy 0.9 worked, but it added a lot of complexity for a feature most people complained about. Now, with grid-padding added to the container rather than the elements, what you want is not possible.
The grid padding is now added directly to the container, without any math. In your first example, that means it doesn't flex. In your second example, it is interpreted by browsers as a percentage of the entire viewport, while gutters are a percentage of the container, thus resulting in different widths.
Related
Maybe I'm making this more complicated than it needs to be, maybe it's not possible, but... ideally if there is white space I would like to utilise it.
I'm using Semantic UI stackable grid, if I made the browser width in the example screenshot below just a bit wider another 'post' would appear to the right and there would be 3 columns. Perfect!
I want to know if there is a way to dynamically calculate the 'unused space' so that if it's over a certain amount I can display a small item in that space.
If the user then made the browser a bit wider, another post would appear to the right to make 3 columns and the small item would disappear.
A point in the right direction would be amazing, can I dynamically calculate the number of columns and therefore work out their total width compared with window width?? Any other way you can think of achieving this?
Thanks, Lezlea
My site is in beta testing: http://fishtag.world/
(source: lezlea.co.uk)
Stackable Grid should keep your columns spanning the available space and on smaller screens it should make all 100% (https://jsfiddle.net/ryan_whitlie/2sLw5bon/), but yours seem to be wrapping before you hit smaller screen size. You perhaps have some margin applied to the columns?
To achieve what you are asking for, you would be better to split that section into 2 columns, left being say 75% the full width and the right at 25%. Showing the 'posts' in the left and your other content in the right. Then when the screen size gets to a certain size, hide the right column and only show your posts using CSS media queries:
#media(min-width: 600px) {
.posts {
width: 75%;
}
.aside {
width: 25%;
display: block;
}
}
This will apply widths and show (display: block;) the two columns on any screen/device with a width of 600px or more.
Check out the working version here and feel free to change the 600px value
https://jsfiddle.net/ryan_whitlie/cg9p3kuw/
Why do 'margin left and right set to auto and max. and min. width' center an element?
#header{
max-width: 1400px;
min-width: 360px;
margin-left: auto;
margin-right: auto;
}
I do not get it.
Since auto in both right and left margins take up the "available" space equally, the element is aligned to the center.
A left or right margin with auto will take up all of the "available" space making the element look like it has been flushed right or left.
Look in this source for more information.
You can easily understand with the following demo:
div{
max-width: 300px;
background-color: red;
margin-left: auto;
}
<div>
auto
</div>
In the above snippet, you can see when you use margin-left auto the div is taking up all the available space so it pushed to right. Now, you can think by using margin-right:auto; will push the element towards the left. So, using both will force it to stay at center by taking up both available space.
It divides the sum of the empty space on the right and left sides of an element by two and uses that as margin-left and margin-right, thus centering it. Another way of thinking about it is subtracting the width of the child from the width of the parent and then dividing that by 2.
In reality, margin-left and margin-right are still set to auto, so if you try to get their values in JavaScript, you are going to get "auto", but that is the logic behind it.
The math behind it is:
marginLeft = (parentWidth - childWidth) / 2
marginRight = marginLeft
As I'm not satisfied with the exhaustiveness of the other answers, here's a more detailed explanation. In general, the w3c Recommendation elaborates on this in great detail and should be consulted for questions requiring a more precise answer.
The typical use case margin: 0 auto (top and bottom set to 0, left and right to auto) works by having the browser calculate the available space and apply it to each auto value of a property, divided equally.
In the attempt to also provide a "math behind it" example (I put this in quotes, as it's a very simplified visualisation of the actual math) is much closer to this:
availableSpace = (parentWidth - childWidth)
marginLeft, marginRight = availableSpace / amountOfAutoValues
This will work under the following conditions (simplified):
it's not absolute- or fixed-positioned
it's not floating
it's not an inline element (This is to be distinguished from "it must be a block element", which is wrong - for example, inline-block won't work)
This is, because those modes already overwrite the object's place within the document, and calculating a margin is likely not advantageous.
The only requirement is just the margin setting for it to technically apply - you only need to set a width (or max-width) smaller than the parent in order to see the effect, as in any other scenario, the available space will simply be 0.
min-width will never have any effect regarding automatic margins in this way.
You could achieve the same result if instead of max-width and min-width you used display:table along with the margin + auto value and rest of the code. If left only with margin-left it will align to the extreme right corner of the page, if left only with margin-right it will align to the extreme left, now what do you think will happen if you leave it with margin-left margin-right? I'm pretty sure you won't create a paradox. :)
-------------------------> margin-left:auto
margin-right:auto <------------------------
margin-left:auto <-------> margin-right:auto
My susy layout is wrong by 1 pixel and I don't know why:
$susy: (
columns: 12,
container: 1546px,
gutter: 26px,
column-width: 105px,
global-box-sizing: border-box
);
It returns 104px width columns with 27px gutters, the container is as set. Any pointers?
There are a few issues here:
The gutters setting (plural) takes a ratio, rather than a length. To get your proper ratio based on the length, you can use division: gutters: 26px/105px
By default, Susy output is in relative %, even if you define the grid using px. If you want Susy to output exact px-lengths, you should add math: static to your settings. In that case, you should also remove your container size, and let Susy calculate that for you based on columns and gutters.
I'm using Compass for the first time.
Instead of having 24 columns and 10px gutters, I'd like to have 12 columns and 20px gutters.
If I put "width:960px" on my #container, the .showgrid class shows me a correct grid based on this :
$blueprint-grid-columns: 12;
$blueprint-container-size: 950px;
$blueprint-grid-margin: 20px;
I've put this in my _base.scss, and here is the result :
There are 12 columns for a total width of 960px. Right.
But if I apply "width:span(12)" or "include column(12)" on my container, it shows me only 6 columns for a total width of 480px (960/2) :
The widths are wrong and based on the original sizes : 24 columns.
Do you know why and how I could fix that?
And, subsidiary question : do you know how to remove the lines relative to line-height on .showgrid ?
I have a sidebar DIV on my web page that has buttons. I have the width of the sidebar set as follows:
width: 20%;
but when the browser size is reduce then there's sometime not enough space for the buttons. Is it possible for me to have the width as 20% but also specify a minimum in px?
Yes. This is pretty common, too. Have fun!
And protip: you can always just try and find out ;)
Yes. The W3C CSS recommendation generally does not require that units for different dimensions like width and min-width be the same. (Not quite relevant side note: You can even mix different units for dimensions like padding, e.g. padding: 2px 1em;.)
Using “min width”.
min-width: 20px; for example.
But if you want its width to always be at least the size of whatever is contained, consider using display: table-cell;