WingNews logo WingNews
top | item 21295896

(no title)

weo3dev | 6 years ago

Oof. You are definitely missing the entire point of CSS Grid.

CSS Grid is a two dimensional layout tool. Flexbox is one.

CSS Grid is for architectural layout. Flexbox is for alignment and flow layout.

CSS Grid was enabled across all major platforms by October 2017. You've had two years to figure that out. You want it on IE? Then use CSS Grid's original syntax because Microsoft supported Grid first.

The browsers haven't "started implementing some layout tools" --- they literally did it, en masse, in 2017. Grid was available for everyone's use by October.

Do yourself a favor and work through the examples here: https://gridbyexample.com/

Do yourself another favor, and stop trying to make different layouts for all the different sizes. Or, go with insanity - your call. Grid is for responsive layout, out of the box; no negative margins, no weird padding, no inane extra workarounds just to get something to line up.

Once you understand that CSS Grid is the tool we have been waiting for since the late 90s, and that it, NOT Flexbox, is the sane, maintainable, future-proof layout tool for pages, and then using Flexbox within it to adjust flow and tempo -- you will/can spend a lot more time playing with things for the sake of play, and not for the sake of debugging.

Good luck.

discuss

order

jsjohnst|6 years ago

While I agree with almost everything you said, did you need to be condescending while doing it?

willio58|6 years ago

My thoughts exactly. Let’s all be adults here.

thedevilslawyer|6 years ago

These is value to vehemence in arguments.

themarkn|6 years ago

> CSS Grid is a two dimensional layout tool. Flexbox is one. >CSS Grid is for architectural layout. Flexbox is for alignment and flow layout.

I agree with the first (it seems impossible not to) but I think the 2nd is kind of a misconception. That grid is for “architectural layout” ... it’s for any two-dimensional layout, any time, any place. And flexbox is often totally appropriate for laying out entire pages or large sections of pages, if 2 dimensions of flexibility are not needing to be controlled. You can have grids inside your flex items inside your grids inside your flex items as needed.

The decision of layouts having to look a certain way at different sizes unfortunately is often made long before any code is written to implement a design in my experience. Not much the implementation person can do except maybe push back, but it can be a tough sell to ask for an approved design to change so that the underlying code can be less hacky.