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.
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 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)
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
Context for this question
We have a web page that has two scrolling grids, not paginated grids. When the first grid is nearly empty, occasional users do not realize they can scroll down to see the second grid. Other layouts (tabs, etc. are not a desirable solution).
Aside. The entire page layout is due for an overhaul, but on the Development schedule it's still 2 years away. Today, we cannot remove the grids, and we cannot change the general layout of this page.
When the first grid contains very little content, it would be good to auto-shorten the first grid so that the second grid peeks up above the fold. But when the first grid has lots of content, it's better if the first grid remains at its default height, because this grid is where the main interaction takes place, and we don't want excessive scrolling.
The challenge is that, in the grids, each row varies in height to fit its content. Sometimes a row is 2 lines of text, sometimes 12 lines of text. This causes a hard-coded height based on the number or rows inappropriate.
The question
What methods are there to assess the height of the row content in the first grid so that, if the total is less than the default grid height, we can shorten the grid? Or is there another way to look at this problem?