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
Related
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?
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 use the method shown hear;
https://kryogenix.org/code/browser/sorttable/#lefthandheader
to add numbers to the left hand side of my table. And it works great by putting 1 at the top on the first row, 2 on the second and so on. However my table is time sensitive, and descending in order so the top row is actually the most current thing that occurred. I would like the left column to reflect that by having the highest number on top and descending to the bottom where the first event occurred.
Is there a simple way to modify the CSS to do this?
My table in question is built using PHP/MYSql. It turns out that the quoted solution to number the left hand column has at least on option, you can add an option to the CSS like this.
table.sortable tbody {
counter-reset: sortabletablescope 48;
}
Then reference it as demonstrated here: https://jsbin.com/yanihid/edit
The result is exactly as I needed it. Counting the rows starting at the highest number. All you have to do is know the count, an easy deal with PHP/MYSQL.
This question already has answers here:
Understanding grid negative values
(2 answers)
Closed 3 years ago.
And this applies to columns as well. In the same CSS code, I sometimes see the grid-row-start and grid-row-end differing by 1, but sometimes differing by 0. And they seem to mean the same thing: span 1.
For example, this CSS code being linked specified box01 column start end of 1, 3, and for box02, a column start end of 2, 2:
.box01 {grid-area: 1 / 1 / 2 / 3;}
.box02 {grid-area: 1 / 2 / 3 / 2;}
Then why would we sometimes specify the same and sometimes differing by 1? Are they identical in every way? (is it supported by the specs?)
From the specification there is some special rules to handle some particular cases:
If the placement for a grid item contains two lines, and the start line is further end-ward than the end line, swap the two lines. If the start line is equal to the end line, remove the end line.
If the placement contains two spans, remove the one contributed by the end grid-placement property.
If the placement contains only a span for a named line, replace it with a span of 1.
Basically, if the end line is the same as the start line, it's not valid so the browser will remove the end line and it will fall to auto
Then you can read:
grid position
The grid item’s location in the grid in each axis. A grid position can be either definite (explicitly specified) or automatic (determined by auto-placement).
grid span
How many grid tracks the grid item occupies in each axis. A grid item’s grid span is always definite, defaulting to 1 in each axis if it can’t be otherwise determined for that axis.
And also
auto
The property contributes nothing to the grid item’s placement, indicating auto-placement or a default span of one. (See § 8 Placing Grid Items, above.)
So if you define grid-column:1/1 it means you defined grid-column-start = grid-column-end = 1. We remove the end and it's like you only have grid-column-start:1 and by default the span is 1 so visually you will have the same result as doing grid-column:1/2
We can say both are the same but the first one (defining the same number) will be considered as invalid and the Grid Placement Conflict Handling will make it behave as the second one which is the correct way to do.
Pay attention as this is not the same when dealing with negative values. See this related question: Understanding grid negative values
There is propably other particular cases but you should avoid using the same number because it's not logical and you will rely on the browser to correct your mistake.
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 :)