Full-Bleed Layout Using CSS Grid
I hate that people use CSS Grid like this. For some reason, I see so many people reach for CSS Grid like it's the de facto solution for responsive design.<p>This is a bad design because you're tying the child elements to the grid layout of the parent. If you added an extra column in the grid, you'd have to go and adjust it for the full bleed elements.<p>IMO a better solution would've been to just use a column layout with flex box, where the children are containers at standard sizes (e.g. full-bleed, 80-characters, etc.).<p>Yes it adds like another tag or two, but it's semantically more sound. And from that extra markup we get a lot more flexibility, e.g. going from column layout to a slide show or something if someone wanted.<p>CSS Grids are good for grids i.e. layouts where you want control over flow in both axes. This is not a grid. You have one column of data where you are controlling whitespace.<p>This has become a real pet peeve of mine because it seems like so many people love css grid when it's actual use case is fairly rare.<p>Edit: I also want to add that this creates an uglier layout if you have variable width children. Because you'd essentially create a full-bleed container element just to add a non-full bleed child to it.<p>And I am sorry that this came across as kind of aggressive, this is something that's really been irking me with recent web dev trends. And I feel like a crazy person confused over why the world suddenly decided on Css Grid all day every day.