CSS Grid Baseline Alignment Demo

CSS Grid baseline alignment (using align-items: baseline) aligns grid items so that the baseline of their text content sits on the same horizontal line. The baseline is the invisible line upon which most letters rest. This is especially powerful for typography synchronization — headings, subheadings, and body text of different font sizes can share a common baseline, creating a harmonious, professionally typeset look.

Both CSS Grid and Flexbox support align-items: baseline. The core behavior is similar — items align along their text baselines. However, Grid operates in two dimensions, allowing baseline alignment across both rows and columns simultaneously, while Flexbox is one-dimensional. Grid also supports first baseline and last baseline for multi-line text scenarios, giving finer control over which baseline is used for alignment.

Baseline alignment shines in card grids with mixed content, dashboard widgets, pricing tables, product listings, and any layout where you want headings of varying sizes to share a visual rhythm. It's also excellent for icon + text combinations in navigation or feature lists. Whenever typographic consistency across different-sized text matters, baseline alignment is the ideal choice.

Line-height directly impacts where the baseline falls within a grid item's content box. Larger line-height values push the text baseline further down from the top of the content area. When using align-items: baseline, items with different line-heights will still have their text baselines aligned — but their content boxes may appear uneven. The baseline is calculated from the first (or last) line of text, accounting for the line-height distribution above it.

First baseline aligns items using the baseline of the first line of text in each item. Last baseline uses the baseline of the last line. For single-line text, both produce the same result. For multi-line text blocks, first baseline ensures the opening lines are aligned (great for headings above paragraphs), while last baseline aligns the final lines (useful for footer-like content or when the bottom edge matters more).

Yes! align-items: baseline in CSS Grid has excellent browser support across all modern browsers including Chrome, Firefox, Safari, and Edge (back to version 16+). It's part of the CSS Grid Level 1 specification. Even first baseline and last baseline are widely supported. For production use, it's safe to rely on baseline alignment without fallbacks for 97%+ of global users.

CSS Grid allows per-item overrides using align-self on individual grid children. So you can set align-items: baseline on the container and align-self: center on a specific item that shouldn't participate in baseline alignment. This gives you granular control — most items follow the baseline rhythm while outliers (like images or badges) can be independently positioned.

Different typefaces have different baseline ratios (ascender height, x-height, descender depth). When mixing font families in a baseline-aligned grid, the browser still aligns their baselines correctly — but the visual result may feel uneven because the fonts' internal proportions differ. For best results, stick to one font family when using baseline alignment, or test carefully when mixing typefaces to ensure the visual rhythm holds.

Yes. The baseline is calculated relative to the content edge of the grid item, inside any padding or border. If two items have different padding-top values, their text baselines can still align — but their visual content boxes will be offset. The browser accounts for padding when determining where the baseline sits within the overall item. Use the demo above to experiment: adjust padding (via the item controls) and observe how baseline alignment adapts.

In Chrome/Edge DevTools, inspect a grid container and look for the "Grid" overlay badge. Enable it to see grid lines, gaps, and item boundaries. Firefox DevTools offers even richer grid inspection with baseline indicators. You can also temporarily add outline: 1px solid red to grid items to see their content box edges. Our tool above with the "Baseline" toggle gives you a live visual reference — use it as a learning aid before inspecting your own layouts.