Source Grid — watch for invisible gutters!

Shaking The Habitual STH Examples
1

I just wanted to share this, because I’ve been tearing my hair out trying to solve a problem with grid items becoming a fixed size as the viewport decreases. It was as if they had a minimum width set, but they didn’t. Eventually last night I understood what is happening.

If you have column and/or row gaps set for your grid, they apply to every single column and/or row, even if your grid items span multiple columns or rows. That makes sense, but it’s also easy to be caught out by it, as I was.

So, if you have a four column grid, and each of your grid items fills one column, you’ll just get gaps between your items. But if you’re trying to be clever and have, say, a twelve column grid (so you can move between three and four columns, with your items spanning four or three columns each) you’ll get a grid gap between every one of those twelve columns, and not just between your three or four cards. You won’t see these gaps, but they’ll affect the behaviour of your page. And they’ll amalgamate to create a minimum width for your grid items (with twelve columns and a grid gap of 32px, this will be 96px for an item that spans three columns and 128px for an item that spans four). If you’re trying to be far too clever and want, say, a sixty column grid (so that you can have two, three, four, five, six, ten and twelve column options), well, then you just can’t have gaps. At all!

My takeaway from this is, for page layout — where you likely want gaps between items — go for the minimum number of columns you need. If there are four columns, go for a four column grid. An if you need to change to three, insert a three column grid. Either that, or use a column to space between grid items, and set no gaps at all (which might actually be a better option, since columns can be set to fixed and flexible widths, but unlike gaps these only apply to themselves).

2

Between Grid, Grid Plus and Grid Plus Pro you have all the options you could want.

You can define the row col gaps at 1000 BP’s if you wanted.

Knowing when to use Grid Plus or the Pro version is not always obvious, but I have found that if one doesn’t do what you want, the other will do it.

3

Also, don’t forget that you can enter anything in the Pro Col row gaps such as 0.3vw or 0.5rem or a Calc function.

Another way would be set the col rows to 0px and then expand the grid to create the col row gaps. I.e. a 1 col, 1 row would be something like Cols =(0.3vw, 1fr, 0.3vw) & Rows =(0.3vh, 1fr, 0.3vh)

And for a useful exercise you could build the whole thing using just Coders.

4

Yes, but 1000 breakpoints would be a nightmare to maintain! The Holy Grail, for me, is a single reusable grid structure with a minimum of settings, that can give rise to different numbers of columns and configurations. That’s why I prefer using a flexible formula to set these things (which means using just Grid Plus Pro), rather than fixed amounts at particular breakpoints. What I want is to have components that can just be dropped into the grid and resize (and restyle) themselves according to the space they’re allocated. And I’m getting there… but slowly! (Container queries will take this forward in leaps and bounds).

5

I wasn’t suggesting you use 1000 breakpoints, but just mentioned this to illustrate there are no restrictions.

Grid Plus Pro will do what you want. You just need to define a clever gap calc.

I think you may be over complicating things though. Fixed gaps look better than variable gaps IMHO.

One of the nice features of Pro is that you can drag settings from one Pro grid settings to another.

Another way to define a grid is to define 1 grid layout for the whole layout and then alter the number of items that each column spans. This will keep the same col gap so may satisfy your aim.

Eg. In a grid where you go from 4 Cols to 3 Cols to 2 Cols to 1 Col, you would define the Cols template as 12fr.

Then large BP is a span of 3 cols, next down is a span of 4 cols, then 6cols and then 12cols.

6

I was experimenting with a twenty four column grid (because I needed a text area on blog pages which was in a 7:5 ratio, because 8:4 was too wide and 6:6 too narrow — so 5fr 14fr 5fr). That’s where I realised that invisible 32px gaps were imposing a 160px minimum size on cards in a four column layout (elements six columns wide, so five invisible grid gaps inside them).

And using a calculation for grid gaps is not too complicated — for my purposes it only needs to be calculated once. I’d established that I like 16px gaps on mobile and 32px gaps at full size on desktop, but that I’d rather the grid gaps diminish gradually as the card size diminishes. This does the trick for four columns very nicely (and Grid Plus Pro is perfectly happy to have it as a value in the ‘gaps’ section). It ‘fixes’ at 16px at a viewport of 440px — so for most phones except the 480px Samsungs — and at 32px at 1080px, so covering bigger tablets in landscape and most contemporary laptops and desktops.

clamp(1.6rem, calc(2.5vw + .5rem), 3.2rem)

It’s a big more complicated than that, though, in that I want the layout to drop down to three columns for tablets in portrait/e-book reader configuration, and to two columns for mobile. But that just means three calculations, one for each breakpoint.

1 Like
7

Thankfully the elegant answer to these issues are coming in the form of sub-grids. The complexities in use described here with the grid level 1 specs have come from the fact that you cannot define a grid within a grid.
With this ability, making responsive layouts will be considerably simplified.

5 Likes
8

Interesting new feature. I’m not sure how I would use this if it becomes sufficiently implemented. Although, when first jumping into CSS Grid, what you can achieve is not obvious, yet you soon realise you can’t live without it.

Source completely transformed how I build web sites when it appeared. Ironically, I think that Stacks really shines, with the wealth of settings, the reusable child stacks settings and the placing of stacks inside stacks inside stacks, and makes the Source implementation really powerful and versatile. I think a WYSIWYG page builder to equal Stacks/Source would be a big challenge. Stacks allows us to see the structure of the grid and identify the item numbers.

The feature that I would like to see, would be a way to access the total number of items and also the last item or (last item -n) so that a grid could be made to expand selective items to fill the last row to the edge of the grid. Easy enough if you know the number of items but for variable numbers of items, such as blogs, it would be a real icing on the cake feature.

9

I sense that subgrid will come into its own with container queries, as it allows for subgrids to inherit properties from the parent. Also the :has selector will make a big difference here, too. Well, they’re all part of the new tranche of web standards, so they’re intended to support one another. In the meantime, though, I’m using lots of nested grids — which work fine for what I want to do with them.

And I agree that a WYSIWYG page builder to equal Stacks/Source would be a big challenge. The beauty of Source Grid (and, for me, Grid is Source, in the same way that Stacks is RapidWeaver) is that it allows us to build and manage grids in a logical and consistent way — grids are lots of settings, not handles to be dragged around on the page. With that said, though, where I’d like to see Stacks going is towards a split preview and settings model. I’d like to be able to click on something in the preview, see it selected, and for it to be editable in a kind of combined Edit Mode and HUD.

1 Like
10

And — this is for Isaiah — if Stacks could enable us to switch grid lines on an off in preview, as Firefox and now other browser dev tools do — beautiful! I‘d really love for this to be like a toggleable background layer, as guides and grids are in page layout apps.

11

I would be more than happy if Stacks App had no embedded Preview and you just set whatever browser you want to use, and the Preview previews directly in that browser.

1 Like
12

Grids don’t do that, Flexbox does that. The reason is that the gird a prescriptive layout in the y axis whereas flex box is only prescribed in the x axis, it is therefore free to wrap automatically in the y axis. It can thus can either fill or align items that have entered this dynamically created row.
It really is swings and roundabouts between the two but using a combination of them both (as Source Grid does) is undoubtedly the most powerful.

13

Imagine not having to define everything at once. Instead of increasingly complicated grid definitions that try to cover every possible layout element and screen size you can compartmentalise the design into modules of layout. In addition, as @jamessouttar mentions, these modules can even be controlled by container queries within their parent (macro layout) grid. Different grid elements can then even be switched on or off for different screen sizes.
Grid is a bit of an anomaly with the level 1 specs as it is the only CSS layout function that does not support nesting. The level 2 specs address this and bring grid layouts into line with the way that everything else works.

14

I meant specifically the span to end feature which is implemented in Grid Plus Pro

E.g.grid-column: 1/-1.

This works well but you have to manually apply to the last item. A way to derive the last item in a growing grid, would be handy, to then apply the span to end to that item.

I can’t wait for the level 2 stuff but it has to be widely supported first.

1 Like
15

I’ve created a demonstrator for a cards page with margins and column/row gaps defined in the way I’ve described (with clamp and calc). It also uses aspect-ratio for the cards (which are just Grid Plus Pro Item containers). There are a few other things, including a couple of invisible cards to force the row height for the two double width items, and some stuff around animation for subsequent rows. As a piece of work in progress I’m pretty happy with the way it’s working, so I thought I’d share it (and you can download the Rapidweaver file from a button at the bottom of the page).

https://shakennotstirred.net/cards/

My intention is to have a series of these for different page types, along with a component library which will all be proportionally dimensioned subgrids which can be dropped into Grid Plus Pro Items on the master page, and will resize themselves to fit accordingly. This makes sense to me as a workflow, anyway.

3 Likes
16

Very kind of you to share James - thanks very much!!

17

I enjoyed looking at your project file and the demo behaves perfectly down to 320px and maintains proportions.

If you apply the same Calc idea to the item text font size you may be able to cram enough text in.

The dummy items idea seems overly complex to me, but I am not fully aware of what you are trying to do. My usual approach is to set some item heights (which could also be a calc vh height). There are times when any height will kick things off and a bit of quick fine tuning may be needed when the content length/height is defined. However, I no longer use any vh values because it can cause those pesky while lines to the appear between between adjacent sections with dark colours at some screen heights on some browsers.

Coder, I find is perfect for creating dummy Flexbox items or for grouping stacks, to flex align stuff within grids items.

I would encourage everyone to dig into the Source Grids to understand what the fuss is all about.

Source blew “the bloody doors off” Stacks when it appeared (was it really over 2.5 years ago). There is one interesting thing that proves this beyond any doubt, that just occurred to me. Since Source was released, I have not needed to use any of Tav’s most clever and game changing stacks such as Sections and BluePrint in any Source build. I feel uncomfortable saying that, but it’s just an indicator of how versatile and powerful Source is.

18

The ‘dummy’ items are a kludge, because I couldn’t see any other way to force row heights when a row is filled with a double-width item (as they are on mobile portrait, with a two column grid). What I came to realise is that when all the items in a grid are the same size, only the first needs to have aspect-ratio applied for every subsequent row to size to the same height. Other sized items will take the same height too, if they are in the same row as one of the consistent items. But if they are in a row by themselves, that row will collapse to zero height. I guess it would be possible to create a calc() for the variable height of the rows for any given viewport and apply it to them, but it was far too complex for me to get my head around! Maybe an invisible subgrid of one-column items is the way to go but I haven’t tried this yet.

Another thing is that while this demo works on all current browsers, it collapses into a big red blob in Safari and Chrome on my ancient iPhone. So it will be necessary to do a ‘@supports not’ for the clamped items and provide a fixed-width fallback. ‘@supports not’ is a wonderful thing, allowing us to build with all the latest stuff and still provide satisfying UX for older browsers.

19

You could add a min-height to each item in px, together with a Calc height, but if you are planning to add content such as text, then each row will adjust to the longest item in that row anyway.

Alternatively, you could add a 100% transparent image with a 3:4 ratio, as an image and NOT a BG image, into every item which will define the item height ratio you want. I would just add in the responsive heights in px to keep it simple.

I think that as designers we like to admire the responsive behaviour of our carefully crafted , fully responsive work of art, when the reality is that users never see that in operation.

20

@jamessouttar Also your col and row gap Calc values look very similar to me, to using 2.5vw throughout.

So many ways to skin this one.