Design
Image aspect ratio fitter
Fit an image into a new aspect ratio without cropping, using colored padding. Download a PNG.
Use tool
Design · Free
CSS Grid generator
Turn column, row and gap values into a live grid preview and ready-to-use CSS.
01Enter your values
Runs in your browser02CSS Grid generator
Runs in your browser
How it works
Turn column, row and gap values into a live grid preview and ready-to-use CSS.
Runs in your browser
Your data stays yours
Inputs are processed on this page and are never sent to a server.
About this tool
Use tool ↑Turn column, row and gap values into a live grid preview and ready-to-use CSS.
Build an equal-column CSS Grid; copy the code and adapt it to your page.
How to use it
- Enter your values
Columns · Rows · Gap
- Calculate / generate
Turn column, row and gap values into a live grid preview and ready-to-use CSS.
- Result
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;
Calculation method
Build an equal-column CSS Grid; copy the code and adapt it to your page.
CSS Grid generator
- Columns
- 3
- Rows
- 2
- Gap
- 16 px
Result
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;
Frequently asked questions
How should I interpret the result?
Build an equal-column CSS Grid; copy the code and adapt it to your page.
Where does my data go?
Calculations run on your device. Form inputs are not sent to a server.