Lmst

Saw https://www.youtube.com/watch?v=An3QMWg3m1c linked last evening & gave the challenge a quick go myself.

My approach was a mostly #CSS one, with minimal HTML (no extra wrappers) and JS (used only to update top item index, ~200 bytes minified).

While it was working, it wasn't pretty, so today I polished the demo & heavily commented the CSS - check it out on @codepen: https://codepen.io/thebabydino/pen/jENaPjd

#cssGrid #cssSubgrid #cssMaths #Maths #code #coding #frontend #web #dev #webDev #webDevelopment #cssLayout #cssVariables

We add a `.shape` element which in also covers all of the 4 cells of its parent's grid and also inherits its `.back` parent grid via `subgrid`.

This element creates our shape via two pseudos positioned in the 1st grid cell (clipped) and across the 2nd column (avoiding heading).

#CSS #layout #cssLayout #cssGrid #cssSubgrid #code #coding #frontend #web #dev #webDev #webDevelopment

We create a 2×2 header grid with the height of the 2nd row and the width of the 1st column given by the dimensions of the element (the heading) in the cell where they meet.

We also have another `.back` element covering all 4 grid cells & inheriting parent grid via `subgrid`.

2×2 grid on header.

`.back` stretches across all grid cells & inherits this grid.

Heading just in bottom left cell.

#CSS #layout #cssLayout #cssGrid #cssSubgrid #frontend #code #coding #web #webDev #dev #webDevelopment

Screenshot showing the grids highlighted via DevTools. The width of the first column is given by the amount of text content inside the heading.

#Development #Techniques
How to align column rows with CSS subgrid · Aligning content of boxes that sit side by side https://ilo.im/15ydwz

_____
#Layout #WebDev #Frontend #CSS #CssGrid #CssSubgrid

If you're a $5+ patron on Patreon, I've just posted a very special and cool interactive demo. With explanations about the concepts it illustrates + the demo itself is heavily commented as the viewport-adaptive layout part is very interesting too.

https://www.patreon.com/posts/swap-channels-98985162

#svg #svgFilter #css #cssLayout #code #cssSubgrid #containerQuery #cssGrid #coding #webDev #webDevelopment #frontend