Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.So I set the layout to 24. I have a div that is span-16, and a div that is span-8 last. The smaller one drops below the first because the two together are too wide. If I make it span-16 and span-7, it's fine.
Comments
Comment #1
j. ayen green commentedIt seems that the problem is the left 2% and margin-right 2% in the spans. When both are set to 0, then 16/8 fits on the line.
Comment #2
Anonymous (not verified) commentedNot in documentation yet. For the first and the last item of a row, you need to add the following class, like on 960 :
first item : alpha
last item : omega
Comment #3
j. ayen green commentedThat fixed the overflow problem, thanks. Do I need 'last' still, in addition to 'omega' ? And what should I override if I want items to touch? For example, I have span-7,span-10 span-7 on one line in a 24-layout. These are divs with background color, making blocks. When the grid is showing, they have a white bar between each of them. I'd like them to form one continuous box.
Comment #4
Anonymous (not verified) commentedNo, 'alpha' and 'omega' are the replacements of 'first' and 'last'. This is because Drupal uses 'first' and 'last' class in list so it was interfering with the styles of these.
About the div touching each other, it is an interesting thought. By default, fluidgrid, like other grid systems, creates a grid with what is called 'gutters'. All grid systems use these gutters to space out columns of the grid columns. These gutters can be an obstacle to some layout techniques. When it come to this, I usually forget about the grid system and creates a row with my own css. But the idea of having some predefine classes that would temporarily get rid of these gutters and compensate them with extra padding is a good idea that I will investigate.
It might be a little too ambitious, as this would require extra dimensions for each instance of he grid elements, but it might be worth it.
Thanks fo the input :)
Comment #5
Anonymous (not verified) commentedComment #6
higherform commentedbaal: Consider wrapping the row of span-x blocks with another div with the background color you want?
Comment #7
Anonymous (not verified) commentedI rewrote the core in SASS so it's easy to remove gutters and change size of columns. After testing around, removing gutters actually breaks the layouts. I'll have to test more on this, but it's not looking good.