Irregular shaped image with both convex & concave roundings. Shape depends on other elements, how they scale/ wrap. Flexible layout depending on viewport.

Because someone asked how to
https://www.reddit.com/r/css/comments/1k60u7w/comment/momcgkp/

Live on @codepen https://codepen.io/thebabydino/pen/LEExpVg

#CSS #subgrid + #SVG #filter magic.

#cssWish That we could have a zero count for the number of columns in `repeat()`.

That repeat count is often computed. Let's say I want double the width for selected column k out of n columns:

```
repeat(var(--k), var(--w))
calc(2*var(--w)
repeat(calc(var(--n) - var(--k) - 1), var(--w))
```

Ever wanted to get the number of auto-fit columns in CSS?

```
--u: 5em;
grid-template-columns: repeat(auto-fit, minmax(var(--u), 1fr))
```

It's now possible! Using registered #CSS vars, the tan division hack and container query units! Here's a little test on @codepen:
https://codepen.io/thebabydino/pen/JojpBJr

Because I saw a @codepen demo creating a hex grid using my well over a decade old nested and reverted transforms technique to get the shape + MQs...

Here's a super simple modern #CSS grid + clip-path + mathematical functions responsive version with no breakpoints https://codepen.io/thebabydino/pen/QwWQqeR

#CSS subgrid help?

Live test https://codepen.io/thebabydino/pen/raNedoQ?editors=0100 with problem: want the same fixed height for description on all card rows

repeat(3, auto) different heights for cards on different lines
repeat(6, auto auto 3lh) unwanted space below cards widescreen
auto-fit instead of 6 won't work

#Development #Techniques
Conditional CSS grid template areas · A magic formula to “open the gates to layout heaven.” https://ilo.im/161t0f

_____
#Layout #CssGrid #CssNesting #ContainerQueries #LogicalProperties #ResponsiveDesign #WebDesign #WebDev #Frontend #CSS

#Development #Fun
CSS lessons for your parking fails · Proper car positioning may be easier than you think https://ilo.im/161t84

_____
#Positioning #Spacing #CssFloat #CssTransform #CssFlexbox #CssGrid #Development #WebDev #Frontend #CSS

I made a thing: scroll-driven, almost pure #CSS infinite circular gallery rotation - check it out on @codepen
https://codepen.io/thebabydino/pen/XJrYqGb

Using scroll-driven animations and the tiniest bit of JS for the infinity part of it.

Made with for this week's #CodePenChallenge.

cc @bramus

#tinyCSSsnippet I've been shocked to learn has been slept on:

```
.container { display: grid }
.stacked-item { grid-area: 1/ 1 }
```

I use it all the time to stack elements.

Stack faces of polyhedra before positioning them in 3D. Stack images. Stack slices https://codepen.io/thebabydino/pen/XWvKjJJ

I thought I would have to let collapsing margins go when I went with the "fluid breakout layout" using CSS grid.

But then I remembered that CSS grid has the gap feature which you can use for row-gap only which while not being collapsing margins can fulfill the same need.

Modern CSS really is amazing.

Q: Can browser engines handle CSS Grid + Masonry while remaining lightning fast?

A: Yup!

Help us choose the final syntax for Masonry in CSS!

#design #webstandards #webdesign #CSS #cssgrid

https://webkit.org/blog/16026/css-masonry-syntax/

#css #cssGrid #webDev

Ok, this has me really stumped.

I have two grid items which overlap each other.
The grid container has a black background. The 1st item (which I thought would be 'bottom' in the stack) is red background and opacity:0.5. So it appears darker, which is what I expected. The 2nd item (which I assumed would stack above) is yellow, and opaque.

But the 2nd item seems to have been overlaid by the transparent one beneath it! The text is not selectable.

https://codepen.io/artfulrobot/pen/jOgVrEM

#tinyCSStip By default, grid items stretch to fill their respective grid areas (default for `place-self` is `stretch`).

Setting dimensions to `100%` is unnecessary & can even cause items to overflow their grid areas if you also set `margin`/ `border`/ `padding` without `box-sizing` being `border-box`.

#Development #Opportunities
‘Smart’ CSS layouts with container queries · New options we never had with media queries https://ilo.im/15zshu

_____
#ModernCSS #Layout #ContainerQuery #MediaQuery #CssGrid #CssFlexbox #WebDev #Frontend #CSS

Wochenrückblick, Ausgabe 51 (2024-30).

Diesmal mit

Mein regelmäßiger Browserwechsel und wie Safari es mir schwer macht, zu Firefox zurückzukehren

der unvernünftige Kauf eines Mitutoyo Digitalmessschiebers

Inclusive Sans, einem spannenden Ansatz für eine Schriftart

▦ Übersichtlicher Blick in alle Ecken von CSS Grid

Sturmschäden

Kyocera: mal nicht als Kopierer oder Drucker, sondern in der Küche

Die Apps mit „Q“

Techno

#Firefox #Vivaldi #Safari #Mitutoyo #Werkstatt #InclusiveSans #Font #CSS #Grid #CSSGrid #Sturm #Kyocera #macOS #QuickTime #QMK #QGIS #Techno

https://www.marcusjaschen.de/blog/2024/2024-30/

#Development #Approaches
Learn CSS grid now, container queries can wait · “Take your time with new CSS, but don’t sleep on the essentials.” https://ilo.im/15z72q

_____
#Layout #Browser #CssGrid #CssFlexbox #ContainerQuery #Design #ResponsiveDesign #WebDev #Frontend #CSS

Hey @piccalilli!

I found https://buildexcellentwebsit.es extremely insightful and inspiring! It pushed me to finally completely restructure my personal website’s #CSS, after many years of mess.

I used the awesome https://utopia.fyi to generate the vars, (actually, I am using the SCSS library).

Unfortunately, though, I find the massive use of all those calc() and clamp() functions to be quite heavy in terms of performance… #Lighthouse gave the website a very bad performance score (see screenshot). It even seems that while scrolling the page it lags () even if it’s super simple and built with pure #HTML and CSS!

Do you have any ideas or suggestions?

Thank you so much for all the interesting things you share!

(The current unstable development version of my website is at https://dev.tommi.space/, I am using the homepage as reference)

Cc: @j98 + @trys

Random #CSS thought of the morning: annoying thing about #containerQueries is a container needs to have children, we can't just use its text content as container item (like for #cssGrid).

Relevant for when we want container size relative font-size.

Take https://codepen.io/thebabydino/pen/MWRMvbe?editors=1100

We cannot have that text content be the text content of the article element (the container whose size it depends on), it needs to be wrapped in a div!