CSS Layout Toys

How Flex, Grid and container queries lay things out: canvas layouts driven by the real algorithms, with adjustable gaps, columns and alignment; hover to read sizes.

Tech: CSS Grid 原理, Flexbox 原理, gap, container query

• Grid Layout — CSS Grid toys: light-color gradient cells.
• Flex Layout — Flexbox layout: The sub-elements are lined along the main axis to align, space and line breaks.
• Masonry — CSS falls.
• Multi-column Text — A long text is automatically removed from the N column and the reading line is shorter.
• Sticky — Position: sticky sidebar / Chapter.
• Absolute Layers — The elements are removed from the ordinary flow, using coordinates and z-index to determine who is on top.
• Container Queries — Packaging width driven layout.
• Bento Grid — Bento layout uses the same set of grids, which allow certain cards to cross multiple rows to form a masterly collage, which is common on the front page of the product and on the dashboard.
• Holy Grail Layout — A heading above, bottom footer, three middle columns.
• Aspect-ratio Cards — Video Cover, A card thumbnail requires a fixed ratio.
• Overlapping Layers — Heads, Stack notifications, The cover is overlapping.
• Subgrid — Subgrid allows embedded grids to "borrow" parent lines, and the internal fields of the cards are aligned with the next card.