Color format converter
Convert HEX, RGB and HSL colors with alpha transparency, preview the swatch and copy ready-to-use CSS color values.
CSS Grid layout generator
Build a grid visually with fixed or responsive columns, adjust gaps and alignment, and copy matching CSS and HTML.
About this tool
Try a card grid at different preview widths before copying the layout into your page.
How to use
Choose a fixed column count or automatic fitting with a minimum column width. Adjust rows, gaps, alignment and item count while watching the actual grid. Change the preview width to check narrower layouts, then copy or download CSS and HTML separately.
The width slider changes only the preview container. Fixed grids support 1–12 rows and columns; gaps are 0–80 px and the preview has up to 48 items. Generated code describes the layout and basic item sizing, so add your own content and visual styles.
Common questions
How do I make the column count responsive?
Choose automatic fitting and set a minimum column width. The exported grid uses auto-fit and minmax; the preview-width slider itself is not exported.
Why do more rows appear than the row count I selected?
The row setting defines explicit tracks, not a maximum item count. A fixed grid with 3 columns and 2 rows has 6 initial cells; a seventh item creates an implicit row. Reduce the item count if you want the preview to contain exactly those six cells.
Related tools
Opens in a new tab
Comments
0