-
-
Notifications
You must be signed in to change notification settings - Fork 348
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Setting A Fixed Gutter Width? #347
Comments
You can only achieve a fixed-width gutter on a fluid layout if you use padding for the gutters. That requires I realize the language here is a bit confusing. You have to set column-width, in order to get a gutter-width, and then you have to change the container setting if you still want a fluid container. http://sassmeister.com/gist/7da95c41fff076dd7266 The gutters between items will always be twice as large as the edge padding — but you can add extra padding to the container without hurting anything. |
Thanks, that is super helpful! BTW, was I right in my assumption that |
Nope. You need to use |
Boom! My mental model on this is getting better. Thanks again, closing this issue. |
Opening this thread again sorry, but this really bugs me. Let's assume I want a full-width grid of twelve columns.. I would write the following: ... That's exactly what I want and I wish I don't have to change this behaviour/options. Considering this, I would like to now set a margin to 20px.. Not one pixel more or less. How can I do this? Is it even possible to achieve without having to set a column width in pixels? As this is exactly what I don't want to do (setting a width in px)... Only pixels I want there are for the gutters. Also this becomes even a bit more tricky if I would like to add breakpoints (10px for small devices and 20px for larger ones). How would I have to do? I simply can't figure this out, sorry if it sounds stupid. Thanks |
Yeah, this is a naming problem more than anything, and one of the first things I want to fix in v3. Yes, you have to set a These settings will give you fluid grids with 20px (padding) gutters:
Sorry it's kinda ugly, I'm working on a better way. |
I see. Thanks for these explanations! It make sense, I see where you're going. I suppose you kind of get to this kind of result: http://codepen.io/roydukkey/pen/eudsn (found in this very interesting threat about that topic in css: http://stackoverflow.com/questions/7190768/css-fluid-columns-fixed-margins-the-holy-grail-of-holy-grails) Also, althought I like your suggestion about flexbox, I'm always a bit uncomfortable to use it for layouts. The grid CSS property would be perfect in that case but its support isn't good enough for the moment unfortunately. Maybe I'll give flexbox a try anyway! Many Thanks! |
Since you mention flexbox, are there plans to support laying grids out using it in the near future? I recall in another thread the question of"why flexbox?" is brought up. This is one really good reason, IMO. |
For flexbox, see #583 (among several) |
Hello, Miriam. Can I convert the value of gutter to rem / em units? If so, could you demonstrate by example how this can be done? If not, you could add this feature to the current or future versions, similar to accoutrement-scale. The code example showed above. Thank you in advance. |
@maxinakenty I don't think that feature makes sense in the scope of this project. There are lots of tools (including accoutrement-scale) that will do it for you, and using them together is straight-forward:
|
Miriam, thanks for the prompt reply. Most likely I have inaccurately formulated the question. |
I apologize. Tried to do this in Susy 3. Everything works well. |
Hello @mirisuzanne ! Thank you for your expertise ! I manage to use a fix 50px gutter with that : $susy : (
math: fluid,
columns: 12,
column-width: 500px, // it really doesn't matter what number this is...
gutters: 50px/500px, // as long as you get this ratio right...
gutter-position: inside-static,
); The problem here is that the first element has a 25px gutter on the left and the last element has a 25px gutter on the right. I would like to remove this as all my elements (those which take 100% for example) don't have a 25px left and right gutter so it makes a 25px shift between blocks. And it's the same if I create a grid inside of a another grid element, I'll have 2x25px on the left for the first element and 2x25px on the right for the last element... If I simply remove the left/right padding with first/last pseudo-element, the first and last column will be wider as it uses Could you please help me ? |
Hi @cedriccharles4 - I can't think of a good way to make that happen in Susy, or even in CSS. It would take If you just want alignment with the full-width elements, you could add gutters to them, rather than removing them from the Susy elements: .full-width {
@include gutters();
} Also worth noting that .no-susy {
float: left;
width: percentage(3/12); // span 3 columns out of 12
padding: 0 1em; // any gutters you want
} Like I said, though - it doesn't totally solve your problem. |
Apologies for asking, but I really can not figure this out. I want a grid that mimics bootstrap and/or foundation with a fixed gutter, for example,
15px
. I am pretty sure I want the setup to leverage split gutter positioning too so I can have (a) full width to a container for child elements and (b) a nice visual left and right appearance of padding.I first tried some simple settings like this but was not happy with the results. Once I got the left and right appearance of padding, the gutters were too wide on the inside columns.
http://sassmeister.com/gist/0966d2d7ff966f79bb96
Then it occurrent to me that maybe I set
gutter-position: before
, that I could get my desired results. Once I did that, it seemed the math was all off and my last column was way too big. See this demo below. I even tried addingspan(first 1)
to theone
element too, no luck.http://sassmeister.com/gist/94eeb234fc0965dc89c7
So to restate:
gutter-override
too on the global setting, nothing.before
currently broken?The text was updated successfully, but these errors were encountered: