ATProto Browser

ATProto Browser

Experimental browser for the Atmosphere

Post

#CSS Grid is so fun. Here’s a simple card pattern where key elements break their container… or do they?? 🧐 cloudfour.com/thinks/faux-... #WebDesign #WebDev

Feb 12, 2025, 5:19 PM

Record data

{
  "uri": "at://did:plc:xs4kp6lv77kme3cfthgi5owr/app.bsky.feed.post/3lhyolr3ntc2c",
  "cid": "bafyreigsbryck5qjjmp5ue26v2toqlvx4cz5bciz4f7nhtfhbypvjmysim",
  "value": {
    "text": "#CSS Grid is so fun. Here’s a simple card pattern where key elements break their container… or do they?? 🧐 cloudfour.com/thinks/faux-...\n\n#WebDesign #WebDev",
    "$type": "app.bsky.feed.post",
    "embed": {
      "$type": "app.bsky.embed.external",
      "external": {
        "uri": "https://cloudfour.com/thinks/faux-containers-in-css-grids/",
        "thumb": {
          "$type": "blob",
          "ref": {
            "$link": "bafkreiaa5lpnxmjlc6o4opsjzn32t6pikvej5sorohxq4stvuz42f6rle4"
          },
          "mimeType": "image/jpeg",
          "size": 371596
        },
        "title": "Faux Containers in CSS Grids",
        "description": "A simple trick for styling cards with breakout elements."
      }
    },
    "langs": [
      "en"
    ],
    "facets": [
      {
        "index": {
          "byteEnd": 4,
          "byteStart": 0
        },
        "features": [
          {
            "tag": "CSS",
            "$type": "app.bsky.richtext.facet#tag"
          }
        ]
      },
      {
        "index": {
          "byteEnd": 143,
          "byteStart": 114
        },
        "features": [
          {
            "uri": "https://cloudfour.com/thinks/faux-containers-in-css-grids/",
            "$type": "app.bsky.richtext.facet#link"
          }
        ]
      },
      {
        "index": {
          "byteEnd": 155,
          "byteStart": 145
        },
        "features": [
          {
            "tag": "WebDesign",
            "$type": "app.bsky.richtext.facet#tag"
          }
        ]
      },
      {
        "index": {
          "byteEnd": 163,
          "byteStart": 156
        },
        "features": [
          {
            "tag": "WebDev",
            "$type": "app.bsky.richtext.facet#tag"
          }
        ]
      }
    ],
    "createdAt": "2025-02-12T17:19:05.097Z"
  }
}