Grid Generator CSS: App Screen Layout Guide

Grid generator CSS work starts with a 4-column phone grid, 16dp/16pt gutters, and 16–20pt side margins, then expands to 8 or 12 columns when a tablet screen has room. Use repeat(auto-fill, minmax(160px, 1fr)) for a card gallery that adds columns without breakpoint rules, and use grid-template-areas when dashboard regions need explicit names. Use CSS Grid for row-and-column placement; use flexbox inside each card or toolbar for one-dimensional alignment.

Key takeaways

• •Use repeat(auto-fill, minmax(160px, 1fr)) to add card columns as container width increases.
• •Start compact app screens with 4 columns, 16dp/16pt gutters, and 16–20pt outer margins.
• •An 8-column grid suits constrained tablet layouts; a 12-column grid gives wider tablet dashboards more alignment options.
• •CSS Grid places items in rows and columns; flexbox distributes items along one main axis.
• •Name dashboard regions with grid-template-areas so visual placement does not depend on source-order counting.

This guide is for mobile UI/UX designers and engineers who can inspect CSS and need to turn a phone screen layout into a responsive tablet layout.

Time: 30 minutes · You'll need: A browser with responsive device emulation, A CSS-capable app prototype or mobile web project, A phone-width viewport around 360–430 CSS pixels, A tablet-width viewport around 768–1024 CSS pixels, floow.design CSS Grid Generator, optional: /free-tools/css-grid-generator

What's on this page

1. •Set the phone app grid layout
2. •Make the css grid mobile gallery reflow
3. •Expand the grid system mobile design for tablets
4. •Choose Grid or flexbox for each app region
5. •Name dashboard regions with grid-template-areas
6. •Validate spans and export the layout
7. •Reference table

• •Common mistakes
• •FAQs

Build a grid generator CSS app layout

1. Set the phone app grid layout

Create a compact screen container with 4 equal columns, a 16px CSS gap, and side padding of 16–20px. In native design language, treat those starting values as 16dp on Android and 16pt on iOS for gutters; CSS uses px, not dp or pt. A practical manual declaration is:

.screen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding-inline: 16px;
}

Place a full-width section header with grid-column: 1 / -1. Let a standard gallery card span two columns with grid-column: span 2; this yields two cards per row on the 4-column phone layout. Use a 20px side margin only when the screen needs a less dense editorial feel. Neither Apple nor Android requires one universal screen margin, so verify the result against the app’s type scale, safe areas, and device sizes rather than treating 16 as a platform rule.

Tip: Keep a card’s image, title, and action controls inside the card; the page grid should control card position, not its internal alignment.

2. Make the css grid mobile gallery reflow

For a gallery whose number of columns should follow available width, replace fixed columns with repeat(auto-fill, minmax()):

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

minmax(160px, 1fr) prevents a card from becoming narrower than 160px and shares remaining row space among the tracks. auto-fill creates as many 160px-minimum tracks as fit in the gallery container, so the gallery can move from two cards per row on a phone to three or more on a tablet without a media query. Set the minimum from the card’s real content: an image card may work at 160px, while a commerce card with a two-line price and button may need 180px or more.

Do not use this rule for a dashboard where every tile must align to named page regions. Auto-placement is correct for repeated, interchangeable cards; it is not a substitute for deliberate information hierarchy.

Tip: Test the narrowest supported width first: 16px margins plus a 16px gap leave 312px for two columns in a 360px viewport.

3. Expand the grid system mobile design for tablets

Keep the same 16dp/16pt gutter when moving from phone to tablet, then choose the column count from the content model. Use an 8-column grid for a constrained tablet view where cards should remain large and teams need simple spans: a half-width module spans 4 columns and a quarter-width module spans 2. Use a 12-column grid for a wider tablet dashboard when you need thirds, quarters, and a persistent navigation rail to align on one system.

Set the count explicitly when visual rhythm matters:

@media (min-width: 768px) {
  .dashboard-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 16px;
    padding-inline: 20px;
  }
}

Use 12 columns instead of 8 only when the resulting column width can support the smallest module. A 12-column grid is not automatically more responsive; on a narrow tablet it can create overly small spans and unnecessary layout rules. Android’s window size classes describe available window width, not one mandatory visual column count.

Tip: Use the same column spans for equivalent content roles across tablet screens; changing a KPI card from span 3 to span 4 without a content reason makes dashboards drift.

4. Choose Grid or flexbox for each app region

Use CSS Grid when an app region needs control on both axes: rows and columns. A dashboard with a summary card beside a chart, followed by a full-width activity list, is a grid problem because each item must line up horizontally and vertically. Use flexbox when children are distributed along one axis: an icon and label in a button, a horizontal chip row, or a vertical stack inside a card.

A useful boundary is the card edge. The screen and gallery use Grid; the card body uses flexbox:

.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Do not force a toolbar into Grid merely because the page uses Grid. Flexbox handles a single row’s intrinsic label widths and end-aligned actions with fewer track definitions. Conversely, do not use nested flex rows to imitate a 4-column dashboard; it becomes fragile when tiles span different widths or heights.

Tip: Use min-width: 0 on a flex child containing long text so it can shrink and truncate instead of widening the grid item.

5. Name dashboard regions with grid-template-areas

Use grid-template-areas when dashboard components have stable semantic roles. Name regions such as nav, summary, chart, and activity; then assign each component with grid-area. The layout remains readable even when the DOM order is not visually obvious:

.dashboard {
  display: grid;
  gap: 16px;
  grid-template-areas:
    "summary"
    "chart"
    "activity";
}
.summary { grid-area: summary; }
.chart { grid-area: chart; }
.activity { grid-area: activity; }

@media (min-width: 768px) {
  .dashboard {
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas:
      "summary summary summary summary chart chart chart chart"
      "activity activity activity activity activity activity activity activity";
  }
}

Keep source order meaningful for reading and keyboard navigation. Grid areas change visual placement, but they should not be used to make an illogical source order appear correct. Use this technique for a small number of named dashboard modules, not for a gallery with 30 repeated cards.

Tip: Every row in a grid-template-areas declaration must contain the same number of area tokens as the declared grid columns.

6. Validate spans and export the layout

Check the gallery at a phone width around 360–430 CSS pixels and a tablet width around 768–1024 CSS pixels. Confirm that card titles wrap without clipping, touch targets remain usable, and no card falls below its chosen minmax() minimum. Check that the 4-column phone version has intentional spans, then inspect the 8- or 12-column tablet version for accidental empty tracks and uneven card heights.

You can create the same layout manually from the declarations in this guide. If you need to compare row counts, column counts, and gaps visually, use floow.design’s free CSS Grid Generator at /free-tools/css-grid-generator, set the rows, columns, and 16px gap, then export the matching format: CSS, Tailwind, SwiftUI LazyVGrid, Jetpack Compose, or Flutter. Treat exported code as a starting point and retain the content-driven card minimum you tested.

For text placed on cards or tiles, validate contrast against WCAG 2.2: normal-size text requires a 4.5:1 contrast ratio at Level AA.

Tip: Resize the container itself, not only the browser viewport; a tablet split view can make an 8-column layout behave like a compact screen.

Reference table

Starting grid specs for app screens

Do it with the free CSS Grid Generator

Lay out rows, columns and gaps visually, then export as CSS, Tailwind, LazyVGrid, Compose or Flutter.

Open the CSS Grid Generator → — free, no sign-up.

Common mistakes

Using 1fr 1fr for every gallery at every width.

Use repeat(auto-fill, minmax(160px, 1fr)) when repeated cards should gain columns as their container grows. Keep a fixed 4-, 8-, or 12-column grid only where shared alignment is required.

Treating 16dp, 16pt, and 16 CSS pixels as identical platform units.

Use 16dp and 16pt as native-platform design values, and use 16px in CSS. Check the rendered result on the target device or browser because CSS pixels are not iOS points or Android density-independent pixels.

Building a dashboard entirely from nested flex rows.

Use Grid for the dashboard’s two-dimensional page structure. Reserve flexbox for the one-dimensional content inside a tile, such as an icon-label row or vertically stacked metadata.

Using visual grid placement to repair an illogical source order.

Keep headings, controls, and content in a meaningful DOM order. Use grid-template-areas to express layout regions, not to conceal a navigation or reading-order problem.

Frequently asked questions

How do I make a CSS grid mobile gallery responsive without breakpoints?

Use grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) to let a CSS Grid gallery add columns when its container can fit another 160px card. The 160px minimum is a starting value, not a requirement; increase it if the card’s title, price, or controls need more width. Keep the gap at 16px if it matches the rest of the mobile spacing system.

Should an app grid layout use 4, 8, or 12 columns?

Use 4 columns for compact phones, 8 columns for constrained tablet layouts, and 12 columns for wider tablet dashboards that need more span combinations. These are layout decisions rather than iOS or Android mandates. Select the smallest grid that gives every content module a useful minimum width.

When should I use CSS Grid instead of flexbox in an app screen?

Use CSS Grid when components must align across both rows and columns, and use flexbox when items need distribution along one axis. A dashboard page with cards, charts, and lists belongs in Grid. A card footer with a label on the left and a button on the right belongs in flexbox.

Can I use grid-template-areas for a mobile dashboard?

Yes, grid-template-areas is well suited to a mobile dashboard with a small set of named regions such as summary, chart, and activity. Define a single-column area map on phones and replace it with an 8- or 12-column map on tablets. Keep the HTML source order aligned with the intended reading order.

What gutters and margins should I start with for a grid system mobile design?

Start with 16dp Android or 16pt iOS gutters and 16–20pt screen margins, then adjust only when content density or product hierarchy requires it. In CSS, express the corresponding starting gap as 16px. Treat these as tested defaults, not fixed platform requirements, and inspect the screen at narrow phone widths.

Where this leaves you

A responsive app grid does not require one layout rule for every screen. Use a fixed 4-column structure when phone content needs predictable spans, then choose 8 or 12 columns only where tablet content benefits from more alignment choices. Use repeat(auto-fill, minmax()) for repeated cards that can reflow freely, and use named areas for dashboard regions whose position carries meaning. Keep the page two-dimensional with Grid and each component one-dimensional with flexbox. Your next action is to lay out one real gallery at 360px and 768px, then set its card minimum from the first width where its content remains readable.

---

Design the screens first

Describe the screen you need in plain English and floow.design generates production-ready iOS and Android layouts you can iterate on by chat, then export to Figma or code. Design your mobile app screens in floow.design first, then build.

Start designing free →

---

Related

• •Flexbox Generator — Build a flex layout visually, then export it as CSS, Tailwind, SwiftUI, Compose, React Native or Flutter.
• •Gradient Generator — Build linear, radial and conic gradients with as many stops as you need, then export to CSS, SwiftUI, Compose, React Native or Flutter.
• •Box Shadow Generator: Mobile Elevation Guide — Use a box shadow generator to build a mobile elevation scale with Material dp levels, tint
• •Border Radius Generator for Mobile UI — Use a border radius generator to set a three-step mobile radius scale, preserve concentric
• •Gemini 3.1 for Mobile App UI Design: 4 Real Prompts Tested Hands-On (2026) — I tested Gemini 3.1 Pro with 4 real mobile app UI prompts — fitness tracker, food delivery

Sources

• •W3C CSS Grid Layout Module Level 1
• •Material Design 3: Understanding layout
• •Android Developers: Use window size classes
• •Apple Human Interface Guidelines: Layout
• •W3C Web Content Accessibility Guidelines (WCAG) 2.2