CSS கிரிட் ஜெனரேட்டர்

நெடுவரிசைகள், வரிசைகள் மற்றும் இடைவெளிகளை பார்வைக்கு வரையறுத்து, பின்னர் உங்கள் தளவமைப்பிற்கான CSS கிரிட் டெம்ப்ளேட் குறியீட்டை நகலெடுக்கவும்.

CSS Grid Generator

Live

Columns3

Rows3

Gap12px

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

நெடுவரிசைகள், வரிசைகள் மற்றும் இடைவெளிகளை பார்வைக்கு வரையறுத்து, பின்னர் CSS கிரிட் டெம்ப்ளேட் குறியீட்டை நகலெடுக்கவும்.
உங்கள் உலாவியில் இயங்கும்
பயன்படுத்த இலவசம்

எப்படி பயன்படுத்துவது

நெடுவரிசை மற்றும் வரிசை எண்ணிக்கையை அமைக்கவும்.
டியூன் இடைவெளி மற்றும் டிராக் அளவை.
CSS கட்டத்தை நகலெடுக்கவும்.

How this tool works

நெடுவரிசை மற்றும் வரிசை எண்ணிக்கையை அமைக்கவும்.
டியூன் இடைவெளி மற்றும் டிராக் அளவை.
CSS கட்டத்தை நகலெடுக்கவும்.

Recommended settings

முதலில் இயல்புநிலை விருப்பங்களைப் பயன்படுத்தவும், பின்னர் தேவைப்பட்டால் சரிசெய்யவும்

Supported formats

Text / on-page input

File size and limits

மிகவும் சிக்கலான பல அடுக்கு மாதிரிக்காட்சிகள் பழைய தொலைபேசிகளில் மெதுவாக உணரலாம்.

Privacy

கலர் & CSS ஜெனரேட்டர்கள் உங்கள் உலாவியில் முழுமையாக இயங்கும். முன்னோட்டங்களும் மாற்றங்களும் உங்கள் பாணிகளை ஒருபோதும் பதிவேற்றாது.

Common use cases

உங்களுக்குத் தேவைப்படும்போது CSS கிரிட் ஜெனரேட்டரைப் பயன்படுத்தவும்: நெடுவரிசைகள், வரிசைகள் மற்றும் இடைவெளிகளை பார்வைக்கு வரையறுத்து, பின்னர் CSS கிரிட் டெம்ப்ளேட் குறியீட்டை நகலெடுக்கவும்.

Troubleshooting

ஒட்டப்பட்ட பிறகு முன்னோட்டம் வித்தியாசமாகத் தெரிகிறது

உங்கள் பக்கத்தில் போட்டியிடும் CSS ஐச் சரிபார்க்கவும் (மீட்டமைப்புகள், மரபுரிமை நிறங்கள்). உருவாக்கப்பட்ட விதியை முதலில் தனிமைப்படுத்தப்பட்ட நடைதாளில் நகலெடுக்கவும்.

அடிக்கடி கேட்கப்படும் கேள்விகள்

இது எனது CSS ஐ பதிவேற்றுகிறதா?

இல்லை. ஜெனரேட்டர்கள் மற்றும் மாற்றிகள் உங்கள் உலாவியில் நேரடி முன்னோட்டத்துடன் இயங்கும்.

எனக்கு கணக்கு தேவையா?

இல்லை. கருவியைத் திறந்து, கட்டுப்பாடுகளை மாற்றி, CSSஐ நகலெடுக்கவும்.