25 ms·
CSS grid garden
- octosphere 8y agoDupe 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/
- napsterbr 8y agoURLs are different, so I'd say dupe detector is working as intended
- dang 8y agoOn 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.
- Kagerjay 8y agoWhen is project G coming out? Been waiting forever to play that one
- warent 8y agoThis 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!
- iseeyoubydesign 8y agoyour life wont change at all ... but its not too difficult
- superkuh 8y agoThere'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.
- warent 8y agoFirefox supports it. You're aware Firefox is OSS right?
- superkuh 8y agoFirefox went walled garden in v37. That said, at least this css grid garden has a elegant fallback. Most CSS grid sites don't. Or worse, they fall back to 'mobile' sites.
- kenbellows 8y ago"Walled garden" in what sense?
- superkuh 8y agoThe walled garden I speak of is the implementation of add-ons cryptographically signed by Mozilla only. Unless you run one of the betas (w/bugs) you cannot use any add-on not approved by Mozilla. And lately they've even been removing/banning add-ons that aren't illegal but otherwise upset outside corporations (ie, the paywall bypasser that uses googlebot's http headers substituted in).
- PavlovsCat 8y agoIs there a browser you would recommend, if we ignored their HTML/CSS rendering for a second, based on ethical considerations, so to speak? I like making things compatible when I don't need anything modern, and would be interested in hearing about any browsers you think are worth supporting.
- dang 8y agoFrom 2017: https://news.ycombinator.com/item?id=14041367 https://news.ycombinator.com/item?id=14041367
- 40four 8y agoNice 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 8y agoCurious 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 8y agoMaybe designers don't have a culture of counting from 0 like programmers do?
- talltimtom 8y agoThere are programmers who don’t count from zero. And even programmers who count from zero but don’t do so consistantly as soon as they implement even the simplest personal indexation.
- ndnxhs 8y agoProgrammers 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 8y agoThere 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/EWD831.html http://www.cs.utexas.edu/users/EWD/transcriptions/EWD08xx/EW...
- pjmlp 8y agoAs 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.
- deleted 8y ago[deleted]
- revskill 8y agoFlex seems more flexible to me than CSS Grid.
- creyes 8y agoA combination of both is really ideal. CSS Grid seems great for full screen things and FlexBox is really great at laying out small components.
- aldoushuxley001 8y agoFlex has better browser support though, so I still like to stick to Flex instead of Grid.
- ben_jones 8y agoAgreed, since learning flexbox I haven't touched css grid albeit I've only done front-end for small internal tools and hobby projects recently.
- tgroutars 8y agoThey actually made another game to learn flexbox https://flexboxfroggy.com/ https://flexboxfroggy.com/
- maximp 8y agoThis is how I've learned enough flexbox to get by, and it was a total blast
- bgorman 8y agoThey are complementary technologies. CSS Grid really shines for doing the "full page layout" portion of websites. One really useful feature of CSS grid is that it composes really well with media queries, so you can create responsive websites really easily by just defining different grid area layouts for various screen sizes.
- devxpy 8y agoIs it just me or does everyone just eventually resorts to "trying everything until it works" with CSS layout? > Flex seems more flexible to me than CSS Grid. Any day :)
- adamredwoods 8y agoAttempting 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 8y agonice. couldn't proceed till i read your comment.
- vezycash 8y agoI'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?
- Vinnl 8y agoThat's what worked for me when I did this a while ago.
- lexicality 8y agoThat's what works for me, maybe take the space off after "repeat"
- protomyth 8y agocheck your spelling and where you have yours plurals. I spent a bit trying to figure out what I did wrong.
- mcast 8y agoThis would make for an interesting interview test for a front-end developer.
- bobthepanda 8y agoI feel like interviewing on something that is both extremely new and easily google-able is not the best idea.
- reaperducer 8y agoThis 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.
- niutech 8y agoIE 10 supports an ealier version of CSS Grid Layout: https://blogs.msdn.microsoft.com/ie/2011/04/14/ie10-platform-preview-and-css-features-for-adaptive-layouts/ https://blogs.msdn.microsoft.com/ie/2011/04/14/ie10-platform... or you can use a polyfill: https://github.com/FremyCompany/css-grid-polyfill/ https://github.com/FremyCompany/css-grid-polyfill/
- deleted 8y ago[deleted]
- make3 8y agothat would make me look for a job elsewhere right away
- ascar 8y agoWe are spoiled by the abundance of job opportunities.
- plzbo 8y agoMaybe displaying it in table Layout for all IE11 users would be a better solution.
- reificator 8y agoThe solution there is to document every moment of your time spent on this issue, alongside the user agent logs, and present that alongside your salary, and present it. Best case, they decide they pay you too much and you cause too much trouble, and let you go. Worst case they make her upgrade her browser so they're not dumping mountains of money on her preferences and whims. Either way, I'd be good with it if I were in that position.
- deleted 8y ago[deleted]
- lucio 8y agostart 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 8y agoI 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 8y agoThis 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.
- kristopolous 8y agoIs 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 8y agoYou 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.
- bmn__ 8y agoI played CSS Diner in 2014. https://flukeout.github.io/ https://flukeout.github.io/ Grid Garden copied the concept.