Record🤔

uri:

"at://did:plc:4hm2yozxzsakerfalloor5s6/app.bsky.feed.post/3k5jw7jet5g2x"

cid:

"bafyreigomk5lfk2uip63rwppmme35jazxopdx53dcfadsbpometlqjpxrq"

value:

text:

"#tinyCSStip

You can use pure CSS `pow()` to easily switch in between layouts based ton the viewport aspect-ratio. 😎

#CodePen demo codepen.io/thebabydino/...

The `grid-template-columns` property gets set only once! We only set an exponent `--exp` for each aspect ratio. 😼"

$type:

"app.bsky.feed.post"

embed:

$type:

"app.bsky.embed.images"

images:

• alt:

  "10 items distributed on a grid with 5 rows and 2 columns."

  image:

  

  View blob content

  $type:

  "blob"

  ref:

  $link:

  "bafkreigs4zr3it7kersgonweu2galfqcweztabr32qdtpqmgws6cxhrbja"

  mimeType:

  "image/jpeg"

  size:

  31168

• alt:

  "10 items distributed on a grid with 4 rows and 3 columns, first item stretching all across the first row."

  image:

  

  View blob content

  $type:

  "blob"

  ref:

  $link:

  "bafkreid3slrzmaiabk2j5tj7avyivifgvydvvdkyw3t2cjxsxef64qzxjq"

  mimeType:

  "image/jpeg"

  size:

  51743

• alt:

  "10 items distribute on a grid with 2 rows and 5 columns."

  image:

  

  View blob content

  $type:

  "blob"

  ref:

  $link:

  "bafkreigv27kjnvznlc4ndvtadrzzoc4neozb6aq7ochu54orcajkzhrudm"

  mimeType:

  "image/jpeg"

  size:

  56976

• alt:

  "10 items distributed on a grid with 2 rows and 9 columns, first item stretching all across the first row."

  image:

  

  View blob content

  $type:

  "blob"

  ref:

  $link:

  "bafkreid35yplkz3ej7kjxkxgh2htfw63crywy7but3a2otgwrf2zl4k25u"

  mimeType:

  "image/jpeg"

  size:

  55234

langs:

• "en"

facets:

• index:

  byteEnd:

  161

  byteStart:

  135

  features:

  • uri:

    "https://codepen.io/thebabydino/pen/XWoJWwR"

    $type:

    "app.bsky.richtext.facet#link"

createdAt:

"2023-08-22T08:47:19.063Z"