Grid-Based Layouts for Apps

UI designers: this is why Flexbox and CSS Grid actually matter to your daily work. Read on. I wrote a deep dive on modern CSS layout, but here’s the part that’s most relevant if you design in Figma every day: • Auto Layout is basically Flexbox Same mental model. Parent sets the rules, children respond. Direction, spacing, alignment, growth, wrapping, you need to understand it. If something feels “off” in Auto Layout, it will feel off in the browser too. • CSS Grid is not a column grid It’s a two-dimensional layout system built on grid lines and areas. That’s why classic column thinking breaks down so often in dev conversations. • New Figma grid features are closing the gap Fractional units (fr) mixed with fixed. These are the things developers rely on when layouts adapt without endless breakpoints. • The browser behaves, Figma represents What you design is a model. It's getting closer, but it is NEVER as powerful as the browser (I know, I know it's hard hearing this as a Designer). The browser decides how it actually flows when content, screen size, or language changes. So you can be in love with your design but not with the pixel. • This is not about handoff or writing CSS It’s about designing layouts that are possible, flexible, and predictable once they hit real data and real screens. If you understand how Flexbox maps to Auto Layout and how CSS Grid actually works, design-dev conversations get clearer fast. Less “why doesn’t this match Figma” and more “what rules do we want here” and "Let me polish X in Figma and let's see Y in the browser" ✍️ The full article (includes video): https://lnkd.in/dGnvbDSa For more on modern layout, design-dev collaboration, and what’s coming next (container queries included), my free weekly newsletter is where I share the ongoing thinking. ✉️ → Newsletter: moonlearning.io/newsletter
 📚 → All my tutorials: moonlearning.io

🚀 CSS Masonry is finally coming and it’s surprisingly simple For years, layouts like Pinterest-style Masonry never had a proper home in CSS. We relied on hacks, columns, or JavaScript libraries. That’s finally changing. The CSS Working Group has agreed on a native solution using Grid, called grid-lanes. What’s important to know * Masonry will be activated with: - display: grid-lanes; * You still use normal Grid concepts: - grid-template-columns - gap * The browser handles the uneven heights automatically → no hacks, no JS Real-world status: I tested this myself in Safari Technical Preview, and it already works very well. The setup is minimal, and the behavior feels natural. The attached image shows exactly the kind of layout this enables clean, responsive masonry using real CSS. It took years of discussion to get here, but this feels like the right solution: simple, familiar, and finally native. Excited to see this land in stable browsers soon 👏 #CSS #Frontend #WebDev #WebStandards

Creating responsive featured grid items with Container Queries Container Queries play an important role in creating responsive layouts at the component level. And with CSS Grid, we can build featured grid items adapting to its container’s size responsively. First, let’s define our grid layout: .card { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(40ch, 100%), 1fr)); justify-content: start; } The key values to note are the 32px gap and the 40ch in the min() function inside minmax(). These will be the basis for making our featured item responsive to the grid’s size. To make our component responsive based on its own container size (not the viewport), we define a container query on .card: .card { … container: featured-grid / inline-size; } `featured-grid` is the name of our container query, and `inline-size` tells CSS to measure the container’s size along the inline axis (width in horizontal writing modes). Now to make the featured item layout responsive, first we target the featured element which contains a video (as an example) with :has() pseudo class: .card__article { … &:has(> video) { … } } Now, let’s set up the container query so the featured item spans two columns when there’s enough space: .card__article { … &:has(> video) { @container featured-grid (inline-size > calc(40ch * 2 + 32px)) { grid-column: span 2; } } } We target the `featured-grid` container and check if its `inline-size` exceeds the width of two columns (two × 40ch items plus 32px gap). If so, the featured item spans two grid columns. Now if we want the featured item to span two rows when there’s room for more columns: @container featured-grid (inline-size > calc(40ch * 3 + 32px)) { grid-row: span 2; } This approach with container queries can dynamically adjust the size (and position too) of the featured grid item based on its container’s width. #frontend #containerquery #grid #responsive

💡Responsive grid system (+ tutorial & tools) Practical recommendations for UI designers & front-end developers for creating effective responsive grid systems: ✔ Define breakpoints Breakpoint is a specific screen size at which a UI layout adapts to provide an optimal viewing experience. Set breakpoints for common screen sizes (e.g., mobile, tablet, desktop). You can use breakpoints from Bootstrap as a reference (576px for mobile, 768px for tablet, 992px for desktop, and 1200px for large display) and adapt this system based on your specific audience & device usage analytics. Try to set breakpoints based on your content rather than specific device sizes. ✔ Set up a column grid Column grid organizes content vertically into columns. It’s primarily used to manage the layout of blocks of content and align elements horizontally. Decide on the type of grid based on the device and content. For example, a 12-column grid is standard for web design, 4-column grid works well for tablet, and 2 or single-column grid for mobile. ✔ Define margins and gutters. Margins are the space around the grid, and gutters are the space between columns. They help maintain whitespace and prevent clutter. Use consistent gutters for all mediums. ✔ Design for the smallest screen first, then scale up Designing for the smallest screen first, also known as the mobile-first approach, will maximize the chances that your UI will be both functional and aesthetically pleasing on all devices. By following a mobile-first approach, you will prioritize the content and functional elements of your solution. ✔ Scale consistently Use a consistent scale for spacing, such as 8pt grid system, to maintain uniformity across different viewports. ✔ Use fluid layouts with percentages When developing your UI, try to avoid using fixed widths. Instead, use relative units like %, vw (viewport width), or vh (viewport height). Using percentages for widths will ensure elements resize with the viewport. ✔ Use responsive units for fonts Use REM for font sizes to ensure scalability and EM for padding and margins to maintain proportionality. ✔ Use flexible images and media Consider using the srcset attribute for images to serve different sizes based on the device. Set images and videos to be responsive using max-width: 100%; and height auto. ✔ Content hierarchy Ensure the most important content is prominently displayed and easy to access on all screen sizes. Use size and scale—larger elements tend to draw more attention (i.e., use larger fonts for headings and smaller fonts for body text). Also, use the grid to strategically position important content. Elements placed higher on the page or in the center tend to be noticed first. 📺 How to design grid system in Figma: https://lnkd.in/dTPEpvRK ⚒️ Tools ✔ Interactive CSS Grid Generator https://grid.layoutit.com/ ✔ Mobile Screen Sizes: Repository of screen sizes and technical details for Apple devices https://screensizes.app/ #UI #design

🍱 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

Tired of misaligned layouts? Subgrid fixes that. Keeping elements aligned across components is one of the hardest parts of UI design. Cards drift. Rows stop lining up. Spacing breaks. Subgrid solves this at the layout level. Instead of redefining a grid inside every component, child elements can inherit the parent’s grid tracks. Same columns. Same rows. Perfect alignment. The result is cleaner code and more predictable layouts. No more uneven row heights. No more manual offsets. No more pixel pushing. Using it is straightforward. .child {  display: grid;  grid-template-rows: subgrid; } You can even span multiple tracks when needed. grid-row: span 3; Subgrid is supported in about 91% of browsers, so it’s ready for real projects. If you care about consistency and structure, Subgrid is a game changer. Are you using it yet? *** To learn more tips about CSS, make sure to join my newsletter https://lnkd.in/eemgxQ7M ❤️