
CSS grid garden - based2
http://cssgridgarden.com/#en
======
reaperducer
This makes me sad. Not because I don't like grid. But because two weeks ago I
found out that a very senior person in the company has a computer running
IE11, and will not let IT upgrade her machine.

She recently discovered that one of the company's web sites doesn't look right
in IE11, and shit ran downhill into my lap. I checked the logs, and yep...
she's the only IE11 machine to hit any of the web sites in a year.

I spent a day and a half downgrading the site from CSS grid to Flexbox only to
discover that once I found an old machine in a closet that has IE11 on it that
I could test with that IE11 doesn't fully support Flexbox, either!

Solution: Each building on campus has its own IP address. Connections from her
building get a table version.

~~~
plahteenlahti
Interested to hear what flexbox features were unsupported? I’ve been in a same
kind of situation but was able to support everything on “IE version” of the
app by using flexbox.

~~~
davidcsally
Most of flexbox is supported in IE11, but some "defaults" are not the same as
other browsers --> see the known issues tab if you're interested, most of the
time it works but when it doesn't it's frustrating
[https://caniuse.com/#feat=flexbox](https://caniuse.com/#feat=flexbox)

------
warent
This couldn't be more timely. I was just thinking maybe a day or so ago "It's
probably about time I sit down and learn CSS grids." Love the format, thanks
for sharing!

------
dang
From 2017:
[https://news.ycombinator.com/item?id=14041367](https://news.ycombinator.com/item?id=14041367)

~~~
40four
Nice job! I had a strange feeling I had seen this before.

That being said, I love the concept. Fun way to get some practice in!

------
bobthepanda
Curious as to why CSS Grid chose to start at 1-index rather than zero, and why
the end column is one more than the position of the column that actually
stops.

~~~
chrisseaton
Maybe designers don't have a culture of counting from 0 like programmers do?

~~~
ndnxhs
Programmers don't count from 0. Its just in many languages it makes sense like
in C where an arrays name is actually a pointer to the first element and the
index says how many positions to move away from it so foo[0] is the pointer to
the first element and then move 0 spaces away.

The tradition of starting at 0 just got carried on to everything because
having a standard is better than having to memorize what everything uses

~~~
learc83
There are good reasons to start counting at 0 beyond convention. Dijkstra
wrote a small essay on the topic in 1982 called "Why numbering should start at
zero."

[http://www.cs.utexas.edu/users/EWD/transcriptions/EWD08xx/EW...](http://www.cs.utexas.edu/users/EWD/transcriptions/EWD08xx/EWD831.html)

~~~
pjmlp
As someone that started programming in languages that count from 1, I kind of
disagree with that essay.

Specially when dealing with Algol derived languages, where the indexes can be
specified in a flexible way.

------
kristopolous
Is there a more legible version of this that's not grey on oh-so-slightly
lighter grey?

I'd love to use it but I was looking at the grey box for about 3 minutes
before I realized there was text in there.

~~~
daveFNbuck
You can use your browser's inspector to change the CSS for the background
and/or text color of the box. There aren't any page loads between exercises,
so it'll stay changed as you progress.

------
adamredwoods
Attempting to use grid-column-end: -1 works visually in the watering example,
but won't let me move forward.

EDIT: Oh, I see. -3 worked.

~~~
fc373745
nice. couldn't proceed till i read your comment.

------
lucio
start counting at 1 instead of zero, ok, its valid.

column-end means really "end+1", why?

problem: when you go from left-to-right: column-start-3,column-end-5: means
column #3 is included

when you go from right-to-left: column-start-3,column-end-1: means column #3
is NOT included

So if you read "column-start-3" you don't know if column#3 is included or not,
it depends on column-end.

"column-start-3,column-end-5" should include column 3, 4 AND 5

This is from level 10:

>For example, grid-column: 2 / 4; will set the grid item to start on the 2nd
vertical grid line and end on the 4th grid line.

What's the correct interpretation of "start on 2nd and end on the 4th"?
shouldn't the 4th be included?

~~~
RickS
I believe it's talking about the vertical lines, not the column space between
them. So the "+1" is because it's talking about the rightmost edge of what
you're calling a "column".

here's an image that may explain better. I numbered the vertical edges, start
is green, end is red.

[https://imgur.com/a/xCplwAt](https://imgur.com/a/xCplwAt)

------
IronCoderXYZ
This is definitely helping my understanding of the grid system, thanks to the
author!

The only thing I would suggest is to add some explanations, maybe some
mnemonic aids and such. I'd be happy to help.

------
revskill
Flex seems more flexible to me than CSS Grid.

~~~
tgroutars
They actually made another game to learn flexbox
[https://flexboxfroggy.com/](https://flexboxfroggy.com/)

~~~
maximp
This is how I've learned enough flexbox to get by, and it was a total blast

------
bmn__
I played CSS Diner in 2014.
[https://flukeout.github.io/](https://flukeout.github.io/)

Grid Garden copied the concept.

------
vezycash
I'm stuck at level 21. This didn't work:

grid-template-columns: repeat (8, 12.5%);

Am I doing something wrong or is it a bug?

~~~
lexicality
That's what works for me, maybe take the space off after "repeat"

------
Kagerjay
When is project G coming out? Been waiting forever to play that one

------
mcast
This would make for an interesting interview test for a front-end developer.

~~~
bobthepanda
I feel like interviewing on something that is both extremely new and easily
google-able is not the best idea.

------
octosphere
Dupe detector not working as always
[https://news.ycombinator.com/item?id=18751976](https://news.ycombinator.com/item?id=18751976)

Also you should check out
[http://flexboxfroggy.com/](http://flexboxfroggy.com/)

~~~
dang
On HN it doesn't count as a dupe if the story hasn't had significant attention
in the last year or so. This is in the FAQ:
[https://news.ycombinator.com/newsfaq.html](https://news.ycombinator.com/newsfaq.html).

More explanation at
[https://news.ycombinator.com/item?id=16403654](https://news.ycombinator.com/item?id=16403654)
and
[https://news.ycombinator.com/item?id=16344002](https://news.ycombinator.com/item?id=16344002).

------
superkuh
There's no mainstream browser that doesn't suck (ie, they're all walled
gardens) that supports CSS grid. Plus the other 4 billion people on Earth not
in modern countries.

~~~
androidgirl
Use CSS grid with Flexbox for fallback.

I create my mobile version of pages with Flexbox, so if the user's browser
doesn't support it, they see the full featured mobile view. Progressive
enhancement.

~~~
zamalek
Curious how you manage this. Do you use feature detection and then apply a
class to <body>?

~~~
fgkramer
Not OP, but it is usually done by using support tags:

[https://developer.mozilla.org/en-
US/docs/Web/CSS/@supports](https://developer.mozilla.org/en-
US/docs/Web/CSS/@supports)

You'd write two versions, one for browsers which do support grid and one for
the ones which don't.

Jen Simmons has written excellent tutorials on doing fallbacks and explaining
how we can use css grids nowadays: [https://hacks.mozilla.org/2016/08/using-
feature-queries-in-c...](https://hacks.mozilla.org/2016/08/using-feature-
queries-in-css/)

And also has a YouTube channel where she explains a lot on how to deal with
css grid in the wild:
[https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag](https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag)

