Comment by o11c

2 years ago

FYI, since 2017-ish doing layouts in HTML is much easier if you use "display: grid". Just be aware that the numbering is based on lines, not boxes. Also be aware that to use percentage-based heights at top level, you have to style the `html` and `body` too.

Additionally, use of `@container` queries (the modern, poorly-documented alternative to `@media` queries) lets you do more advanced layout changes on element resize. This requires adding `container-type: size` style on the parent (I found this very confusing in the docs).

2 comments

o11c

Reply
Izkata  2 years ago

> Just be aware that the numbering is based on lines, not boxes.

With grid-template-areas, you can use ascii art instead of specifying rows/columns manually. Though you would still need numbers if you wanted something other than the default spacing, which would be based on the content.