1. Grid columns and rows are 1 indexed instead of 0, ensuring a coming decade of mistakes due to the mismatch with Javascript (and, y'know, everything else) conventions for arrays.
2. Grid extents use the "one more than end" convention instead of "length", which is sorta confusing. But then they call it "end", which is even more so.
(edit) more:
3. grid-area's four arguments are, in order (using normal cartesian conventions to show how insane this is): y0 / x0 / y1 / x1. Has any API anywhere ever tried to specify a rectangle like this?
* grid-column-index-start
* grid-column-index-end
* grid-column-length
PS: I have to say though that this grid thing is fucking awesome, and this game to learn this grid thing is fucking amazing as well.
I've being coding HTML since 2001, and have started using CSS in 2005. I can say that I've been dearly missing tables until now.
but consistent with the rest of CSS IIRC, for example nth-child starts at one
This is opening up a situation where you have a 2D Javascript array for a model and a bunch of components in the layout (a chessboard, imagine). And the coordinates won' t match!
Not for rectangles, but the closest example of Y/X I can think of is GW-BASIC's "locate". It gets row number first and column number next. I.e Y/X
Is Chrome 56 so outdates that this grid box doesn't work with it?
Or, perhaps, does the game only check if I'm running the "latest" version, regardless of which browsers do or do not actually work with Grid Garden?
Edit: Oh, wow, 56 is that outdated. Talk about cutting edge technology?
1. Hamburger menu -> hunt for the 'about' -> version 54. Great!.. or..not? Is that old?
2. Google "google chrome current version" -> skip past a few 3rd party sites detailing how to find the 'about' page -> Choose what I assume is the product page: https://www.google.com/chrome/
3. No version number in this page. In fact, no mention of browsers at all! The page appears to be an advert for chromebooks. In the bottom left, in the site-navigation footer there is 'browser' under 'products'.
4. Ah, this is more like it. This looks like your typical marketing website/landing page - fancy feature list, big download button, but... no version number? -> Click "Download"
5. A terms of service and a download button? What version am I going to "Accept and Install"?? Filename it wants to download is "google-chrome-stable_current".. great! Is that the version I currently have?
Unsurprisingly wikipedia has all the information I wanted: https://en.wikipedia.org/wiki/Google_Chrome_version_history
But my steps were:
1. Hamburger, Help, About. Says my Chrome is out of date.
2. Click update button.
3. Click restart.
Google Chrome is out of date.
Version 54.0.239.240 (Official Build) (##-bit)
Update available: Version 57.0.2987.133This made me uncomfortable though (about CSS grid, not about the game):
grid-area: row start / column start / row end / column end;
So you have to put the rows (Y axis coordinates) first and columns (X axis coordinates) second, i.e. the opposite of how it's done in every other situation - i.e. draw_rect(start_x, start_y, end_x, end_y)
(1, 1, 3, 4) in every other language would draw a box 2 wide and 3 high, but in css grid it selects an area 3 wide and 2 high.
Also the fact it uses 'row' and 'column' to describe the gridlines rather than the actual rows and columns irked me.
I'm sure I'll get over it!
1: https://en.wikipedia.org/wiki/Index_notation#Two-dimensional...
That said, I don't tend to use the shorthands.
Why isn't 0 the left most line as column and the top most line as row. That would make so much more sense, IMO.
What could be the reason they haven't done it this way? Or are 1 based arrays normal here?
Oh well, maybe in 5 years time I can make use of this.
It's been supported (albeit prefixed) in IE since v11 (pre-11 versions are <<1% these days), which makes Android browser the only significant current version lagging.
In fact, one could observe that Chrome is the browser "holding this feature back", given the very high percentage of people on version 56 of Chrome (which will decline very rapidly given Google's aggressive browser updater).
TL;DR: if you start using CSS Grid today, it'll probably be widely supported by the time you commit your code.
The IE/Edge implementation is fairly different at this point as the spec has changed quite a lot. It probably isn't too worthwhile considering.
I wish, I guess you don't do much enterprise intranets.
For example if you have 1fr 1fr 1fr that will give you three equally large columns that take up the rest of the space, but you can also use 0.33fr 1fr 1fr which gives you one column that's one third the size of the other two.
I'll work on improving the explanation of level 21 and fr units in general.
my solution to level 21 was one 50px column, three columns taking equal share of remaining space, one 50px column.
grid-template-columns:50px 1fr 1fr 1fr 50px;You can use it with @supports and robust fallbacks now, but that does lead to writing the same layout styles twice basically. I don't know how desirable that is.
It ain't perfect, but it works pretty decently.
Otherwise the game was a great way to ease in to grid.
For all elements not explicitly positioned, sort by `order` value. If two elements have the same `order` value, sort by the order they appear in the source.
So in the game, setting the `order` of the `#poison` to any value greater than 0 (the default) will move it to the end.
There is an alpha polyfill effort here. https://github.com/FremyCompany/css-grid-polyfill
Regarding speed, here's the author's take.
> I wouldn’t say this polyfill is slow by any measure, but your mileage may vary on mobile devices. My advice would be to use the polyfill only on tablets and desktops at the moment, after you have tested the compatibility and performance extensively on a representative number of devices.
Also, there are js layout libraries used with similar functionality, so one can expect that it is possible to implement this feature with the same efficiency.
| <- 0 1 -> | <- 1 2 -> | <- 2 3 -> |
That makes more sense.
Jen's got lots of great links here: http://jensimmons.com/post/feb-27-2017/learn-css-grid, including thoughts about how we're going to be able to use all these new layout techniques in ways both new and old.
It's an exciting time to be designing on the web :->
So with CSS Grid and a few media queries it's pretty trivial to have a full-on, really robust grid layout on a desktop site and have it gracefully reflow itself into a column layout to render on a phone, with source element ordering being completely irrelevant.
Or at least, it will be when the mobile and desktop browser support picture for it is good enough.
But (and nothing against the author of the game)...
I'm going to jump on the bandwagon here of others wondering just what the person or committee who thought up the API was smoking when they came up with it?
At first, it made kinda sense. Nothing too troubling.
But the deeper it went, the less it made sense. I don't have a problem with 1 vs 0 indexing (because I started coding in old-school BASIC back in the dinosaur days of microcomputing - so that doesn't bother me much).
It's just that the rest of the API seems arbitrary, or random, or maybe ad-hoc. Like there were 10 developers working on the task of implementing this, but with no overall design document to guide them on how the thing worked.
I'm really not sure why there's two (or three? or four?) different ways to express the same idea of a "span" of row or column cells, based on left or right indexing, or a span argument, or...???
Seriously - the whole thing feels so arbitrary, so inconsistent. This API has to be among the worst we have seen in the CSS world (not sure - I am not a CSS expert by any means). I can easily see this API leading to mistakes in the future by developers and designers.
We'll also probably see a bazillion different shims, libraries, pre-compilers, template systems, whatever - all working on the same goal of trying to fix or normalize it in some manner to make it consistent. Unfortunately, all of these will be at odds with one another.
I'm sure JQuery will have something to fix it (if not already). Bootstrap too.
The dumb thing is that had this been designed in a more sane fashion, such hacks wouldn't be needed.
Anybody have an explanation for this surprising behavior?
1 means "the first grid line" aka the top edge of the grid , and -1 means "the last grid line" aka the bottom edge of the grid.
grid-row is a shorthand property, and giving just one number is equivalent to specifying it as grid-row-start, so your declaration is the equivalent of grid-row-start: -2
Specifying a negative counts from "the other side," but it doesn't change how the automatic span/end is calculated. It's still 1 grid-line "further" by default. This is why you need to use -2: with -1 you're saying: occupy one row starting from the far bottom edgeline of the grid, going down (meaning the first row outside the grid).
To get the last row, you want to say "start at one grid line from the bottom and go one line down," meaning you want grid-row-start: -2, or in shorthand grid-row: -2.
You'll probably end up using both of them - grid for larger layouts and flexbox for smaller components. They work together fairly harmoniously.
Ever heard of this thing called "contrast"? Could use some.
I would never use CSS grid to do what this game is asking me to, so even though it helps me learn the syntax and properties, it's not helping me learn how it's going to be applied to an actual website.
grid-column-start: 0 - doesn't exist grid-column-start: 1 - leftmost square grid-column-start: 2 - 2nd square left to right grid-column-start: -1 - also doesn't exist? grid-column-start: -2 - rightmost square
Very strange. Although the concepts are neat so far.
The / notation in grid-column: 2 / 4;
is interesting. I'm surprised it's not similar to say margin: 20 30 20 20;
where there's no slash, just an ordering to remember (clockwise from top).
Default span is 1 which is sensible so grid-column: 3 === grid-column: 3/4 === grid-column: 3/span 1;
Wow the fr unit is pretty neat!
You can see where the slash is very useful in grid-template which makes a lot sense for dynamic numbers of rows and columns.
Very fun. I still have some questions about the numbering, but a great way to learn about CSS grid and have a bit of fun.
edit: scratch that I was confusing css grid for flexbox, my browser does not support css grid yet.
One more excuse not to use HTML tables in our toolbox
Rule#1 of GUI every geometry manager will reinvent Tk/Tcl poorly saying it is crap.
As a side note, I find the grid API confusing as well.
