Outstanding. I learned the Flex layout by playing this simple game: https://flexboxfroggy.com/ (from the same author I believe). I wonder if there are examples of learning through playing a game that are as effective as these two.
I'm excited to come across these! Learning through gaming is great. This is how I was able to get as far as I have using VIM: https://vim-adventures.com/ I hope there are more out there!
To me Flexbox is still pretty natural. Names might be weird but there's not a great deal to know and it was the first CSS layout that actually IMO checked enough boxes not to be maddening.
CSS was originally intended as some kind of general-purpose document layout mechanism. It sucked at that at the beginning and ESPECIALLY sucked at web-application layout. Admittedly, part of the reason was because browser-makers would not play nice together and with standards.
Meanwhile, desktop application developers have ALWAYS enjoyed decent, predictable layout mechanisms. It is so frustrating that it took the web-based world 2 decades to get their shit together.
CSS-grid is built into the CSS standard itself and should have been there from the beginning. It took way too long, but I am glad it's here now.
I added a space between the two sentences to make it clearer I'm talking about CSS grid syntax doing a better job of what it's intended for, not doing what flexbox does.
I think the distinction and the small crossover is pretty clear to anyone who's used them.
Imagine you take a piece of paper, draw 4 vertical and horizontal lines dividing the page into 16 cells. Now when you place an element in any of these cells with width: 100%, they'll take exactly the width of the grid cell. It can't grow beyond that.
You have a lot of flexibility in choosing the width and height of each cell, but they are rigid.
In case of Flexbox, we don't specify any fixed lines to which the elements will size. Instead, we say general rules saying elements can grow to as much size is available, or stay at the beginning of the row etc. The layout is determined to a large extend by the elements we place rather than on a fixed set of gridlines.
Use CSS Grid for a grid - like a spreadsheet with multiple rows and columns.
Use Flexbox for a single row or column.
So you might have a 10x10 grid and in the cell in row 3 column 5 you might want to have a bunch of images that are all in a row. Use Flexbox to layout those images.
1. For unknown number of items in one direction. (toolbar of buttons works better in flex)
2. Row-wrapping items. (ie, the unknown number of items need to flow with the screen, grid _stinks_ horrible at this)
Grid:
1. Specific forced number of columns but unknown number of rows (the control is the ultimate, flexbox still does some loosey-goosey stuff where grid stays put). Also, when I know exactly what I want and where it will go and there is no ambiguity about it, grid is perfect. Rows are implicit (ie, any number of rows) This makes clean form building a dream...
2. Specific layout with areas. Think header, columns, footer all part of a unified design. Way, easier in grid than in flexbox.
Grid has grid-gap, which is vital for making some layouts easy. Flex only has grid-gap in Firefox, so you are stuck with flippin margins for item spacing in flexbox still, yuck.
So is it just me or is the syntax for css grid a bit clunky? I'm talking about specifying ranges using "1 / 4" to mean 1-3 inclusive, or having to separately specify grid-template-rows and grid-template-columns each time. It makes it both hard to learn in the first place, but also hard to remember for casual users (people who use it once a month or so for a new design).
Tables don't have the same issue -- once you learn the syntax for tables, you never forget. And even bootstrap is a bit more memorable. But css grid always requires a few trips to stack overflow.
Everything else about it is fantastic, but I wish they thought more about intermittent users.
While I agree with it not being as suitable for intermittent users as table, it is also much more powerful. And, you need not separately specify rows and columns.
That is 90% of my use case for grid. For entire page layouts, I would use grid-area so I can place stuff where I want and move it around on mobile. Grid rows are implicit with the above code, so I so I have a mini-framework with utility classes for a few different column scenarios. (3 columns, column with compressed/flexible combinations for things like forms, etc...)
I personally dislike it. Sure, its powerful and is maybe an improvement over what we had before, but maaaan its so complex compared to desktop UI libraries I've used, especially QML with columns, rows, grids and anchors.
Simple example, in the Grid Garden, on Level 3: grid-column-start is the grid cell it starts on, but grid-column-end is the cell after the one it ends on (half-open range), but on Level 4 when start is 5 and end is 2 its the opposite: the end column is included but the start one is not. Also, why would you do it in reverse like this even? And in Level 6, why -3 and not -2?
Honestly, I'm more confused now than I was before. At least placing the top-left corner and using span makes sense to me. I guess its better than making grids in other ways, but why did it have to be so weird?
Microsoft doesn't consider IE a browser anymore, they call it a "compatibility solution"[0][1]. If a site looks bad in IE, I think that is ok these days. (functional but ugly, is there an industry phrase to encapsulate this idea?) IE 11 was released 5 year ago...
Thank you. I guess I always considered that a phrase regarding features where a browser doesn't have a feature yet, but will in the future. But I guess it works well for the other direction as well.
(ie, a browser that will never have any new features)
Progressive Enhancement: Starting from some baseline, ideally static content, and building in features that newer, usually visual browsers can support
Graceful degradation: What happens if things don't work perfectly, or some browser doesn't support a feature, or network connectivity is shit so your js file doesn't load.
Great work with the tutorial. One question though, aren't flexbox and grid supposed to be complementary systems? The history part seems to suggest that css grid is the next step in the evolution, or an improvement over flex.
Yes! Named areas are the best! The thing I can never decide is whether to use descriptive names or stick to single letter (since single letter helps visually clarify the intended layout)
Since CSS isn't really space-sensitive, you could just pad unevenly matched names with spaces, and then layout should be reasonably clear in any standard monospaced text editor.
Tried this and their froggy game a few months ago. I thought it was cool, but I felt it didn't translate well into the real-world. I still have significant issues figuring out how to do layouts in CSS and I still hate trying to do so.
This is completely normal. Flexible layouts in any UI system are difficult. I was surprised that the authors of all the popular CSS books and courses usually skip or barely cover that part. Apparently they know it's a topic difficult to explain with short snippets of CSS and HTML. Too many moving parts, especially with dynamic content. In the end, you learn by doing it.
I created a CSS Grid course on Udemy at https://www.udemy.com/css-grid-with-react/. My goal was to use it to build an Instagram web app clone. What I learned was that a lot of the features are really cool to play with but many lack practical use cases, its strong suit being its ability to go in both row and column directions. However despite trying I couldn't think of any use-case for configuring rows (going vertically). I found the grid-template-columns to be most useful, but the grid-area feels fairly gimmicky, as if you were building a quilt. Perhaps for a dashboard application. Overall, I just use flexbox now, even though CSS Grid has a cleaner API.
56 comments
[ 0.20 ms ] story [ 993 ms ] threadhttps://lrnj.com/
https://codepip.com
People like to make fun of Javascript but CSS doesn't get enough heat. It was absolutely awful and still is in many ways.
Even Flexbox is a convoluted mess with a strange naming scheme.
CSS Grids just makes so much more sense intuitively for what it's trying to do.
To me Flexbox is still pretty natural. Names might be weird but there's not a great deal to know and it was the first CSS layout that actually IMO checked enough boxes not to be maddening.
Meanwhile, desktop application developers have ALWAYS enjoyed decent, predictable layout mechanisms. It is so frustrating that it took the web-based world 2 decades to get their shit together.
CSS-grid is built into the CSS standard itself and should have been there from the beginning. It took way too long, but I am glad it's here now.
I think the distinction and the small crossover is pretty clear to anyone who's used them.
Grid: two dimensions and handling a known amount of reasonably sized elements
You have a lot of flexibility in choosing the width and height of each cell, but they are rigid.
In case of Flexbox, we don't specify any fixed lines to which the elements will size. Instead, we say general rules saying elements can grow to as much size is available, or stay at the beginning of the row etc. The layout is determined to a large extend by the elements we place rather than on a fixed set of gridlines.
Use Flexbox for a single row or column.
So you might have a 10x10 grid and in the cell in row 3 column 5 you might want to have a bunch of images that are all in a row. Use Flexbox to layout those images.
https://stackoverflow.com/questions/55064488/what-are-the-ar...
div {display: grid };
in my basic styles but be aware of some cases where flex may be more appropriate.
1. For unknown number of items in one direction. (toolbar of buttons works better in flex)
2. Row-wrapping items. (ie, the unknown number of items need to flow with the screen, grid _stinks_ horrible at this)
Grid:
1. Specific forced number of columns but unknown number of rows (the control is the ultimate, flexbox still does some loosey-goosey stuff where grid stays put). Also, when I know exactly what I want and where it will go and there is no ambiguity about it, grid is perfect. Rows are implicit (ie, any number of rows) This makes clean form building a dream...
2. Specific layout with areas. Think header, columns, footer all part of a unified design. Way, easier in grid than in flexbox.
Grid has grid-gap, which is vital for making some layouts easy. Flex only has grid-gap in Firefox, so you are stuck with flippin margins for item spacing in flexbox still, yuck.
Tables don't have the same issue -- once you learn the syntax for tables, you never forget. And even bootstrap is a bit more memorable. But css grid always requires a few trips to stack overflow.
Everything else about it is fantastic, but I wish they thought more about intermittent users.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-templa...
And, if you find yourself repeating yourself, you can use variables!
When I first learned grid, I could only figure out one or two things. Then I got ok with a few things, then I went crazy and made a magic framework.
Now, I only use primarily these:
That is 90% of my use case for grid. For entire page layouts, I would use grid-area so I can place stuff where I want and move it around on mobile. Grid rows are implicit with the above code, so I so I have a mini-framework with utility classes for a few different column scenarios. (3 columns, column with compressed/flexible combinations for things like forms, etc...)Simple example, in the Grid Garden, on Level 3: grid-column-start is the grid cell it starts on, but grid-column-end is the cell after the one it ends on (half-open range), but on Level 4 when start is 5 and end is 2 its the opposite: the end column is included but the start one is not. Also, why would you do it in reverse like this even? And in Level 6, why -3 and not -2?
Honestly, I'm more confused now than I was before. At least placing the top-left corner and using span makes sense to me. I guess its better than making grids in other ways, but why did it have to be so weird?
It looks like IE11 doesn't have full support for flex box or css garden..is that correct?
https://caniuse.com/#search=flexbox
Grid: "Partial support in IE refers to supporting an older version of the specification"
https://caniuse.com/#search=grid
IIRC IE implemented Grid first but their spec had enough problems that the standard isn't much like it.
[0] https://www.zdnet.com/article/microsoft-security-chief-ie-is...
[1] https://techcommunity.microsoft.com/t5/Windows-IT-Pro-Blog/T...
(ie, a browser that will never have any new features)
Progressive Enhancement: Starting from some baseline, ideally static content, and building in features that newer, usually visual browsers can support
Graceful degradation: What happens if things don't work perfectly, or some browser doesn't support a feature, or network connectivity is shit so your js file doesn't load.
It's iffy, but IE was the first to support any grid spec. I'd build a float based layout and progressively enhance newer layout methods
Best 40 minutes you'll spend if you want to learn CSS Grid! :) First 5 mins are a bit of history, with grid starting at the 5 min. mark.
To me the named areas are the first time that CSS layout makes sense and I first did layouts in tables in the late 90s.