How I Got There Step 1: Get the widths with Susy. Use Flexbox only for the vertical work if you’re using Susy at the same time.
Let Susy do what it’s good at: horizontal work. Under the hood, Susy’s span mixin sets widths, right and left padding, and right and left margins. It took some experiments to figure out a clean way to mix Susy and Flexbox to get the grid I was aiming for. Unfortunately, what I found there didn’t plug-and-play with Susy. Karen Menezes has a great sequence of examples using Flexbox for vertical alignment.
Its gallery mixin unfortunately doesn’t necessarily fill the parent container or care about the grid’s sibling’s height.įlexbox helps a lot with making vertical alignment responsive. It wraps up all the horizontal math so we just have to think about columns, spans, and, if we want, gutters. While Susy offers a grid system that’s completely flexible horizontally, it doesn’t attempt to do the same vertically. Susy makes it really easy to make widths across the page responsive. So vertical alignment of the items in the grid has to be done relative to the large-item without knowing its height. Any dynamic calculation of the height of the large-item would be difficult to maintain because its height also depends on text contents outside the square. Since the large-item contains a responsive square, its height will vary with screen size. The width of the large-item is set by Susy. What I found tricky here is that the grid on the left has to be vertically aligned with its sibling ‘large-item’ element.
The rest of this post will walk you through how it works, but you can also interact with the code this post is talking about here on Sassmeister*. I wondered, could Susy and Flexbox play nicely together to create this complex layout? Indeed, they could and they did! For example.In the middle of a responsive page using Susy, I encountered a layout which required vertical alignment across different kinds of elements, ideally without hard-coding a dimension anywhere. horizontally for columns and vertically for rows). vertically for columns and horizontally for rows), whereas align-items always aligns content in the cross direction (i.e. Text-align: right // you might also want to use this so that your text is aligned to the far right side.įlex boxes can be a bit tricky since the justify-content property always aligns content in the same direction of the flex box (i.e.
0 kommentar(er)
