Login
You're viewing the post.lurk.org public feed.
  • Julie Blancjulieblanc@mastodon.design
    Jun 26, 2026, 3:48 PM

    Also, while Template Layout says that putting two elements in the same slot means they are concatenated, CSS Grid says that putting two elements in the same slot just means they are put in the same position, i.e., on top of one another. (In Template Layout elements are on top of one another only if they are absolutely positioned.)

    As a consequence, there is also no way to chain slots together to let content that is too long for one slot continue in another.

    💬 1🔄 0⭐ 0

Replies

  • Julie Blancjulieblanc@mastodon.design
    Jun 26, 2026, 3:50 PM

    → CSS Grid level 2

    CSS Grid level 2 allows, to some extent, placing nested elements instead of children in the grid, by defining sub-grids.

    If you define a child of a grid element to be a sub-grid, than a child of that sub-grid can be put in the grid. It it is still limited, because to put an element in the grid, all its ancestors up to the grid must be sub-grids, and you can only put an element inside the area covered by its parent.

    💬 1🔄 0⭐ 0
  • Julie Blancjulieblanc@mastodon.design
    Jun 26, 2026, 3:50 PM

    In Template Layout and Frame-based Layout, you could take an element and put it in the different slot than its parents. For example, you can put a section of a document in a slot of the template and pull out all images from that section and put those in a different slot.

    💬 1🔄 0⭐ 0
  • Julie Blancjulieblanc@mastodon.design
    Jun 26, 2026, 3:50 PM

    → CSS Grid level 3

    Grid level 3 adds 'grid lanes' layout (a.k.a. masonry layout), a kind of automatic layout where each additional element is added to the shortest column (or row) so far.
    (A kind of tetris, although all blocks are rectangular.)

    💬 1🔄 0⭐ 0
  • Julie Blancjulieblanc@mastodon.design
    Jun 26, 2026, 3:52 PM

    → Page floats
    Around 1998 or so, Håkon and I toyed with the idea of boxes connected by virtual rubber bands.
    A traditional float in CSS is placed as high as possible without overlapping other floats but not higher than any preceding element or its parent.

    💬 1🔄 0⭐ 1
  • Julie Blancjulieblanc@mastodon.design
    Jun 26, 2026, 3:53 PM

    →Anchor Positioning (2023)

    Anchor Positioning, by Tab Atkins, tries to provide similar 'rubber band' effects, but for absolutely positioned elements rather than floats. You define an element to be an anchor by giving it a name, and then other elements can be positioned above, below, next to or on top of the anchor element. If the anchor element moves, the anchored element moves with it. And you can specify fallback positions in case there is no room on the chosen side of the anchor.

    💬 1🔄 0⭐ 2
  • 💬 0🔄 1⭐ 1