Kenobit @kenobit

4 posts2 participants0 posts today

**Ana Tudor** @anatudor@mastodon.social · 1d *

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

GIF

#cssGrid #cssLayout #code

**Ana Tudor** @anatudor@mastodon.social · 2d

Ana Tudor @anatudor@mastodon.social

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

Screenshot of linked demo with DevTools open, highlighting the main grid and showing there are no media queries at play.

#cssLayout #cssGrid #clipPath

**Ana Tudor** @anatudor@mastodon.social · 2d

Ana Tudor @anatudor@mastodon.social

Because this quick @codepen thing I made is getting hearted for some reason... corner grid item with inner corner rounding and text wrapping around the corner

https://codepen.io/thebabydino/pen/LEYObpy

Some grid + shape-outside + container query units #CSS magic + #SVG #filter magic.

¯\_(ツ)_/¯

#cssLayout #cssGrid #code

**Ana Tudor** @anatudor@mastodon.social · 2d

Ana Tudor @anatudor@mastodon.social

A super simple little #CSS #subgrid example on @codepen:

https://codepen.io/thebabydino/pen/QwWNwOz

Screenshot of the demo, with DevTools open, highlighting the grid areas and gaps.

#cssLayout #cssGrid #code

**Ana Tudor** @anatudor@mastodon.social · 5d

Ana Tudor @anatudor@mastodon.social

Flexy flex layout for any number n of items such that we have:

at most 3 items on a row
at least 2 items on a row IF we have at least 2 items in total

In only 5 (display, flex-wrap, gap, flex and flex-basis override) CSS declarations, working for any number n of items!

Because someone asked for this on reddit https://www.reddit.com/r/css/comments/1jayx5v/comment/mhq2ldw/

Here is the @codepen demo https://codepen.io/thebabydino/pen/OPJOepJ

Screenshot of the desired layout for the desired number of items.

The 5 CSS declarations:

```
section {
gap: var(--s);
display: flex;
flex-wrap: wrap
}

.item {
flex: 1 1 calc((100% - 2*var(--s))/3);

&:nth-child(3n):nth-last-child(2),
&:nth-child(3n + 1):last-child {
flex-basis: calc(50% - .5*var(--s))
}
}
```

#CSS #flexbox #layout

**Ana Tudor** @anatudor@mastodon.social · Feb 25

Feb 25

Ana Tudor @anatudor@mastodon.social

Someone asked how to get such an offset grid for any number of items, so here's my take on it https://www.reddit.com/r/css/comments/1ixnjjr/comment/menz0yk/ - define a 2 col grid via grid-template-columns, make all items span 3 rows, then offset down the 2nd item (placed on the second column) by one row to start from the 2nd.

Screenshot showing the result with the grid overlays on top. The DevTools panel is open on the right, showing the CSS for the second item. In case the grid container is at least as wide as the base width for two columns plus the gap between them, then offset this item on the second column by one row down.

#CSS #cssGrid #cssLayout

**Ana Tudor** @anatudor@mastodon.social · Feb 21 *

Feb 21 *

Ana Tudor @anatudor@mastodon.social

#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

Shows 6 cards distributed 3 at the top and 3 at the bottom. The `grid-template-rows` value for the cards wrapper is `repeat(3, auto)`. This gets inherited on the individual cards via subgrid. It succeeds in giving the corresponding card components the same height for cards on the same row, however, the card components have different heights depending on the row they're on. The description component for example, has a height of `224px` for the top cards and a height of `116px` for the bottom cards.

Shows 6 cards distributed 3 at the top and 3 at the bottom. The `grid-template-rows` value for the cards wrapper is `repeat(6, auto auto auto)`. This gets inherited on the individual cards via subgrid. It succeeds in giving the corresponding card components the same height for *all* the cards, however this means lots of unnecessary grid tracks and space created at the bottom for wider viewports where we can have multiple cards side by side.

#subgrid #cssLayout #cssGrid

**Ana Tudor** @anatudor@mastodon.social · Feb 20 *

Feb 20 *

Ana Tudor @anatudor@mastodon.social

Because this keeps getting asked over and over... subgrid is how you get such cards whose grids align even with varying component heights.

https://www.reddit.com/r/css/comments/1itgf3h/comment/mdsg2bh/

Both the card wrapper and the cards get `display: grid` and the rest you can see in the Styles panel in DevTools below.

Live on @codepen

https://codepen.io/thebabydino/pen/QwWNwOz?editors=0100

Screenshot showing the page with grid overlays. DevTools is open on the right, showing the relevant code.

```
main, article { display: grid }

main { grid-template: repeat(3, max-content)/ repeat(auto-fit, min(35ch, 100%)) }

article {
grid-row-end: span 3;
grid-template-rows: subgrid
}
```

#CSS #layout #cssLayout

**Ana Tudor** @anatudor@mastodon.social · Feb 20

Feb 20

Ana Tudor @anatudor@mastodon.social

Because somebody asked, here's my take on the adaptive grid with a fixed row item spanning all columns https://www.reddit.com/r/css/comments/1ir2qp9/comment/mdrssnv/ - it all boils down to just 3 #CSS declarations as seen below.

Minimal @codepen example:
https://codepen.io/thebabydino/pen/pvogXOK?editors=1100

Code and desired result for different available space cases.

```
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, min(var(--w-col), 100%))
}

.fixed-item { grid-area: 2/ 1/ span 1/ -1 }
```

#layout #cssLayout #cssGrid

**Ana Tudor** @anatudor@mastodon.social · Feb 19

Feb 19

Ana Tudor @anatudor@mastodon.social

PSA: not setting `height: 100%` to begin with on an element that has a `padding` is a better way of avoiding overflow than the nuclear solution of setting `box-sizing: border-box` on everything.

Live comparison on @codepen:

https://codepen.io/thebabydino/pen/vEYOPPe?editors=1000

Comparative screenshot showing the two solutions to the problem.

#CSS #layout #cssLayout

**Ana Tudor** @anatudor@mastodon.social · Feb 14

Feb 14

Ana Tudor @anatudor@mastodon.social

Someone asked (yet again) on reddit for that inverted radius tab pattern so here's a pure #CSS solution from me https://www.reddit.com/r/css/comments/1ioroke/comment/mcp0xpj/

no extra elements or pseudos needed for effect
only need to set border, background, border-radius

If you also want borders, I made another (hopefully accessible) tabs pattern demo using #SVG #filter and #subgrid to answer another reddit question last year https://www.reddit.com/r/css/comments/1fwlmsy/comment/lqfvkuh/

The visual result on the right and the relevant code for my solution:

```
a {
/* reserve space for a transparent border */
border: solid $r #0000;
/* reset border-width on the right */
border-right-width: 0;

/* corner rounding for pill shape only non-zero on the left */
border-radius: 50vh 0 0 50vh;

background:
/* cover padding area respecting its rounding on the left */
linear-gradient($c 0 0) padding-box,
/* create that rounding in transparent bottom border area */
radial-gradient(farthest-side at 0 100%,
#0000 calc(100% - .5px),
$c calc(100% + .5px))
100% 100%/ #{$r $r} no-repeat border-box
}
```

#cssLayout #code #coding

**Ana Tudor** @anatudor@mastodon.social · Jan 17

Jan 17

Ana Tudor @anatudor@mastodon.social

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

GIF

#SVG #cssGrid #scrollAnimation

**Ana Tudor** @anatudor@mastodon.social · Jan 13 *

Jan 13 *

Ana Tudor @anatudor@mastodon.social

Here's a little thing I made for the 1st #CodePenChallenge of '25: pure #CSS tilt & zoom grid on scroll!

Check it out on @codepen

https://codepen.io/thebabydino/pen/jENzprY

Using pure CSS scroll driven animations, grid, variables, mathematical functions, container query units. Also uses an SVG filter for the dissolve effect.

Chromium only.

GIF

#scroll #scrollAnimation #cssVariables

**Ana Tudor** @anatudor@mastodon.social · Jan 10

Jan 10

Ana Tudor @anatudor@mastodon.social

#tinyCSStip if you want to make an absolutely positioned pseudo cover its parent's entire `padding-box`, use `inset: 0`!

(love grid for stacking/ full coverage too, but there are differences between how the two solutions work and there are cases when absolute positioning is still preferable)

Code illustrating the old solutions (setting all four inset longhands or two inset longhands plus dimensions) vs. the much simpler (1 declaration instead of 4) inset shorthand (`inset: 0` is all that's needed).

```
/* want to make pseudo cover parent's entire padding-box */
.parent {
position: relative;

&::after {
content: '';
position: absolute;

/* ❌ DON'T do this 😵 */
top: 0;
left: 0;
height: 100%;
width: 100%;

/* ❌ DON'T do this either 😵 */
top: 0;
right: 0;
bottom: 0;
left: 0;

/* ✅ instead, DO! 😻 */
inset: 0
/* 👍 simpler & has been well-supported for YEARS 🥳 */
}
}
```

#CSS #code #coding

**Ana Tudor** @anatudor@mastodon.social · Jan 5

Jan 5

Ana Tudor @anatudor@mastodon.social

#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

Snub dodecahedron with a part of the CSS used to create it seen on the left - the `grid-area: 1/ 1` line is highlighted.

Stack of slightly rotated big cat images.

A pie chart made up of 7 different size slices. Slice 4 is hovered and slides out. On the left, there's a bit of the code, with the `grid-area: 1/ 1` line highlighted for `.slice` elements.

Fancy animated cube. On the left,there's a bit of the CSS used to create it, with the `grid-area: 1/ 1` line highlighted for `.face` elements.

#CSS #code #coding

**Ana Tudor** @anatudor@mastodon.social · Jan 3

Jan 3

Ana Tudor @anatudor@mastodon.social

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

GIF

#cssGrid #cssSubgrid #cssMaths

**Ana Tudor** @anatudor@mastodon.social · Nov 4, 2024

Nov 4, 2024

Ana Tudor @anatudor@mastodon.social

#tinyCSStip Container queries on the body? Why, when media queries have better support?

Well, container queries make it an IF depending on the width of the body's content-box.

That is, subtracting the scrollbar IF we have one (we can't know).

**Heavily** commented @codepen demo https://codepen.io/thebabydino/pen/ZEgjpYL

/* consider this structure inside the body:
section.item
.text-box
img
... and so on, multiple such sections with 2 children */

/* allows us to use a container query - better than media query
* because it takes into account the scrollbar IF there's one */
body { container-type: inline-size }

.item, .text-box { display: grid }

.item {
/* 1 column for each of the two items, as long as there's room
* for each of them to have at least 150px */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
grid-auto-flow: dense /* prevent unoccupied cells in grid */
}

/* 1st, 3rd & so on section have text box on 2nd column
* IF there's enough room to have 2 columns of at least 150px each */
@container (min-width: calc(2*150px)) {
:nth-of-type(odd) > .text-box { grid-column: 2 }
}

#CSS #container #containerQuery

**Ana Tudor** @anatudor@mastodon.social · Oct 25, 2024

Oct 25, 2024

Ana Tudor @anatudor@mastodon.social

Another @codepen remake: this hover effect menu https://codepen.io/thebabydino/pen/DZpgaZ

Using flexbox instead of floats and CSS variables & mathematical functions so that on hover we have a simple transition and not the abomination that is keyframes at 49.999% and 50%.

GIF

#CSS #flexbox #cssLayout

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Sep 26, 2024

Sep 26, 2024

Ana Tudor @anatudor@mastodon.social

Back in '15, I had 16 cube elements, each with 3 descendants.
Now I have 16 empty cube elements.
I went from 64 descendants inside the grid element to just 16.

Back in '15, I was stacking all absolutely positioned cube elems in the middle, looping through them all to manually compute their grid positions incl. gaps, put them in the right place using translate(). This bloated compiled CSS.

Now I just use #CSS grid, no looping necessary!