{"id":35,"date":"2026-04-07T02:41:07","date_gmt":"2026-04-07T02:41:07","guid":{"rendered":"https:\/\/vanianettleford.com\/?p=35"},"modified":"2026-04-07T02:41:07","modified_gmt":"2026-04-07T02:41:07","slug":"engineering-lab-a-small-css-change-that-simplified-my-layouts","status":"publish","type":"post","link":"https:\/\/vanianettleford.com\/?p=35","title":{"rendered":"Engineering Lab: A Small CSS Change That Simplified My Layouts"},"content":{"rendered":"\n

During a recent code review, a colleague suggested using gap<\/code> instead of individual margins<\/strong> inside flex and grid containers. I hadn\u2019t thought about it before, but after applying it to a real component, the difference was immediately clear: the layout became cleaner, easier to maintain, and more predictable.<\/p>\n\n\n\n

In this post, I\u2019ll walk through the refactor, explain why it improves maintainability, and highlight how adopting small, thoughtful patterns can make a big difference at scale.<\/p>\n\n\n\n

The Original Approach<\/strong><\/h2>\n\n\n\n

Here\u2019s a simplified version of how spacing was originally handled in a card layout:<\/p>\n\n\n\n

export const CardTitle = styled(Text)`margin-top: 2rem;`;<\/span>\nexport const CardDescription = styled(Text)`\n  margin-top: 0.5rem;\n`;\nexport const Button = styled(ButtonBase)`\n  margin-top: 1.5rem;\n`;<\/code><\/pre>\n\n\n\n
Each element controlled its own spacing using margin-top<\/code>.<\/p>\n\n\n\n
At first glance, this works. But the more I looked at it, the more a few issues stood out.<\/p>\n\n\n\n
What Started to Feel Off<\/strong><\/h2>\n\n\n\n
1. Spacing is scattered<\/h3>\n\n\n\n
Each element is responsible for its own spacing, which makes it harder to understand the layout at a glance.<\/p>\n\n\n\n
You end up thinking:<\/p>\n\n\n\n
Why is this 2rem<\/code>? Why is this 0.5rem<\/code>?<\/p>\n\n\n\n
Instead of seeing a consistent system.<\/p>\n\n\n\n
\n\n\n\n
2. It doesn\u2019t scale well<\/h3>\n\n\n\n
If you add another element between the title and description, you now have to rethink spacing again.<\/p>\n\n\n\n
Spacing becomes tied to specific elements<\/strong>, not the layout itself.<\/p>\n\n\n\n
\n\n\n\n
3. Small edge cases start creeping in<\/h3>\n\n\n\n
Things like:<\/p>\n\n\n\n
    \n
  • Removing margin from the first or last item<\/li>\n\n\n\n
  • Inconsistent spacing between elements<\/li>\n\n\n\n
  • Overriding styles when layouts change<\/li>\n<\/ul>\n\n\n\n
    Nothing major individually, but it adds up.<\/p>\n\n\n\n
    \n\n\n\n
    The Refactor: Let the Container Handle Spacing<\/strong><\/h2>\n\n\n\n
    Instead of letting each child define spacing, I moved that responsibility to the parent using gap<\/code>.<\/p>\n\n\n\n
    export const Card = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n`;<\/code><\/pre>\n\n\n\n
    Then grouped related text elements:<\/p>\n\n\n\n
    export const CardText = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n`;<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    And removed margins entirely from the children:<\/p>\n\n\n\n
    export const CardTitle = styled(Text)``;\n\nexport const CardDescription = styled(Text)``;\n\nexport const Button = styled(ButtonBase)``;<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    Why This Change Matters<\/strong><\/h2>\n\n\n\n
    1. Centralized spacing<\/h3>\n\n\n\n
    All spacing logic lives in the container, so adjustments are easier and more predictable.<\/p>\n\n\n\n
    2. Predictable layouts<\/h3>\n\n\n\n
    No more worrying about first\/last child spacing, margin collisions, or one-off overrides.<\/p>\n\n\n\n
    3. Scales naturally<\/h3>\n\n\n\n
    Add a new element, and spacing is applied automatically. This reduces repetitive work and potential bugs.<\/p>\n\n\n\n
    4. Simplified mental model<\/h3>\n\n\n\n
    Before:<\/strong> each element decides its own spacing
    After:<\/strong> the container decides spacing between children<\/p>\n\n\n\n
    This shift makes layouts easier to reason about for yourself and for teammates reviewing your code.<\/p>\n\n\n\n
    Using Gap with Grid<\/strong><\/h2>\n\n\n\n
    This pattern became even clearer when applied to the grid layout:<\/p>\n\n\n\n
    export const CardGrid = styled.div`
      display: grid;
      gap: 3rem;
    `;<\/pre>\n\n\n\n
    Instead of worrying about margins between cards, the grid handles spacing automatically.<\/p>\n\n\n\n
    No extra logic, no edge cases \u2014 just consistent spacing.<\/p>\n\n\n\n
    When Margin Still Makes Sense<\/strong><\/h2>\n\n\n\n
    I don\u2019t think this means \u201cnever use margin.\u201d<\/p>\n\n\n\n
    Margin still works well for:<\/p>\n\n\n\n
      \n
    • Spacing between unrelated components<\/li>\n\n\n\n
    • Layout adjustments outside of flex\/grid<\/li>\n\n\n\n
    • One-off positioning tweaks<\/li>\n<\/ul>\n\n\n\n
      But inside a flex or grid container, gap<\/code> feels like the better default.<\/p>\n\n\n\n
      Takeaways<\/strong><\/h2>\n\n\n\n
        \n
      • Prefer gap<\/code> over margin<\/code> inside flex and grid containers<\/li>\n\n\n\n
      • Let containers control spacing, not individual elements<\/li>\n\n\n\n
      • Group related elements to simplify layout logic<\/li>\n\n\n\n
      • Small CSS decisions can make a big difference in maintainability<\/li>\n<\/ul>\n\n\n\n
        \n\n\n\n
        This is one of those patterns I wish I had started using earlier. This small refactor reminded me how powerful simple patterns can be. As systems grow, the little decisions \u2014 like letting containers handle spacing \u2014 add up to fewer bugs, faster reviews, and more maintainable code<\/strong>.<\/p>\n\n\n\n
        I\u2019ll definitely be applying gap<\/code> in future components, and I hope this pattern helps your team too.<\/p>\n\n\n\n
        It simplifies spacing, reduces small layout decisions, and makes components easier to scale over time.<\/p>\n","protected":false},"excerpt":{"rendered":"
        During a recent code review, a colleague suggested using gap instead of individual margins inside…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,4],"tags":[],"class_list":["post-35","post","type-post","status-publish","format-standard","hentry","category-code-patterns-refactoring","category-refactor"],"_links":{"self":[{"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/posts\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=35"}],"version-history":[{"count":3,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/posts\/35\/revisions"}],"predecessor-version":[{"id":38,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/posts\/35\/revisions\/38"}],"wp:attachment":[{"href":"https:\/\/vanianettleford.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}