Toolipedia- Free
- No sign-up
- Works on any device
No tool matches your search.
- Free
- No sign-up
- Works on any device
Create a QR code for a link, Wi-Fi, WhatsApp, contact and more, or read one from a photo.
- Free
- No sign-up
- Works on any device
Fill in the details to see your QR code.
PNG for phones, chats and websites. SVG and PDF stay sharp at any size, which is best for printing. Tip: point your phone camera at the preview to test it.
3. Style (optional): colors, dots, logo
Choose a photo or screenshot or drag it here
Works with photos of printed codes, screenshots and image files.
Looking for QR codes…
CSS grid generator
Build a grid layout with columns, rows and gaps, with a live preview.
- Free
- No sign-up
- Works on any device
About CSS grid generator
Set the number of columns and rows, gap size and track sizes in fr, px or auto units, and watch the grid update live before copying the CSS. The fr unit shares the free space proportionally, so 1fr 2fr gives a second column twice as wide as the first.
How to use CSS grid generator
- Set the number of columns and rows for your grid.
- Adjust column and row sizes and the gap between cells.
- Copy the CSS grid code and paste it into your stylesheet.
Why use this tool?
- Private: everything happens in your browser. Nothing you enter is uploaded.
- Free, with no sign-up, no watermark and no limit on how often you use it.
- Works on phones, tablets and computers: Android, iPhone, Windows, Mac and Linux. Nothing to install.
- Free to embed on your own website, with a ready-made code to copy.
- Available in 10 languages.
Also known as
Frequently asked questions
What does the fr unit mean in CSS Grid?
One fr is a fraction of the leftover space in the grid container. With columns of 1fr 1fr 2fr, space is split into four parts, giving the last column two.
How do I make a grid responsive?
Use flexible sizes such as fr units or minmax instead of fixed pixels, and change the column count in a media query for small screens.
What is the difference between gap and margin in a grid?
Gap adds space only between cells, not around the outside edge. Margins add space around each item and can double up between neighbours.
Is CSS grid generator free?
Yes. CSS grid generator on Toolipedia is free to use, with no sign-up and no watermark.
Is it safe to use?
Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.
Does it work on my phone?
Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.
Do I need an account?
No. Just open the page and use the tool. There's no sign-up and no email needed.
Can I put CSS grid generator on my own website?
Yes. Use the Embed on your site button under the tool to copy a short piece of code and paste it into your page. It is free, needs no account, and the tool keeps working inside your page.