I am trying to acheive the following layout using a CSS Grid.
Is it a Grid with 8 columns and 3 rows where the first larger content (an image) spans three columns and 3 rows or do I size the first column to be a higher Fractional Unit (FR) that the second and third columns?
Does the same solution work for the final "column" of text and basket UX?
Related
I am trying to start grid column from half of the very first column.
I tried grid-start-column with different values but it's not working. Basically, it should be like following:
grid-column: 0.5/7
I know this is not the valid code, but just for explanation I write that.
Is it possible to start a column from the half of the column?
Is it possible to start a column from the half of the column?
No. It is not.
Let's say you have a grid container with five columns and want to start spanning from halfway inside the first column (grid-column: 1.5 / 5 ). This won't work because you're not starting at a column line. More technically, the grid-row-* and grid-column-* properties accept only integers as values.
However, there is a simple workaround:
Instead of five columns use 10 columns.
Then start spanning at the third column (grid-column: 3 / 10).
This creates an equivalent layout, which looks the same visually, but with more precise control of the columns.
More details here: Changing div heights using CSS grid
I have two columns, one of values for a variable and another of rankings of those values. The rankings column works fine; it is aligned left and 70% of the size of the values column. However, in the values column, all values in the column align right (as I want them to) except for the last value. The issue seems to be related to the number of characters in the value.
Here are the two columns
Any ideas?
It seems the last value is still aligning-right, but as you mentioned with the increased values in the left column it is pushing them together. If you are able, increasing the overall size of the column to account for increased values. (e.g. increase column padding and/or width).
I have a collection with a dynamic number of items, ranging from 2 to 20.
They are displayed in wrapping rows with the following style rules:
flex-wrap: wrap
Number of items per row varies depending on the viewport's width.
Is there a way to limit number of visible rows to a certain number, e.g. 2?
Not sure how to describe this exactly but here goes:
I have a 3 column design, and there is a list of items in each of the columns.
I need to have:
1) Each column's list items must aligned so that the left side of each word lines up
2) Each list itself must be centered within its column. (This of course means that list items on their own won't necessarily be dead center inside their respective column)
I would prefer a CSS solution without javascript/jQuery.
I have an example of bootstrap code that I am working on here to help explain what doesn't work for me:
http://bootply.com/112003
The first row is what happens when the text is centered within each column. Condition 2 passes, condition 1 fails.
The second row is what happens when I divide up each of the three colums into 3 subcolumns. Condition 1 passes, but condition 2 fails. This is subtle. While each list item is in the center subcolumn, overall the list isn't in the dead center of that column. (Imagine the list is one item if that helps think about the problem.)
Thanks to anyone who can try to help me out. This one is driving me a little bit crazy :)
In Flex4 we use Grid, GridRow and GridItem to layout the components of our screens. Most screens look OK, but quite a few appear with large amounts of space between the label and field. This mainly happens when we want to have something like the following scenario...
Name [____________]
Age [__]
Gender [_]
Details
[__________________________________________]
[__________________________________________]
[__________________________________________]
|<col 1>|<------------ col 2 ------------->|
|<---------- grid and row width ---------->|
...where the Labels are in the first column, the top three fields are in the second column, and the bottom three fields span across both columns. Above is how we would like it appear, but Flex renders it like this...
Name [____________]
Age [__]
Gender [_]
Details
[__________________________________________]
[__________________________________________]
[__________________________________________]
|<--- col 1 --->|<-------- col 2 --------->|
|<---------- grid and row width ---------->|
We don't have the ability to set individual column widths in each screen as a) there are thousands of screens and b) the labels and components can be internationalised.
I can't quite work out the algorithm they use to assign each column its width, but I think it looks for the widest component in each column and then uses these to assign each column an appropriate proportional width.
All we want is for each column to be as thin as possible so it just contains just its widest component (ignoring those that span of course), and doesn't have any extra whitespace. Does anyone know how to achieve this result?