I remember "the Holy Grail of CSS" (the actual term that was used) being an equal height, three-column layout that worked in Internet Explorer 6. I knew a guy who actually figured it out with the CSS of the early 2000's, and it seemed like magic! 😅
Same here! I find Grid way more enjoyable and satisfying to use. Flex for navigation and elements that wrap (like post tags). Otherwise, Grid is king for layouts
I default to grid too. I use flex if the children need to resize independently from one another based on their content, otherwise grid usually gets the job done for me.
I think the problem is grid is that it has to many CSS properties and people keep forgetting them. It does not help that each property also has several way to setup (grid-template-columns, grid-auto-columns, grid-auto-flow, grid-column, grid-column-gap etc.).
I mean that's just in general a problem with HTML/CSS. It's turned into this platform where everything is supposed to be possible, it's infinitely flexible and thus also infinitely complicated. Building layouts from scratch with simpler tools is more labour intensive, but also easier to understand. And of course as long as we're all still using and building for the web realistically these simpler methods will _probably_ not really see much use.
@@hannessteffenhagen61when with flex i could learn it, with grid i needed to reopen docs to be sure what property that was... Grid has too many options compared to flex
It's not that hard if you understand the system. 'grid-template' defines explicit grid (can be shorthanded to 'grid'). 'grid-auto-*' define implicit grid (can be shorthanded to 'grid' other way with 'auto-flow' keyword). 'grid-auto-flow' defines how elements are fit within grid one after another. 'grid-row/column/area' are just saying where to place element (like grid coordinates). 'gap' is just gap between rows and columns ('grid-' prefix is redundant for it).
I’m with you Kevin on this topic. I do still use flexbox a lot, but if “I was stuck on a desert island with one option “, it would be grid. I also use the sass version of bootstrap a lot because it is so good and kept up to date.
@@atlantic_love no. I install via npm. It gets bundled with the app via webpack. I also typically use bootswatch themes. Here is a typical setup when I have both bootstrap and bootswatch installed via npm $navbar-padding-y: 0.2rem; $enable-gradients: true; $secondary: gainsboro; $body-color: lighten(black, 20%); @import "bootswatch/dist/spacelab/variables"; @import "bootstrap/scss/bootstrap"; @import "bootswatch/dist/spacelab/bootswatch"; @import 'ngx-toastr/toastr'; input[readonly] { background-color: gainsboro; }
I think it would be the other way around. 99% of layouts can be done in grid. When I was starting out, I watched so many tutorials and spent so much time practicing grid that I became very comfortable using grid over flexbox. Nowdays with subgrid, its even more amazing.
I used to be all about flexbox, but recently I've implemented a lot of of grids, except for stuff like navbars and such. It's quite nice and very easy with responsive design.
I like to think about Grid and Flex as two different families: Grid are parents being more strict and telling their childs what to do (And when poorly done it can lead to childs not adapting well) Flex are parents being less strict and allowing their childs to do what they want (And when poorly done it can lead to childs messing everything up) No family is perfect but as long as the work is done they will be fine.
Yep, that's why I started to prefer grid: just set rules on parent and children are just fit within. There can be even just text child. You can't align text childs with flexbox that well.
The other way to word it: grid is for layout. Strict rules to how the content must be represented in given space. Flexbox is literally for flexibility. Things like toolbars (it was originated from) where elements can move along in various ways, and it's important to give children some freedom. One can be used instead another in simple cases, e.g. flexbox can be used to make layout to some extend, but that's not the best or most convenient usage. Flexbox is almost useless for vertical directions. Grids cannot make 'margin: auto' separator between group of elements like flexbox (again something like toolbars).
After watching few of your videos about grid I actually started to use grid way more since it tends to just solve the same problem in an easier manner. Not everything needs to be and should be a grid layout, but whenever stuff starts to get complicated, there's a good chance that grid cracks it.
I started using grid much more about 2 years ago, and while it took a while to understand, using grid make a whole lot more sense and is way better than flex in certain layouts. I think where most people struggle is named grid template areas and lines, which is much more complex but isn't necessary. One can do a lot even with tthe simple ones. Those who dismisses grid are giving it less credit than it should. It will not go wrong to make the effort to understand grid (and subgrid!). It opens up a whole world of a difference and possibilities.
At my first year as FE dev I was using only flex - because I had no other choice I had to support older browsers. A year later I had already dropped the older browsers support and I was still using mostly flex for stuff. But after watching some of your videos I shifted to grid and now I use it even more than flex because I realize how much more "flexible" it is that flex. Lol. Thanks Kevin.
Yep, you've made a convert here! I've used Grid (sparingly) in the past, but found it to be more cumbersome to understand and implement than Flex, so ended up using Flex almost exclusively. Your simple examples in this video have definitely worked to show me that Grid is pretty much every bit as easy (if not easiER in many cases) to use than Flex. Gracias! 😊
Using grid for overlapping text on an image is a genius use case, never thought of that! The other day I was creating a landing page with a hero image and h1 using flex and found this very limiting in terms of what I could achieve. Thanks for the heads up.
I just learned grid and used it in a project. It´s an amazing tool. And with all tools, you just need to know when and how to use it to it´s maximum potential.
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) - is that legal? I mean it looks like cheat :D Awesome video. I've changed my mind and my opinion about grid layout. Definitely to favourites playlist. Thank You Kevin =)
Kevin Geary's dynamic layout video, for Bricks for WordPress, really opened my eyes to what grid can do, and how so many websites today are like 99% grid.
Just started watching, but want leave this comment for people that don't use grid over flex because it's too complicated. I was like that before. But there are some scenarios where you can't exactly get the layout you want with flex easily. Now after taking a little bit of time to practice grid, this is now my to choice.
I know a decent amount of grid, but I usually end up having to look something up. Flexbox I have down, it's easy, but I want to be as familiar with grid as it! Please Kevin, teach me all of your grid secrets lol. I'll go back and watch the getting started video just in case.
You've mentioned you need a media query if you need to change number of columns in flex. That is true, but it's worth noting that in many cases you would actually need a container query... And container query would make things even more complicated. But when you use grid and min-max then size is actually based on the container size (even when th browser doesn't support container queiries). So using grid when you need to have columns then repeat(auto-fill, minmax(200px, 1fr)) is actually like a container query.
Grid certainly makes responsiveness easier. I had a website I just finished entirely with flex and I went and redid the whole thing with grid. There a learning curve of adjustments but once you figure out and incorporate subgrids you have more control
you are doing always helpfull videos man thank you, you got my like on overlapping content :) that was new to me and i will definitely try to get used to grid
I would personally solve the first problem with max-width, that'd be a perfect solution and if you want your flex container to also possible change size, when then max-width can be something like calc(100% / 3 - 3px)
I'm working off a design thats a lot like #3 in your example with overlapping content. My first thought was grid. If the content changes but the layout doesn't, it's time for grid!
00:00 📚 Grid layout can be simple and offers advantages over Flexbox, especially for certain tasks. 00:31 🧱 Grid is more effective for creating consistent columns and rows compared to Flexbox, avoiding issues like uneven element stretching. 02:50 🛠️ Using Grid simplifies layout management, like setting columns or rows without needing additional Flexbox tweaks. 04:51 🎛️ Grid allows for a structured, responsive layout that works seamlessly without extensive media queries. 05:37 📏 Spanning columns and rows in Grid is straightforward and avoids the complexity Flexbox requires for similar tasks. 06:47 🖼️ Overlapping content is easier to achieve with Grid, which handles complex layouts more naturally than Flexbox. 08:21 🌐 Grid has strong browser support, often better than many other CSS features, making it a reliable choice for web layouts.
That video at the end is for my viewing pain. Flexbox is a little bit easier to follow for me. I was still using floats for everything until I discovered your videos last year.
i find myself using a mix of flexbox and grid. Like for example i use flexbox to layout the main content sections or simple lists. I use grid for specific things like creating a card with an image description and title. Ill use a grid to set the image in front and stack text elements like title and descriptions. I could do that with flexbox but then i would be nesting flexbox into flexbox into flexbox to get it to work.
I don't know, I can speak for myself - my work only improved since I started using grid after one of your recent videos. It's not a silver bullet, but it takes a lot of hassle away. Especially with the logic controls sizing of children / lets children choose their dimensions.
I think that modern adaptive and complex layouts have created the need for CSS Grid. The range of overlaps and even entirely disappearing elements is almost impossible with Flexbox than with Grid. Still, if users fully understood how the Flexbox algorithm works, "the flex-basis-width difference" , Heydon's bird algorithm… we would surely see more Flexbox layouts."
Different applications. For me, Flex is primarily used for "cards" where I may or may-not require wrapping, while Grid is used for a structured layout.
I've been working on my personal website, and dang if switching from flexbox to grid for the old school 3 column layout wasn't the best decision I've ever made for responsive design (My layout was as such: LeftSidebar MainContent RightSidebar For big screens, LeftSidebar MainContent RightSidebar MainContent For medium screens, and MainContent MainContent LeftSidebar RightSidebar For mobile and small screens)
I totally agree with you about grid use cases and browser support, but one of main grid drawbacks is its payload on a browser (about 30% more than usual block model)
By payload you mean layout performance? If so, stop worrying about it. The performance cost is next to inexistent. The only time you might have issues is if you use animated templates but you would have the same issue with other layout tools
I have seen some complex flex layouts, where grid could have made it much easier. Named grid lines / areas the dev tools can help a ton with clarity as well. If clarity / ease of writing would be the only difference, I wouldn't mind that much but these complex flex layouts usually require a lot of wrapper divs. Eventually, these will add up and slow down everything else...
I just switched from flex to grid since I needed new items to align in the grid instead of being center aligned, since the two items didn't align with the three columns above. The flex items had a specific width so they didn't stretch.
„It worked for several years from now, why should i change it to grid?“ „Grid is too complex, I don’t need it“ That’s some of the discussions I have at work. I know what you mean Kevin :(
I don't know why, I use flexbox a lot in my first attempt, maybe because I thinking (wrongly) grid as the new table. But I have to admit that grid can do it with less effort. I like a lot the overlapping column/row with grid. Grid is very powerful, maybe with time, flexbox disapear ?
To anyone who says something is too hard and they don't want to learn it, I ask: What are you doing in this industry? Your job is to learn continuously, every day, to build things in the best, most maintainable, and scalable way possible. But I suppose some people are just mediocre professionals.
I do think grid is more complicated than flexbox, but I like combining both. My sidebar menus typically uses a grid. Could I use a flexbox, sure, but I like the way grid lays it out and how I can categorize things into a grid-area, etc. I'll use a flexbox to make my header squish and stretch with a centered search box, a logo on the left and a dark mode toggle on the right. And so on. Both have their uses. And while grid can be complicated at first, once you start understanding it, it's a nice thing to use alongside flex.
I would like to see someone provide information about performance costs of grids vs flexbox. Is flex 'faster' or more power efficient than 'grid' (especially on mobile devices)?
Fun fact: there is still no way to track the wrap event of the child nodes in a flexbox container. I’ve been waiting for the :wrapped pseudo-selector for about 8 years 😅
@5:00 is where it gets too complicated. I believe the reason flex got so popular, instead of grid, is Chris Coyer’s flex-box poster. We need a grid poster. Maybe there is one. The grid rules and syntax and so very deep compared to grid.
Grid isn’t difficult, flex is ! Grid is so much more logical and structured, flex just confuses me with all the patchwork of syntax. Nice tshirt btw ! Is that from Star Wars ?
I'm not even a frontend person and still this take sounds silly to me. Grid and flex are pretty different things, for larger layouts you often want grid-like things for smaller layout grid is usually to in-flex-ible (hah). But even if you were to want to force one of the two, it'd be grid no? A lot of the things you do with grid are just straight up impossible with flex (or at least a lot harder than they otherwise would be).
I attempt to combine grid and flex because there are numerous cases where it can be utilized. I concede that Flexbox alone might not suffice, but Grid is less intuitive than Flexbox and I tend to avoid it as the suitable solution.
"support for grid is not enough" : how much more do you want it's tracked at 99.5% on caniuse and if you only use what is shown in the video even internet explorer 11 of all browsers will support it ! "But flex is enough" : yes... So is float and table layouts... But you're not using floats or table layouts (hek most don't even know what I am talking about)
90% of the time when I see layouts like 6:12 they're "feature islands" logically grouped into rows or columns In that case you don't actually want item 4 to be stuck on the grid, it should just be in a column together with 1 so either can take up the space they need. So I'd use a flex row containing flex columns for that layout. I do use grid sometimes but from my experience it's incredibly rare I need a layout that's best suited to grid...
@@Ragnar_Oock For like a nav-bar, I will do padding inside the LIs, then do a border on the outside, then do a gap between the LIs. It creates a really nice effect. Of course, flex.
Why making a table should be so complicated? From my experience table just works and there is rarely a situation where i have real life benefit from not using table. When not needing a table i use flex and it just works too. I dont recall ever having a problem that wasn’t easily solvable without having to do a PHD curse on “modern css”
The only thing that keeps me away from using grid is the syntax. You only need to remember few syntaxes with Flex. For parent and child to work. Just my opinion.
After watching a different vid from Kevin, i tried grid for the first time. I find it much easier than I thought it would be. I do wonder how to section my html content now. I put the grid on main, all sections are grid children, but then I have to add grid to those children too if I want to place items within it. I removed the sections and now every element is a child of main and thus a grid item. But it makes the code a bit less structured I find. Am I wrong to say grid makes the html code less readable or am I just using it wrong?
You can still use wrapper items, either by setting the section as display content (basically replacing the element by it's children in the document flow) or using subgrid
@@Ragnar_Oock That was actually very helpful :) display: contents allowed me to add those section-elements back in, which I find very appropriate in the html-flow of things :) Thx!!
Kids these days don't know the struggle of clearing floats, haha. We're all blessed to have Flex and Grid as options, thank goodness!
I remember "the Holy Grail of CSS" (the actual term that was used) being an equal height, three-column layout that worked in Internet Explorer 6. I knew a guy who actually figured it out with the CSS of the early 2000's, and it seemed like magic! 😅
Yeah and tables too
Had a fossil interview me on clearfix and didn't know the answer. Glad I didn't work with that guy
Clearfix
@@screamtwice my comment was removed, weird
I started using grid after watching your videos, and it has become my go-to layout display and flexbox is now really secondary 😅
Same here! I find Grid way more enjoyable and satisfying to use.
Flex for navigation and elements that wrap (like post tags). Otherwise, Grid is king for layouts
I default to grid too. I use flex if the children need to resize independently from one another based on their content, otherwise grid usually gets the job done for me.
Yep, same
Exactly! Me too.
traitor
I think the problem is grid is that it has to many CSS properties and people keep forgetting them. It does not help that each property also has several way to setup (grid-template-columns, grid-auto-columns, grid-auto-flow, grid-column, grid-column-gap etc.).
I mean that's just in general a problem with HTML/CSS. It's turned into this platform where everything is supposed to be possible, it's infinitely flexible and thus also infinitely complicated.
Building layouts from scratch with simpler tools is more labour intensive, but also easier to understand. And of course as long as we're all still using and building for the web realistically these simpler methods will _probably_ not really see much use.
@@hannessteffenhagen61when with flex i could learn it, with grid i needed to reopen docs to be sure what property that was... Grid has too many options compared to flex
It's not that hard if you understand the system. 'grid-template' defines explicit grid (can be shorthanded to 'grid'). 'grid-auto-*' define implicit grid (can be shorthanded to 'grid' other way with 'auto-flow' keyword). 'grid-auto-flow' defines how elements are fit within grid one after another. 'grid-row/column/area' are just saying where to place element (like grid coordinates). 'gap' is just gap between rows and columns ('grid-' prefix is redundant for it).
grid-template-areas:
”a b b”
”a b b”
”c c c”;
difficulty level: S+
I’m with you Kevin on this topic. I do still use flexbox a lot, but if “I was stuck on a desert island with one option “, it would be grid.
I also use the sass version of bootstrap a lot because it is so good and kept up to date.
Do you use a CDN for that?
I really don't like that, AFAIK, Bootstrap still uses `@import`s for everything, given how Sass is going to deprecate them eventually.
@@atlantic_love no. I install via npm. It gets bundled with the app via webpack.
I also typically use bootswatch themes.
Here is a typical setup when I have both bootstrap and bootswatch installed via npm
$navbar-padding-y: 0.2rem;
$enable-gradients: true;
$secondary: gainsboro;
$body-color: lighten(black, 20%);
@import "bootswatch/dist/spacelab/variables";
@import "bootstrap/scss/bootstrap";
@import "bootswatch/dist/spacelab/bootswatch";
@import 'ngx-toastr/toastr';
input[readonly] {
background-color: gainsboro;
}
@@CodecrafterArtemis that's a non-issue.
I think it would be the other way around. 99% of layouts can be done in grid. When I was starting out, I watched so many tutorials and spent so much time practicing grid that I became very comfortable using grid over flexbox. Nowdays with subgrid, its even more amazing.
Finally used grid for real in a production layout recently and loving it. Not sure why I didn't play with it earlier.
I used to be all about flexbox, but recently I've implemented a lot of of grids, except for stuff like navbars and such. It's quite nice and very easy with responsive design.
Took me some time to learn grid but it has become my prefered option now for a robust and structured layout
I like to think about Grid and Flex as two different families:
Grid are parents being more strict and telling their childs what to do (And when poorly done it can lead to childs not adapting well)
Flex are parents being less strict and allowing their childs to do what they want (And when poorly done it can lead to childs messing everything up)
No family is perfect but as long as the work is done they will be fine.
Grid: for elements of the same width; flexbox: for elements with the same spacing.
That's a great analogy.
Children*
Yep, that's why I started to prefer grid: just set rules on parent and children are just fit within. There can be even just text child. You can't align text childs with flexbox that well.
The other way to word it: grid is for layout. Strict rules to how the content must be represented in given space. Flexbox is literally for flexibility. Things like toolbars (it was originated from) where elements can move along in various ways, and it's important to give children some freedom.
One can be used instead another in simple cases, e.g. flexbox can be used to make layout to some extend, but that's not the best or most convenient usage. Flexbox is almost useless for vertical directions. Grids cannot make 'margin: auto' separator between group of elements like flexbox (again something like toolbars).
After watching few of your videos about grid I actually started to use grid way more since it tends to just solve the same problem in an easier manner. Not everything needs to be and should be a grid layout, but whenever stuff starts to get complicated, there's a good chance that grid cracks it.
I started using grid much more about 2 years ago, and while it took a while to understand, using grid make a whole lot more sense and is way better than flex in certain layouts. I think where most people struggle is named grid template areas and lines, which is much more complex but isn't necessary. One can do a lot even with tthe simple ones. Those who dismisses grid are giving it less credit than it should. It will not go wrong to make the effort to understand grid (and subgrid!). It opens up a whole world of a difference and possibilities.
At my first year as FE dev I was using only flex - because I had no other choice I had to support older browsers. A year later I had already dropped the older browsers support and I was still using mostly flex for stuff. But after watching some of your videos I shifted to grid and now I use it even more than flex because I realize how much more "flexible" it is that flex. Lol. Thanks Kevin.
Yep, you've made a convert here! I've used Grid (sparingly) in the past, but found it to be more cumbersome to understand and implement than Flex, so ended up using Flex almost exclusively. Your simple examples in this video have definitely worked to show me that Grid is pretty much every bit as easy (if not easiER in many cases) to use than Flex. Gracias! 😊
Awesome video! 7:55 within cells... interlinked 😂
omg i did a full double take - how did I miss position absolute inside a grid! this is gold.
It's not Flex or Grid... It's Flex and Grid.
I wish you made this video 1 moth ago! Darn! :D I had a project with a lot of overlapping stuff and I didn't know the solution was using grid.
I have been using Grid after I have understood it with your videos! 😅
i used to think grid was extremely confusing but i watched all your videos including that subgrid one and im getting better at it
Using grid for overlapping text on an image is a genius use case, never thought of that! The other day I was creating a landing page with a hero image and h1 using flex and found this very limiting in terms of what I could achieve. Thanks for the heads up.
I just learned grid and used it in a project. It´s an amazing tool. And with all tools, you just need to know when and how to use it to it´s maximum potential.
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) - is that legal? I mean it looks like cheat :D Awesome video. I've changed my mind and my opinion about grid layout. Definitely to favourites playlist. Thank You Kevin =)
Kevin Geary's dynamic layout video, for Bricks for WordPress, really opened my eyes to what grid can do, and how so many websites today are like 99% grid.
This video came out at the best time for me. Was looking at grid for a project and thus helped me a lot. Thank you.
We love these specifics ❤❤💪☝️
Please front-end friends, don't underestimate Grid
Great video I need to spend 2 hours just messing around with grid
Just started watching, but want leave this comment for people that don't use grid over flex because it's too complicated. I was like that before. But there are some scenarios where you can't exactly get the layout you want with flex easily. Now after taking a little bit of time to practice grid, this is now my to choice.
I know a decent amount of grid, but I usually end up having to look something up. Flexbox I have down, it's easy, but I want to be as familiar with grid as it! Please Kevin, teach me all of your grid secrets lol. I'll go back and watch the getting started video just in case.
I was the "I don't need grid in my life" kind of person until started to use it.
This was me 😂😂
I ❤️ grid
You've mentioned you need a media query if you need to change number of columns in flex. That is true, but it's worth noting that in many cases you would actually need a container query... And container query would make things even more complicated. But when you use grid and min-max then size is actually based on the container size (even when th browser doesn't support container queiries). So using grid when you need to have columns then repeat(auto-fill, minmax(200px, 1fr)) is actually like a container query.
Grid certainly makes responsiveness easier. I had a website I just finished entirely with flex and I went and redid the whole thing with grid. There a learning curve of adjustments but once you figure out and incorporate subgrids you have more control
They both are really great, grid is just more complex to learn but It's really good
you are doing always helpfull videos man thank you, you got my like on overlapping content :) that was new to me and i will definitely try to get used to grid
I don't get why people don't understand how grid makes layouts so much easier...
I would personally solve the first problem with max-width, that'd be a perfect solution
and if you want your flex container to also possible change size, when then max-width can be something like calc(100% / 3 - 3px)
I'm working off a design thats a lot like #3 in your example with overlapping content. My first thought was grid. If the content changes but the layout doesn't, it's time for grid!
00:00 📚 Grid layout can be simple and offers advantages over Flexbox, especially for certain tasks.
00:31 🧱 Grid is more effective for creating consistent columns and rows compared to Flexbox, avoiding issues like uneven element stretching.
02:50 🛠️ Using Grid simplifies layout management, like setting columns or rows without needing additional Flexbox tweaks.
04:51 🎛️ Grid allows for a structured, responsive layout that works seamlessly without extensive media queries.
05:37 📏 Spanning columns and rows in Grid is straightforward and avoids the complexity Flexbox requires for similar tasks.
06:47 🖼️ Overlapping content is easier to achieve with Grid, which handles complex layouts more naturally than Flexbox.
08:21 🌐 Grid has strong browser support, often better than many other CSS features, making it a reliable choice for web layouts.
I didn't know that grid is this flexible. I'll start using it more
Less code and better experience is the way to choose which one should I use for a task.😊
That video at the end is for my viewing pain. Flexbox is a little bit easier to follow for me.
I was still using floats for everything until I discovered your videos last year.
i find myself using a mix of flexbox and grid. Like for example i use flexbox to layout the main content sections or simple lists. I use grid for specific things like creating a card with an image description and title. Ill use a grid to set the image in front and stack text elements like title and descriptions. I could do that with flexbox but then i would be nesting flexbox into flexbox into flexbox to get it to work.
I don't know, I can speak for myself - my work only improved since I started using grid after one of your recent videos.
It's not a silver bullet, but it takes a lot of hassle away. Especially with the logic controls sizing of children / lets children choose their dimensions.
I think that modern adaptive and complex layouts have created the need for CSS Grid. The range of overlaps and even entirely disappearing elements is almost impossible with Flexbox than with Grid. Still, if users fully understood how the Flexbox algorithm works, "the flex-basis-width difference" , Heydon's bird algorithm… we would surely see more Flexbox layouts."
I always had a problem with flex padding and gap. Grid is the solution
In my projects i use grid maybe about 90% against to the flex. Grid is very convenient and useful
thanks man! I honestly did not know grid so I'm going to use it now 🙂
Different applications. For me, Flex is primarily used for "cards" where I may or may-not require wrapping, while Grid is used for a structured layout.
Grid = strict parent who tells to their children what to do
Flex = childrens get comfy, the parent adapt to their comfort.
Just combine flex and grid in layouts. You don't miss anything.
I've been working on my personal website, and dang if switching from flexbox to grid for the old school 3 column layout wasn't the best decision I've ever made for responsive design
(My layout was as such:
LeftSidebar MainContent RightSidebar
For big screens,
LeftSidebar MainContent
RightSidebar MainContent
For medium screens, and
MainContent MainContent
LeftSidebar RightSidebar
For mobile and small screens)
I totally agree with you about grid use cases and browser support, but one of main grid drawbacks is its payload on a browser (about 30% more than usual block model)
By payload you mean layout performance? If so, stop worrying about it. The performance cost is next to inexistent. The only time you might have issues is if you use animated templates but you would have the same issue with other layout tools
I have seen some complex flex layouts, where grid could have made it much easier. Named grid lines / areas the dev tools can help a ton with clarity as well. If clarity / ease of writing would be the only difference, I wouldn't mind that much but these complex flex layouts usually require a lot of wrapper divs. Eventually, these will add up and slow down everything else...
I just switched from flex to grid since I needed new items to align in the grid instead of being center aligned, since the two items didn't align with the three columns above. The flex items had a specific width so they didn't stretch.
I totally agree, CSS Grid is so much easier! Parent is in control of the children, perfect and easy
with grid-areas my life so fucking ez thanks to you kevin.
I love grid thanks. I also think flex and grid are great. Specifically once they came out with subgrid.
great discussion thanks Kevin
Yesterday I abused grid so hard to implement a HUGE single page complicated UI. Would've been a nightmare with Flex
„It worked for several years from now, why should i change it to grid?“
„Grid is too complex, I don’t need it“
That’s some of the discussions I have at work.
I know what you mean Kevin :(
I don't know why, I use flexbox a lot in my first attempt, maybe because I thinking (wrongly) grid as the new table. But I have to admit that grid can do it with less effort. I like a lot the overlapping column/row with grid. Grid is very powerful, maybe with time, flexbox disapear ?
Kevin’s PLEADING with us on this one! 😂
To anyone who says something is too hard and they don't want to learn it, I ask: What are you doing in this industry? Your job is to learn continuously, every day, to build things in the best, most maintainable, and scalable way possible. But I suppose some people are just mediocre professionals.
I never bothered using Flex very much but Grid is a different monster and been using it for at least 2/3 years now.
THANK YOU
I do think grid is more complicated than flexbox, but I like combining both. My sidebar menus typically uses a grid. Could I use a flexbox, sure, but I like the way grid lays it out and how I can categorize things into a grid-area, etc. I'll use a flexbox to make my header squish and stretch with a centered search box, a logo on the left and a dark mode toggle on the right. And so on. Both have their uses. And while grid can be complicated at first, once you start understanding it, it's a nice thing to use alongside flex.
I 100% agree with everything in this video!
Thank you for this video bruv!
I would like to see someone provide information about performance costs of grids vs flexbox. Is flex 'faster' or more power efficient than 'grid' (especially on mobile devices)?
Fun fact: there is still no way to track the wrap event of the child nodes in a flexbox container.
I’ve been waiting for the :wrapped pseudo-selector for about 8 years 😅
@5:00 is where it gets too complicated. I believe the reason flex got so popular, instead of grid, is Chris Coyer’s flex-box poster. We need a grid poster. Maybe there is one. The grid rules and syntax and so very deep compared to grid.
They made a grid poster at the same time.... This has more to do with people than the code.
@@b1mind agree. There’s more to learn with grid.
Grid isn’t difficult, flex is ! Grid is so much more logical and structured, flex just confuses me with all the patchwork of syntax. Nice tshirt btw ! Is that from Star Wars ?
I'm not even a frontend person and still this take sounds silly to me. Grid and flex are pretty different things, for larger layouts you often want grid-like things for smaller layout grid is usually to in-flex-ible (hah). But even if you were to want to force one of the two, it'd be grid no? A lot of the things you do with grid are just straight up impossible with flex (or at least a lot harder than they otherwise would be).
I attempt to combine grid and flex because there are numerous cases where it can be utilized. I concede that Flexbox alone might not suffice, but Grid is less intuitive than Flexbox and I tend to avoid it as the suitable solution.
"support for grid is not enough" : how much more do you want it's tracked at 99.5% on caniuse and if you only use what is shown in the video even internet explorer 11 of all browsers will support it !
"But flex is enough" : yes... So is float and table layouts... But you're not using floats or table layouts (hek most don't even know what I am talking about)
quality content. makes me hate css just a tiny bit less
I don't know why but everyone tries to stay away from grid. Maybe because of the more options in grid, people find it more complicated than flexbox.
90% of the time when I see layouts like 6:12 they're "feature islands" logically grouped into rows or columns
In that case you don't actually want item 4 to be stuck on the grid, it should just be in a column together with 1 so either can take up the space they need. So I'd use a flex row containing flex columns for that layout.
I do use grid sometimes but from my experience it's incredibly rare I need a layout that's best suited to grid...
How about padding for each item without gaps?
Just put a padding on the children and don't set a gap on the parent
@@Ragnar_Oock For like a nav-bar, I will do padding inside the LIs, then do a border on the outside, then do a gap between the LIs. It creates a really nice effect. Of course, flex.
Really good video, thank you for your content and knowledge that you share :>
RUclips should prevent commenting before a person has watched the video all the way through 😂
"OMG complete garbage I'm out!"
Time watched ⌛ 20 seconds
You might persuade me (one of these days), Mr. Powell. 😂
Grid is 💪💪💪💪
For me, grid is like regex. It's good, but it's too complicated, so whenever I learn it, I forget it again after not using it for a while.
Grid seems to be more useful than I thought 🤔
The right tool for the right job
Why making a table should be so complicated?
From my experience table just works and there is rarely a situation where i have real life benefit from not using table.
When not needing a table i use flex and it just works too.
I dont recall ever having a problem that wasn’t easily solvable without having to do a PHD curse on “modern css”
Thanks
Thank you!
The only thing that keeps me away from using grid is the syntax.
You only need to remember few syntaxes with Flex. For parent and child to work.
Just my opinion.
More importantly.... The moon with the Rebel base will be in range in thirty minutes!
Please create video on how to create responsive design using grid in tailwind CSS the approach
I only use grid for overlapping imgs
idk why people choose and debating between grid or flex. 😄
HTML tables …. forget semantics. I’m just joshin’ floats for life.
After watching a different vid from Kevin, i tried grid for the first time. I find it much easier than I thought it would be. I do wonder how to section my html content now. I put the grid on main, all sections are grid children, but then I have to add grid to those children too if I want to place items within it. I removed the sections and now every element is a child of main and thus a grid item. But it makes the code a bit less structured I find. Am I wrong to say grid makes the html code less readable or am I just using it wrong?
You can still use wrapper items, either by setting the section as display content (basically replacing the element by it's children in the document flow) or using subgrid
@@Ragnar_Oock That was actually very helpful :) display: contents allowed me to add those section-elements back in, which I find very appropriate in the html-flow of things :) Thx!!
Grid doesn't work in my proprietary environment :(
Can we all just agree that a table saw and a skill saw will both cut your wood, and each one has its advantages?
I like grid more because it gets me closer to what I'm trying to do. Flex box adds unnecessary features i have to eork around by using
Grid is harder to setup for me
You should use both.