{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreigzfjk3lyn3ckacdtj3iestuqkgsey2mchrxxh7emuidlnichd4jq",
    "uri": "at://did:plc:fsxdrar45fdrarzog6x2vyow/app.bsky.feed.post/3mflx6hxse4g2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreiaxrbjtiliaquz46ngmqdls4z7xhsiylvucv7xhrvenwn46b5bu7a"
    },
    "mimeType": "image/jpeg",
    "size": 54566
  },
  "description": "Master Auto Layouts in 5 Slides: Demystify the logic of responsive design by finally understanding Fixed, Hug, and Fill behaviors.",
  "path": "/master-auto-layouts/",
  "publishedAt": "2026-02-24T10:23:27.000Z",
  "site": "https://ux.prithivkumar.com",
  "textContent": "As a Senior Product Designer, I’ve realized that the difference between a static design and a scalable system often comes down to one thing: **Auto Layout**. If you want to build responsive products that developers actually love, you have to move past \"moving pixels\" and start defining the relationship between elements.\n\nUnderstanding **Fixed** , **Hug** , and **Fill** is the foundation of modern UI engineering. Here is exactly how to use them:\n\n### **Fixed Width: Precise Control**\n\nA **Fixed** element stays the same size regardless of its parent container or the content inside it. Whether your parent container is 400px or 800px wide, a fixed 300px element will never budge.\n\n  * **Best for:** Specific UI components like buttons, icons, and fixed sidebars where you need absolute control.\n\n\n\n### **Hug Contents: The \"Shrink-Wrap\" Effect**\n\nWhen an element is set to **Hug** , it shrinks to fit its content exactly. The content determines the size. If you change the text inside a button, the button adjusts automatically to maintain the padding.\n\n  * **Best for:** Dynamic components like pills, tags, and auto-width labels.+2\n\n\n\n### **Fill Container: True Responsiveness**\n\nThe **Fill** setting allows an element to expand and match the parent's available space. No matter how much the parent container grows, the element will always fill 100% of the allowed area.\n\n  * **Best for:** Responsive elements like full-width inputs, cards, and large containers.\n\n\n\n### **The Senior Perspective**\n\nAuto Layout isn't just a shortcut; it’s a communication tool. By mastering these three behaviors, you ensure that your design intent is maintained from the smallest mobile screen to the largest desktop monitor.",
  "title": "Master Auto Layouts",
  "updatedAt": "2026-02-24T10:23:27.000Z"
}