Fabrizio Calderan
LightNews LightNews
fabrizio.dev
Fabrizio Calderan
@fabrizio.dev
8 followers 40 following 13 posts
🇮🇹
INTJ and introvert.
MSc. at Ca' Foscari university (Venice, ITA).
Inclusive Frontend Developer (A11y) & CSS lover.
Also: Dad, 5-string bass player

https://fabrizio.dev/
—
Posts Replies Media Videos
fabrizio.dev
Venice, San Marco Place at sunset, today.
Venice, San Marco Place at sunset Venice, San Marco Place at sunset
December 28, 2024 at 8:38 PM
fabrizio.dev
One of my favorite 2-line #CSS snippets:

it creates a responsive grid layout with columns that automatically adjust in size. Each column has a minimum width of --min (`30ch` in the example) and expand up to `1fr` to fit the available space.

Code in action: codepen.io/fcalderan/fu...
A declaration block in CSS with the rules display: grid and grid-template-columns: repeat(auto-fit, minmax(var(--min, 30ch), 1fr));
November 20, 2024 at 3:55 PM
fabrizio.dev
A #CSS hover effect by animating the grid-template-columns and gap properties of a 2-column grid element:

.link {
grid-template-columns: auto var(--len, 0fr);
gap: var(--gap, 0);
transition: .33s;
&:is(:hover, :focus) {
--len: 1fr;
--gap: .5rem;
}

Code in the reply 👇🏻
November 20, 2024 at 3:52 PM