{{ summaryHeading }}
{{ summaryValue }}

{{ summaryLine }}

Strategy{{ computation.ok ? grid_mode : '—' }} Preview{{ computation.ok ? `${item_count} items` : '—' }} Rules{{ computation.ok ? values.declaration_count : '—' }}
Use a class, ID, element, or selector list without braces or semicolons.
{{ issueFor('selector').message }}
Choose responsive repeat-to-fill behavior or an exact column count.
Responsive tracks grow to 1fr after meeting this minimum.
{{ issueFor('min_track_value').message }}
Whole fixed column count from 1 to 12.
{{ issueFor('columns').message }}
The unit also applies to the column gap.
{{ issueFor('row_gap_value').message }}
Equal row and column gaps collapse to one gap value in the CSS.
{{ gap_unit }}
{{ issueFor('column_gap_value').message }}
Whole sample child count from 1 to 24.
{{ issueFor('item_count').message }}
Off is neutral. Turn it on to wrap the minimum in min(100%, value).
{{ narrow_guard ? 'Enabled' : 'Disabled' }}
Auto emits no extra declaration; other choices size implicit rows.
Row is neutral; dense choices may visually backfill placement gaps.
Normal is neutral; other choices align the whole grid in spare space.
Off is neutral. Turn it on to emit a child rule spanning the first scaffold item across two columns.
{{ include_feature_rule ? 'Enabled' : 'Disabled' }} 
{{ values.css_text }}
Layout Preview

The chart renderer is unavailable. Exact fit estimates remain available in Property Ledger exports.

ScopePropertyValueLayout roleImplementation noteCopy
{{ row.scope }}{{ row.property }}{{ row.value }}{{ row.role }}{{ row.note }}
{{ values.html_text }}
Tags: Devtools
CSS Flexbox Generator Build Flexbox container and optional child-sizing CSS with axis-aware alignment, wrapping warnings, plus a live preview and starter HTML.
CSS Gradient Generator Build CSS gradients using linear, radial or conic geometry with exact color stops and optional modern interpolation spaces for copy-ready stylesheets.
CSS Box Shadow Generator Compose ordered CSS box-shadow layers and compare blur and spread in a live preview before copying a stylesheet rule or reusable design token.
CSS Border Radius Generator Generate circular or elliptical border-radius CSS, inspect clockwise corner values, and check whether the browser will scale overlapping curves.

A grid track is a promise about how much room a row or column may use. Fixed tracks make the count predictable. Responsive tracks protect a useful minimum and let the browser change the count as the container grows or shrinks. That choice shapes card galleries, dashboards, feature lists, image collections, and form layouts long before individual items are styled.

CSS Grid lays direct children into rows and columns. Explicit tracks come from properties such as grid-template-columns; implicit tracks are created when auto placement needs more room. Gaps sit between tracks, so increasing a column gap can reduce the number of responsive columns that fit.

StrategyTrack behaviorBest fit
auto-fitCreates as many tracks as fit, then collapses empty repeated tracks.Cards should stretch when there are fewer items than available slots.
auto-fillCreates as many tracks as fit and keeps empty repeated tracks reserved.Slot-like layouts should preserve the empty track rhythm.
Fixed countCreates an exact number of equal minmax(0, 1fr) tracks.The design owns the column count and handles responsive changes elsewhere.

A responsive pattern commonly combines repeat(), auto-fit or auto-fill, and minmax(). The minimum protects card readability; 1fr lets surviving tracks share leftover space. Wrapping the minimum as min(100%, value) prevents a chosen minimum from forcing overflow when the entire container becomes narrower than one track.

Auto placement fills available cells according to grid-auto-flow. Dense placement may backfill an earlier empty cell with a later item, improving visual packing without changing document order. That can make the visual sequence differ from keyboard focus and screen-reader reading, so dense layouts require an explicit order review.

  • Choose minimum track width from real content, not from a device label.
  • Test long words, images, form controls, and nested components that may have intrinsic minimum sizes.
  • Use fixed columns only when another responsive rule will reduce the count before tracks become unusably narrow.

A projected column count is planning evidence, not the browser's full track-sizing result. Fonts, writing mode, item minimums, percentage resolution, surrounding CSS, scrollbars, and container constraints can change the rendered grid.

How to Use This Tool:

Choose the track strategy before spacing or alignment because it determines whether the browser or the stylesheet owns the column count.

  1. Enter the Container selector. Braces, semicolons, control characters, and selectors longer than 120 characters are rejected.
  2. Select Responsive auto-fit, Responsive auto-fill, or Fixed columns. Set a minimum track from 1 to 1600 in responsive modes, or a whole column count from 1 to 12 in fixed mode.
  3. Set row and column gaps from 0 to 999 and choose their shared unit. Equal values become one gap value; unequal values are emitted as row gap followed by column gap.
  4. Choose item alignment and set Preview items from 1 to 24. The item count changes the preview, fit estimate, and starter HTML, not the core track rule.
  5. Open Advanced to guard narrow responsive containers, size implicit rows, change auto-placement direction, align the whole grid, or add a two-column featured-item rule.
  6. Compare Grid CSS, Layout Preview, and Fit Profile. Treat the profile as an estimate, then test the copied CSS with real content at the smallest and largest expected container widths.

Interpreting Results:

The generated grid-template-columns value carries the central layout decision. In responsive mode, verify the minimum track and whether empty tracks should collapse. In fixed mode, verify that the chosen count remains readable at every width where the rule applies.

Fit Profile estimates columns and rows at 320, 480, 640, 768, 1024, and 1280 pixels. It assumes simplified unit conversions and does not measure actual child content. A favorable estimate can still overflow when a grid item has an unbreakable minimum width.

Warnings identify the estimate's assumptions and order risks. Test ch, em, rem, and percentage choices in the target typography; review dense placement against source and focus order; and check that a featured two-column span does not land in a one-column fixed grid.

Technical Details:

The generated grid always establishes a grid formatting context, emits a column track list, and emits spacing. Non-default implicit-row sizing, auto flow, item alignment, whole-grid alignment, and the featured child span appear only when selected.

Transformation Core:

ChoiceGenerated track expression
Fixed count Crepeat(C, minmax(0, 1fr))
Responsive K with minimum Mrepeat(K, minmax(M, 1fr))
Responsive with narrow guardrepeat(K, minmax(min(100%, M), 1fr))
Equal row and column gapsgap: value;
Unequal gapsgap: row column;

Here, K is auto-fit or auto-fill. The responsive minimum accepts pixels, root or element ems, character units, or percentages. A fixed grid uses a zero floor inside each fractional track so content-based minimums are less likely to force unequal columns.

Formula Core:

The fit estimate converts the minimum track and column gap to pixels for each sample width, then counts how many minimum tracks fit with their intervening gaps.

Cpossible=max(1, ⌊W+GM+G⌋)
R=max(1,⌈NC⌉)

W is sample container width, G is column gap in pixels, M is minimum track width in pixels, N is preview item count, C is projected columns, and R is projected rows. auto-fit caps C at N because empty tracks collapse; auto-fill keeps C at the possible track count. Fixed mode uses the selected column count directly.

For the estimate, rem and em use 16 pixels per unit, ch uses 8 pixels, and percentages use the sample container width. For example, at 768px with a 220px minimum and 24px gap, floor((768 + 24) ÷ (220 + 24)) gives 3 possible columns. Eight items then project to ceil(8 ÷ 3) = 3 rows.

These conversions are deliberately simpler than browser layout. The active font can change em and ch; intrinsic item sizing can enlarge tracks; and percentage gaps participate in layout according to CSS sizing rules. The preview and fit estimate therefore support comparison, not final acceptance.

References: