CSS Grid, Subgrid & Flexbox Layout Generator

CSS Grid vs Flexbox: When to Use Each

CSS Grid and Flexbox are both layout systems, but they solve different problems. Flexbox works along a single axis: either a row or a column. Grid works in two dimensions simultaneously: rows and columns at the same time. This distinction shapes every decision you make when choosing between them.

Use Flexbox when you have a list of items you want to distribute along one axis. Navigation bars, button groups, card rows, and form input layouts are all natural Flexbox use cases. The items themselves drive the layout: they can grow, shrink, or wrap as needed. Flexbox is content-first.

Use Grid when you already know the structure of your layout and want to place items into specific tracks. Page-level layouts, magazine-style grids, pricing tables, and dashboard panels are Grid territory. The container defines the tracks first; items slot into them. Grid is layout-first.

What This Generator Can Do Right Now

This tool includes practical workflow features on top of raw CSS property controls. In the Grid tab, you can start from templates such as Holy Grail, Sidebar, Card Grid, Sticky Footer, Dashboard, and 3 Equal Columns, then fine tune tracks, gaps, and item alignment. You can click empty preview cells to add placed items, drag item edges to resize spans, and use visible grid line numbers to place items accurately by line.

In the Subgrid tab, you can add children from the form or by clicking the parent preview, then drag each child edge to resize and test inherited columns, rows, or both axes. In the Flexbox tab, you can configure container properties and per item properties including custom class names, grow, shrink, basis, align-self, and order. All three tabs support CSS and HTML output toggle modes and include class-name inputs so generated markup can match your naming convention.

How grid-template-columns Works

The grid-template-columns property defines how many columns the grid has and how wide each one is. You write a space-separated list of track sizes: grid-template-columns: 200px 1fr 1fr creates a three-column grid where the first column is a fixed 200px and the remaining two split the leftover space equally.

How grid-template-rows Works

The grid-template-rows property defines row heights in the same way. grid-template-rows: 80px 1fr 60px creates a three-row grid: a fixed header row, a flexible middle row that absorbs leftover space, and a fixed footer row. Rows without explicit sizing default to auto, which shrink-wraps to the tallest content in that row.

The fr Unit Explained

The fr unit means "fraction of available space." After all fixed, auto, and content-sized tracks are assigned their space, the browser divides the remaining space by the total number of fr units and allocates proportionally. 2fr 1fr means the first column gets twice as much leftover space as the second. This makes fr the primary unit for flexible, responsive grids without media queries.

Understanding repeat()

The repeat() function is shorthand for repeating track definitions. repeat(3, 1fr) expands to 1fr 1fr 1fr. You can also repeat patterns: repeat(2, 100px 1fr) becomes 100px 1fr 100px 1fr. For responsive grids without media queries, use repeat(auto-fill, minmax(250px, 1fr)) to create as many columns as fit while keeping each at least 250px wide. auto-fit works the same way but collapses empty tracks so the filled columns stretch to fill the row.

Understanding minmax()

The minmax() function sets a minimum and maximum size for a track. minmax(200px, 1fr) means "at least 200px, but grow to fill available space." minmax(0, max-content) means "start at zero but never exceed the content's natural width." This function is especially useful inside repeat() for responsive layouts: repeat(auto-fill, minmax(200px, 1fr)) creates a fully responsive grid that wraps without any media queries.

min-content and max-content

min-content sizes a track to the smallest width the content can occupy without overflowing. For text, this is the width of the longest unbreakable word. max-content sizes the track to fit all content on a single line with no wrapping at all. These intrinsic sizing keywords give you precise control over content-driven track sizing without guessing pixel values.

The gap Property

The gap property (shorthand for row-gap and column-gap) adds spacing between grid tracks or flex items. Unlike margins, gap only applies between items, not on the outer edges. gap: 1rem applies equal spacing in both directions. gap: 1rem 2rem sets row gap and column gap separately. The gap property works identically in both Grid and Flexbox, making it the preferred way to space items in modern CSS.

Named Areas and grid-template-areas

grid-template-areas is one of Grid's most powerful and underused features. Instead of calculating line numbers, you describe the layout visually in your CSS using named strings:

grid-template-areas:
  "header header header"
  "sidebar main   main"
  "footer footer  footer";

Each quoted string represents one row. Each word in the string represents one column cell in that row. Every area name must form a rectangle, every row must have the same number of tokens, and you assign an element to an area with grid-area: name. Use . for empty cells.

Grid Line Numbers and Placement

Every grid track creates numbered lines. A 3-column grid has lines 1 through 4. You place items using grid-column: 1 / 3 (span from line 1 to line 3, covering 2 columns) or grid-row: 2 / 4 (rows 2 through 3). You can also use span: grid-column: 1 / span 2 means "start at line 1 and span 2 tracks." Negative line numbers count from the end: grid-column: 1 / -1 spans the entire grid.

What is CSS Subgrid?

Subgrid solves a classic alignment problem: you have a parent grid with defined tracks, and a child element that spans multiple tracks. By default, that child starts a brand new grid context and cannot align to the parent's lines. With grid-template-columns: subgrid on the child, it inherits the parent's column tracks for its own children. This makes it possible to achieve column alignment across nested components without hacks.

Subgrid is supported in all modern browsers as of 2023. Use it when you have card grids where label, value, and footer rows inside each card need to align with the same rows in adjacent cards. You can apply subgrid to one axis or both: grid-template-columns: subgrid inherits only columns, while adding grid-template-rows: subgrid inherits both axes. A child must span at least 2 tracks on an axis to use subgrid on that axis.

Flexbox: flex-direction

flex-direction sets the main axis of the flex container. row (default) lays items out horizontally left to right. column stacks them vertically top to bottom. row-reverse and column-reverse flip the item order. Changing flex-direction also changes which axis justify-content and align-items operate on, because those properties always refer to "main" and "cross" axes relative to the direction.

Flexbox: flex-wrap

By default, flex items are forced onto a single line (nowrap). Setting flex-wrap: wrap allows items to flow onto multiple lines when they run out of space. This is essential for responsive card layouts. wrap-reverse wraps items in the opposite direction: new lines are added above (in row direction) or to the left (in column direction).

Flexbox: justify-content vs align-items

justify-content controls distribution along the main axis (the direction of flex-direction). align-items controls alignment on the cross axis, perpendicular to it. If flex-direction: row, then justify-content moves items left and right and align-items moves them up and down.

To center an element both horizontally and vertically with Flexbox: display: flex; justify-content: center; align-items: center. This is the most common Flexbox pattern and works for any size container or child.

space-between puts equal space between items with no space on the edges. space-around adds half-size space on the edges. space-evenly distributes identical space between items and on both edges. Each value produces a distinctly different visual result. Use the preview panel to see the difference instantly.

Flexbox: align-content

align-content only takes effect when flex-wrap: wrap is set and items wrap onto multiple lines. It controls how the lines themselves are distributed on the cross axis. Think of it as justify-content but for the wrapped lines instead of the individual items. It has no effect on a single-line flex container.

The flex Shorthand

The flex shorthand sets three properties at once: flex-grow, flex-shrink, and flex-basis. The default is flex: 0 1 auto, meaning items do not grow, they can shrink, and their natural size is their starting point. flex: 1 is shorthand for flex: 1 1 0: items grow and shrink equally, ignoring natural size. This is the "equal columns" pattern.

flex-grow, flex-shrink, and flex-basis

flex-grow controls how much an item expands when there is extra space. A value of 0 means the item does not grow. A value of 1 means it grows proportionally with other items. If one item has flex-grow: 2 and another has flex-grow: 1, the first gets twice as much extra space.

flex-shrink controls how much an item shrinks when there is not enough space. The default of 1 means all items shrink equally. Setting flex-shrink: 0 prevents an item from shrinking, which is useful for fixed-width sidebars or icons.

flex-basis sets the starting size of an item before grow or shrink apply. auto means "use the element's width or content size." 0 means "start from nothing and let flex-grow determine the final size." You can also use any CSS length: 200px, 30%, 15rem.

align-self and order

align-self overrides the container's align-items value for a single item. If the container sets align-items: stretch but one item should be centered, use align-self: center on that item. The order property changes the visual order of flex items without changing the HTML source order. Items are arranged by ascending order value: lower numbers appear first.

Can You Use Grid and Flexbox Together?

Yes, and you often should. A page-level layout is typically Grid: header, sidebar, main, and footer in defined tracks. Within a grid cell, you might use Flexbox to arrange the contents of a navigation bar. The two systems are completely independent per element: being a grid item does not affect whether you can be a flex container for your own children.

Responsive Layouts Without Media Queries

Modern CSS layout is capable of fluid responsiveness without a single media query. Grid's repeat(auto-fill, minmax(250px, 1fr)) creates a column count that adapts to the viewport. Flexbox's flex-wrap: wrap combined with flex-basis percentages achieves similar results. The clamp() function works for track sizes: clamp(200px, 30vw, 400px) gives you a track that scales between a minimum and maximum. These techniques reduce CSS complexity and eliminate the need for breakpoint-specific layout rules.

Browser Support

CSS Grid (including grid-template-areas, repeat(), minmax(), auto-fill, auto-fit) is supported in all modern browsers: Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+. CSS Subgrid landed in Chrome 117, Firefox 71, Safari 16, and Edge 117. Flexbox has universal support across all modern browsers. The gap property in Flexbox is supported in Chrome 84+, Firefox 63+, Safari 14.1+, and Edge 84+.

Common Layout Patterns

Holy Grail layout: header, footer, main content, and two sidebars. Use Grid with named areas: "header header header" "nav main aside" "footer footer footer".

Card grid: display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem creates a responsive card grid with no media queries.

Sticky footer: grid-template-rows: auto 1fr auto on a full-height container pushes the footer to the bottom even when content is short.

Centered content: display: flex; justify-content: center; align-items: center; min-height: 100vh centers any element on the page.

Sidebar layout: grid-template-columns: 250px 1fr creates a fixed sidebar with a fluid main area. Use minmax(200px, 250px) on the sidebar for a slightly flexible version.