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 ଜେନେରେଟରଗୁଡ଼ିକ ସମ୍ପୁର୍ଣ୍ଣ ଭାବରେ ଆପଣଙ୍କ ବ୍ରାଉଜରରେ ଚାଲିଥାଏ | ପୂର୍ବାବଲୋକନ ଏବଂ ରୂପାନ୍ତରଗୁଡ଼ିକ କେବେବି ଆପଣଙ୍କର ଶ yles ଳୀ ଅପଲୋଡ୍ କରେ ନାହିଁ |

Common use cases

ଯେତେବେଳେ ଆପଣ ଆବଶ୍ୟକ କରନ୍ତି CSS ଗ୍ରୀଡ୍ ଜେନେରେଟର ବ୍ୟବହାର କରନ୍ତୁ: ସ୍ତମ୍ଭ, ଧାଡି, ଏବଂ ଫାଙ୍କକୁ ଭିଜୁଆଲ୍ ଭାବରେ ବ୍ୟାଖ୍ୟା କରନ୍ତୁ, ତାପରେ CSS ଗ୍ରୀଡ୍ ଟେମ୍ପଲେଟ୍ କୋଡ୍ କପି କରନ୍ତୁ |

Troubleshooting

ପେଷ୍ଟ ପରେ ପୂର୍ବାବଲୋକନ ଭିନ୍ନ ଦେଖାଯାଏ |

ଆପଣଙ୍କ ପୃଷ୍ଠାରେ ପ୍ରତିଯୋଗୀ CSS ଯାଞ୍ଚ କରନ୍ତୁ (ପୁନ ets ସେଟ୍, ଉତ୍ତରାଧିକାରୀ ରଙ୍ଗ) | ସୃଷ୍ଟି ହୋଇଥିବା ନିୟମକୁ ପ୍ରଥମେ ଏକ ପୃଥକ ଶ yles ଳୀରେ କପି କରନ୍ତୁ |

FAQ

ଏହା ମୋର CSS ଅପଲୋଡ୍ କରେ କି?

ନା। ଜେନେରେଟର ଏବଂ କନଭର୍ଟରଗୁଡ଼ିକ ଲାଇଭ ପ୍ରିଭ୍ୟୁ ସହିତ ଆପଣଙ୍କ ବ୍ରାଉଜରରେ ଚାଲିଥାଏ |

ମୋର ଏକ ଖାତା ଦରକାର କି?

ନା। ଟୁଲ୍ ଖୋଲ, ନିୟନ୍ତ୍ରଣକୁ ଟ୍ୱିକ୍ କର ଏବଂ CSS କୁ କପି କର |