العربية

Grid and Flex layout builder

Generate a bounded CSS layout, a numbered-child preview and a downloadable static HTML example.

Numbers: 0–9, ٠–٩ or ۰–۹, with a decimal point or ٫. No exponents or grouping separators. Local processing without uploads or automatic storage. Output up to 16 KiB.

1–24 numbered children, gap 0–200px and 1–12 grid columns. Alignment controls the cross axis in Flex; distribution controls its main axis. Flexible grid columns fill the width, so space distribution may have no visible effect. Preview and example explicitly use LTR; no HTML or CSS imports.

How to use

Choose Grid or Flex and set child count and gap. Set columns for Grid, or direction and wrapping for Flex. Choose alignment and distribution, then generate. Download CSS alone or the static HTML example containing it.

Try an example

Grid with 6 children, 3 columns and gap 16 gives two rows of three; columns use repeat(3, minmax(0, 1fr)). The HTML example contains children numbered 1 through 6.

Support & limits

Preview and example explicitly use direction: ltr regardless of interface language. In Flex, align-items controls the cross axis and justify-content the main axis. Flexible Grid columns fill the width, so distribution may have no visible effect. Children have 8px padding and 40px minimum height; the file sets no fixed container width or height. Large gaps or nowrap can overflow a narrow container; the scrollable preview is not a complete responsive design. Generated HTML contains no scripts or external resources.

Common questions

Can I paste an existing page to edit it?

No. Rules and elements are generated only from bounded settings. Copy and the primary download provide CSS; the HTML button provides a static standalone example.

Related tools

CSS gradient generator

Create a linear or circular radial gradient from explicit colors and positions, with a preview and CSS download.

CSS shadow generator

Compose inset or outer box-shadow layers with a preview and CSS you can copy or download.

PX and REM converter

Convert between PX and REM in both directions using an explicit root font size and rounding policy.