keithjgrant

7 yıl öncediscuss

You can reproduce a fair bit of Grid using just Flexbox (and we did that for quite a while before Grid came along)—but it's going to be far more verbose, both your HTML and CSS, and probably more brittle and complicated to change.

If you're setting precise sizes in flexbox, or very specific flex values, you're probably in Grid territory. Ideally, flexbox is best when you want things to stretch/shrink to fit and you want the items to determine their own sizes. Grid is best when you have a specific layout/sizes in mind, and you want to impose that layout onto the items.

keithjgrant

9 yıl öncediscuss

Apart from the semantic issues that result when littering your HTML with <table> tags that inaccurately represent the content they contain, Grid also provides features that tables cannot do:

  * overlapping cells (http://gridbyexample.com/examples/example15/)
  * empty cells, without a bunch of empty <td> tags (http://gridbyexample.com/examples/example12/)
  * size columns (or rows!) in proportion to one another
  * complex alignment of contents within a cell (http://gridbyexample.com/examples/example24/ and http://gridbyexample.com/examples/example25/)
  * specify exact min and max sizes for columns & rows
  * provide a full definition of responsive behavior, often without any media queries

It also provides everything a table does with far less code and easier to read markup.

keithjgrant

9 yıl öncediscuss

HTML is not just about putting text on a screen. It is markup; the tags and attributes imply meaning about the contents they contain.

This makes it not only usable by a web browser, but parsable by software. That includes, but is certainly not limited to, screen readers, assistive technologies, and search engines.

Consider an example where I use JavaScript to make <i> tags behave like links. I can make it “work”, but by doing so, I am disregarding—and breaking—a primary function of the language.

keithjgrant

10 yıl öncediscuss

Out of curiosity, why did you use a custom virtual-DOM implementation instead of one like React?

keithjgrant

Submissions

Theme Machine – CSS color palette tool

[untitled]

It's time to learn oklch color

Resilient, Declarative, Contextual: CSS is different on purpose

Save Scoped CSS

Against CSS in JS

comments