I have the following layout set up in react with a flexbox:
Ideally I'd like them to align themselves left to right and cover the gaps - i.e. from the above example there are two gaps under the smaller boxes and two smaller boxes below them, would like those boxes to flyp up and fill in the last two spots.
Not sure what sort of algorithm or idea I'm looking for here, it also has to work for arbitrary boxes (though I can control for alimited range of sizes)
Related
The problem is I have two columns that will be filled with rows that are implicitly defined, and that I DO NOT want to resize the adjacent row items such that there is a space beside the components. I have tried using grid, but the result is the second image. Similarly, I use flexbox, and the row space emerges implicitly. Does anyone know a way to get this kind of 'dense' packing as in the first image?
I have an object with keys and values that I want to represent in a responsive way so that are always next to each other, but two k/v entries are stacked because of overflow on the horizontal direction, they will be aligned like a table.
Here is an example of what I am trying to accomplish:
This looks close to what I want, but does not account for the content size. max-content does not work
This also touches on it but recommends flex instead, but flex rows are all calculated independently so that rules that out.
I'm new to CSS, and I'm trying to understand the anatomy/structure of CSS grids. So far, I understand that grids have rows and columns, that they are comprised of cells, and that there are gaps between cells called gutters. If I'm not mistaken, a grid track is the region defined by the space between grid lines. So the track ends up being the horizontal or vertical portion of a cell.
I'm a little bit confused about grid lines however. My intuition is that grid lines and grid gaps are in some sense the same thing. I guess they are different in that gaps have a notion of thickness, whereas lines are just one-dimensional separations. Is that correct? But, they both denote the area between cells, right?
I may be very confused and wrong. Please help me understand the difference between grid lines and grid gaps, and how they relate to each other. A diagram would be helpful.
My intuition is that grid lines and grid gaps are in some sense the same thing.
You are almost good here. The only difference is that we don't have gaps at the edges of the grid but we do have grid lines there
From the specification:
Grid lines are the horizontal and vertical dividing lines of the grid. A grid line exists on either side of a column or row.
and
The row-gap and column-gap properties (and their gap shorthand), when specified on a grid container, define the gutters between grid rows and grid columns.
The effect of these properties is as though the affected grid lines acquired thickness: the grid track between two grid lines is the space between the gutters that represent them. For the purpose of track sizing, each gutter is treated as an extra, empty, fixed-size track of the specified size, which is spanned by any grid items that span across its corresponding grid line.
and
Gutters only appear between tracks of the implicit grid; there is no gutter before the first track or after the last track.
A figure from the same specification:
If the above grid is having gaps it will increase the thickness of "line 2" between both columns and "line 2"/"line 3" between rows. In other words, you will always have N lines, (N - 1) columns and (N - 2) gaps.
I'm new to Flexbox, Exponent, and React Native, so I'm not certain if I'm doing this correctly. Any help you can provide would be appreciated and I've provided a snack below that could be used as a starting point.
My screen has a header that's 40px tall at the top and a tab bar that's 40px tall on the bottom.
Between them, I'd like to have a full-width, full-height column that has rows of content with charts on the left, and a header (Billing, Budget, Labor) to the right of the chart with variable number of rows of data beneath the header. These rows have a key that's left-aligned (Invoiced, Not Invoiced, Total, etc.) and a value that's right-aligned (500.00, 250.00, 750.00, etc.).
Because the number of rows of data vary (3, 4, 3, etc.), I don't want to hard-code the heights of each chart row. I also don't want these rows to stretch/grow to the height of the center column, but allow for whitespace beneath them).
How can I build this so that:
1. Rows don't fill the height of the center column, but align on the top and leave whitespace below.
2. Charts are left-aligned next to their data.
3. Data figures/values (e.g., 500.00) are right aligned next to their keys (e.g., Invoiced).
Any help would be amazing. If you could provide a snack.expo.io, that'd be even better! Here's a rough example of what I mean, but you can see that the rows are stretching to the height (so there's a lot of wasted space and no empty space at the bottom) and the key/values in the data aren't justified so the key is on the left and the value is right-aligned.
https://snack.expo.io/HknEsZ5uz
I updated a few lines, does this look better? https://snack.expo.io/S1cF5bsdG
flex: 1 allows a view to fill all space available, so if you have two views on the same level of a hierarchy with flex: 1, both views split all vertical space equally. Read more: https://facebook.github.io/react-native/docs/layout-props.html#flex
I'm just getting started using the Zurb Foundation 6.4.3 XY Grid. I'm having some trouble conceptualizing how I would do the following:
On large screens, my site should look like this:
On small screens I'd like Panel B to come first, and have a fixed height of 300px:
I have a Codepen of all this here: https://codepen.io/rbrtmrtn/pen/vWYKQP
Right now there are two issues with how this appears on small screens:
I'm not sure how to make Panel B appear above Panel A when that grid-x gets collapsed.
Panel B is a web map which requires a fixed height or some kind of autosizing (like Flexbox grow) in order to work. When I resize the site and collapse the grid-x the map disappears, probably because Foundation is trying to fit the cell to its content and there is none (the map behaves more like a floated element).
Would appreciate any help sorting this out.
A coworker steered me in the right direction -- the answer was to use source ordering, which allows you to specify the order in which elements appear on different screen sizes.