Layout and Grid Systems

Uber bets on Hexagons. Google bets on Squares. Who is right? They both are. But if you choose the wrong grid system, your spatial analytics will suffer. Any grid system trades infinite precision for massive speed. But they aren't all equal. Here are the Pros & Cons of the Big 3 (in my opinion): 1. H3 (Hexagons) The Data Scientist's Favorite. Pros - Visual: Hexagons look organic and smooth out data noise. - Neighbors: Every neighbor is the same distance away (great for mobility). Cons - Distortion: Not perfectly equal area. - Hierarchy: You can't perfectly subdivide a hexagon into smaller hexagons (it’s approximate). 2. S2 (Squares) The Engineer's Workhorse. Pros - Speed: Computers process squares faster than any other shape. - Hierarchy: Perfect subdivision. A parent square splits into 4 exact child squares. Cons - Visuals: Blocky and ugly for maps. - Neighbors: Diagonals are further away than adjacent squares (bad for movement analysis). 3. A5 (Pentagons) The Analyst's Secret Weapon. Pros - Accuracy: It is an "Equal Area" grid. Every cell is the exact same size. - Statistics: The best choice for rigorous density analysis. Cons: - Newness: Less tooling and community support than H3 or S2. The Summary: Build for eyeballs? Use H3. Build for machines? Use S2. Build for pure stats? Use A5. Of course there are more, but these are the three that I see the most. Pick your grid. 🌎 I'm Matt Forrest and I talk about modern GIS, earth observation, AI, and how geospatial is changing. 📬 Want more like this? Join 11k+ others learning from my daily newsletter → moderngis.com

Designing for spatial interfaces feels like being handed a blank room and told, “Make it make sense.” AR, XR, VR (whatever acronym you want) forces you to rethink everything. But here’s the twist: The oldest principles in design are still the most useful. When I work on AR interfaces at Polyform Studio, I don’t start with sci-fi metaphors or gestural fireworks. I start with the same tool every designer learned in their first year: The grid. Why? Because when you’re working in 3D space, you need structure more than ever. Your UI elements aren’t just “on screen.” They’re floating, scaling, fading, orbiting. Without invisible order, it’s chaos. Here’s how I apply traditional layout to spatial design: Create an anchor plane - Even in 3D, most interactions need a visual home base. - Build a primary surface to hold your core elements, menus, inputs, feedback. Apply grid logic to Z-space - Treat depth like a layout dimension. - Give UI elements clear visual hierarchy not just left to right, but front to back. Use rhythm to reduce motion sickness - Spacing, pacing, balance, those Bauhaus rules you ignored? - They’re crucial when your interface moves with your head. The most advanced interfaces aren’t chaotic. They’re structured. Gridded. Timeless. → See how we structure emerging interfaces at Polyform .co

Tired of cards that never line up properly? Subgrid fixes the part Grid could not. You know the pattern. You build a nice card layout. Then one title is longer, one description wraps differently, and suddenly everything feels a bit off. That is exactly where subgrid helps. Instead of creating a brand new grid inside each card, the child can reuse the parent’s tracks. Same columns. Same rows. So everything stays aligned, even when the content changes. The syntax is pretty simple: .child {  display: grid;  grid-template-rows: subgrid; } And if you need an item to take more space, that still works too: grid-row: span 3; What I like about subgrid is that it solves a very real UI problem. Not a flashy one. Just the annoying kind that keeps layouts from feeling polished. No more nudging things into place. No more fake spacing fixes. No more “why is this card 4px off?” moments. Support is also better than many people think. CSS Subgrid is at about 92.48% global support now, and MDN lists it as widely available across major browsers. If you care about clean, consistent layouts, subgrid is one of those features that quickly becomes hard to live without. Are you using it already? *** To learn more tips about CSS, make sure to join my newsletter https://lnkd.in/eemgxQ7M ❤️

Designers, your developers won't tell you this... But they HATE your handoff process. Here's how to fix it: Your Figma files are a mess. Developers open your design and see: • No clear structure. • Inconsistent spacing & grids. • No clear min/max width rules. • Missing responsiveness guidelines. • Random font sizes that don’t scale properly. So, what happens next? They guess, tweak, rewrite layouts... And suddenly, your 'pixel-perfect' design looks like a McDonald's burger in real life. Lifeless. Deflated. Not the way you imagined it. Here’s how to handoff your designs like a pro: 1. Always start with a base resolution Pick a standard resolution your devs can scale from. If you design at 1440px wide, ensure all your content scales down properly for 1024px, 768px, and 375px. (No, just ‘making it responsive later’ won’t cut it.) 2. Use a proper grid & container system Developers think in containers and grids, not absolute positions. If you place elements randomly, they’ll have to re-engineer the layout. Use 8px/12px spacing and keep all content inside defined containers. Bonus: Use auto layout in Figma so your designs behave like real-world UI. 3. Define min/max width values A layout that looks great at 1440px might break at 1920px or 1280px. Set min/max width constraints so devs don’t have to guess. Example: • Hero section: Max-width 1200px, centers inside a 1440px viewport • Text containers: Never go wider than 800px (for readability) 4. Scaling images & assets properly Nothing slows down a website like unoptimized assets. • Icons? Use SVGs (they scale infinitely). • Images? Provide 2x or 3x versions for retina displays. • Logos? Always in SVG format, no PNGs for scalable elements. Your devs shouldn’t have to re-export your assets because they’re blurry. 5. Set typography rules that actually work You can’t just pick random font sizes and expect devs to figure it out. Set a clear typographic scale: H1 → 48px H2 → 36px H3 → 28px Body → 16px Small text → 14px Then define: • Line height (1.4x – 1.6x for readability) • Responsive behavior (ex: H1 shrinks to 32px on mobile) 6. Leave clear annotations • Use comments to clarify interactions, animations, and logic. • Pin notes for critical elements (e.g., ‘This button sticks to the top on scroll’). 7. Test your own designs before handing them off Think like a developer: • Resize your design—does it actually adapt well? • Try removing some text—does the layout break? • Swap images—does everything still look aligned? TL;DR: Your design handoff isn't just about making things pretty. It’s about helping your team. Want to see how it looks when every pixel translates exactly as intended? Check my portfolio.

Mastering Grid Systems in Design: The Key to a Well-Structured Layout! 🎨📐 Grids are the backbone of effective design, helping to maintain consistency, balance, and readability. Whether you’re designing a website, a magazine layout, or a branding project, understanding different grid systems can elevate your work. Here’s a breakdown of six essential grid types: 🔹 Axial Grid – All elements align along a central axis, creating a structured yet flexible design flow. Ideal for modern and asymmetric layouts. 🔹 Baseline Grid – Focuses on text alignment using a consistent baseline, ensuring typography is clean and easy to read, commonly used in editorial design. 🔹 Column Grid – Divides the design into vertical sections, perfect for newspapers, blogs, and websites that need organized content distribution. 🔹 Modular Grid – Uses a combination of rows and columns to form equal-sized blocks, great for dashboards, product catalogs, and UI/UX designs. 🔹 Hierarchical Grid – Prioritizes content based on importance rather than strict alignment, allowing for more creative and dynamic layouts. 🔹 Radial Grid – Elements extend outward from a central point, often seen in circular designs, logos, and artistic compositions. Choosing the right grid system can enhance your design workflow and improve user experience. #GraphicDesign #DesignGrids #UIUX #VisualHierarchy #Typography #DesignTips #CreativeProcess

Just released. Figma Grid now supports fractional (fr) units. This was very high on my wishlist. Tiny unit huuuuge impact!!! Why this matters 👇 What fr units do in Figma An fr is a fraction of the available space. Think of it as “take what’s left and split it fairly”. If you place 3 items in a grid row and leave everything on default, each one gets 1fr. So each item takes one equal share of the available width. Until now, that was basically where it stopped. Everything filled the container evenly. No nuance. Where this comes from Figma’s grid is based on CSS Grid. In CSS Grid, fr units are core. You can say: - this column gets 1fr - that one gets 2fr - another gets 0.5fr The browser does the math and distributes space proportionally. In Figma, we could visually recreate grids like this, but once elements were set to “Fill container”, they all behaved like 1fr. Equal split, always. What changed now With fractional units in Figma Grid, we can finally assign different fractions. That means: - intentional column ratios - layouts that scale without breaking - grids that behave like real CSS grids, not just look like them Why this is a big deal (even if it’s a tiny unit) This gets us one step closer to proper CSS output from Figma. And one step closer to designing in actual web logic, not pixel illusions. Especially with things like Figma Sites and Figma Make, this matters a lot. You’re not just drawing layouts anymore. You’re describing real grid behavior that maps cleanly to code. Tiny feature. Huge shift. Design tools are slowly aligning with CSS. And designers are quietly becoming builders because of it. ✍️ → Full Article about CSS layout & Figma (free) https://lnkd.in/dGnvbDSa 📚→ Full course aligning Figma and Code: moonlearning.io ✉️ → Free weekly Newsletter: moonlearning.io/newsletter

🍱 A Designer’s Guide To Flexbox And CSS Grid (+ Videos) (https://lnkd.in/eX-6F2Ya), a friendly practical guide for designers on how the grid works in the browser, why breakpoints might be unnecessary and how to think about grid and layout when designing in Figma. Neatly put together by Christine Vallaure de la Paz. 👏🏼👏🏽👏🏾 🤔 Designers and developers often understand grid differently. 🤔 Most UIs react to fixed breakpoints based on screen width. 🤔 It makes it necessary to create mock-ups for different widths. ✅ With Flexbox and Grid, UIs can adjust without breakpoints. ✅ Instead, they react and adapt to available content/space. ✅ Flexbox is 1-dimensional ← often used for UI components. ✅ It has 2 elements: parent container and its child elements. ✅ You can control the direction, wrapping, alignment, spacing. ✅ Flexboxes can be nested and set rules to their direct children. ✅ Figma’s auto-layout reflects Flexbox in the Dev Mode. ✅ CSS Grid is 2-dimensional ← used for grids and layout. ✅ It relies on grid lines that set up the grid columns/rows. ✅ We place items across grid lines with coordinates. ✅ Each cell can grow depending on available space. 🚫 You might not need fixed breakpoints for your UIs. The clash between design and technical prototype often happens for one simple reason: there is a mismatch of designer’s expectations of how it should work, and how it technically works under the hood. As designers, we are often allergic to code. We don’t have to know all the technical intricacies — but it’s incredibly useful to understand the material used to actually build those digital experiences that we diligently envision in our design tools. Breakpoints are a good example of that. While we needed them in the past, these days, much of the work can be done with self-contained components that change their appearance depending on where they are on a page. We can use Flexbox, Grid and container queries to allow components to automatically adapt based on their parent. We can use fluid type to allow spacing and font sizes adapt automatically — all without breakpoints. We might need breakpoints for large global changes in layout and grid, but mostly not for component-level changes. There, we can let components flow and scale up and down naturally, within the limitations that we set up for them. Useful resources: Designer's Guide To Container Queries, by Christine https://lnkd.in/e99he_xT Designer’s Guide To Fluid Typography, by Christine https://lnkd.in/egyu3fdg New Front-End Features For Designers In 2025, by Cosima Mielke https://lnkd.in/eDUGbbxe #ux #design

Responsive grid in one line of CSS ⚡ Want a layout that just works on all screen sizes — no media queries, no breakpoints? Here’s a powerful trick using CSS Grid 👇 .card-container is the parent grid .card-container {  display: grid;  gap: 1.5rem;  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } Let’s break it down:    display: grid → enables grid layout    gap: 1.5rem → adds spacing between cards    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) This part is the magic ✨    minmax(300px, 1fr) → each column is at least 300px, but can grow to take up space    auto-fit → automatically fits as many columns as possible based on container width The .card .card {  display: flex;  flex-wrap: wrap; } Each card uses Flexbox inside to lay out content responsively too — like images + text side by side or stacked. ✅ Clean ✅ Responsive ✅ Minimal This is one of the most production-friendly layouts you’ll ever use.