I don't think the example she uses is a good one. That thing is obviously achievable using absolute positioning, which in this case is arguably easier and will give you much better browser support.
Also, the other examples she uses are really weird. Boxes of varying widths and heights. This is just not a thing in current websites.
The flexbox example where she ends up with 3 items on the first row and 4 on the second is just fantasy according to my experience. That would only work for a manually crafted page, whereas most websites with that much content items are auto-generated from some backend (even if it is markdown files in a static website generator). Otherwise please show me how can I achieve that effect with similarly sized items and how do I make it responsive.
Responsiveness with Flexbox or CSS Grid is best achieved through media queries. You could make a really simple Flexbox or CSS Grid site with no media queries and have it be responsive, but if you want complicated layouts you'd make use of media queries. e.g. named grid-template-areas and media queries play really nice together.
I use a mix of flexbox and floats to achieve any desired layout for RWD
Grid only has 87% browser support
I've been struggling to find use for Flexbox with CSS Grid. Flexbox is good for components still, but CSS Grid can do that stuff too and the automatic spacing with grid-gap is so damn appealing.
(2) This is going to sound stupid...but if you don't have a grid. Flexbox is a more flexible tool in this more flexible case.
I want to left align one element and right align another, keeping them in the same row.
Flex makes this very easy:
<div style="display:flex; justify-content:space-between">
<div style="display:grid; grid:auto/repeat(auto-fit,minmax(min-content,0)); justify-content:space-between;">
It's strictly less effort to do this with flex, but I expect that as soon as you have more than two single-word divs as children, Grid becomes more useful.
For me the biggest issue with IE grid is the lack of support for auto-positioning of elements. If you don't rely on that for your design you can support IE10+ pretty well.
For example, I can't click on certain elements, dragging to make something bigger actually makes it smaller, etc. This will be a really nice tool once the UI is ironed out.
There are some really nice touches, like when you drag a grid boundary, it highlights the changing properties in green. I'd love to see that expanded to also highlight when you have an area selected - highlight on the side what rows/columns it is participating in.
There are a few things that would be nice to touch up - when you have a grid area at the top, and you attempt to create a grid inside it, the 'tabs' at the top left and top right get obscured behind the top header. A concept of a document outline on the left might be nice, too, to understand which grid exactly you are editing, when there are nested grids.
This is very cool, though. :)
Reminds me of this offline tool: https://cssgrid.cc/ which is also quite well rated
It looks promising but I really don't like having to download software to make a web layout.
Mainly just posted the link to share the knowledge :)
What's weird is that my eye sees the word `tit` before the rest of the context. I'm not a weird pervert or anything as far as I know. It actually does cut through the signal to noise in internet promo.
Loading failed for the <script> with source “https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lod....
What I see in the editor is totally different than what comes over to codepen. Seems like this tool has some amazing potential!
tries it out
Wow, that's amazing. I'm tempted to build a new gui right now to replace a rather long in the tooth linear divs.
“I’ll take ‘L.A., You tit’ for $1000”