🔧 NavajaSuiza

CSS Grid Generator

Generate CSS grid layouts with visual preview

tools.gridGenerator.title

tools.gridGenerator.description

tools.gridGenerator.configuration

tools.gridGenerator.preview

1
2
3
4
5
6
7
8
9

tools.gridGenerator.cssCode

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 16px;
justify-content: stretch;
align-content: stretch;

Jenereta ya Gridi huunda mipangilio kamili ya Gridi ya CSS kwa miradi ya usanifu wa wavuti kwa ubinafsishaji wa kuona. Bainisha safu wima, safu mlalo, mapengo na upangaji kwa onyesho la kukagua moja kwa moja. Ni kamili kwa wasanidi programu, wabunifu na wajenzi wa wavuti ambao wanataka kutekeleza mipangilio ya gridi ya taifa haraka. Nakili msimbo wa CSS ulio tayari kwa uzalishaji papo hapo.

Key Features

Kijenzi cha mpangilio wa gridi inayoonekana

Safu wima na safu mlalo zinazoweza kubinafsishwa

Nafasi inayoweza kurekebishwa ya pengo

Chaguzi za upatanishi

Mipangilio ya awali ya violezo

Usanidi wa sehemu ya kujibu

Onyesho la kuchungulia la CSS la wakati halisi

Nakili msimbo papo hapo

Violezo vya kuitikia kwa rununu

Kiolesura cha kuvuta na kudondosha

Jenereta ya Gridi

1

Bainisha Safu

Weka idadi ya safu wima na saizi zake (pikseli zisizohamishika, sehemu, au otomatiki).

2

Weka Urefu wa Safu

Sanidi urefu wa safu mlalo na ukubwa wa safu mlalo kiotomatiki kwa miundo inayoweza kunyumbulika.

3

Ongeza Mapungufu

Bainisha nafasi kati ya vipengee vya gridi kwa usawa na wima.

4

Chagua Alignment

Chagua chaguo za upatanishi na uhalalishaji kwa vipengee vya gridi yako.

5

Nakili CSS

Nakili msimbo wa Gridi ya CSS uliotengenezwa tayari kwa matumizi katika miradi yako.

Use Cases

Unda mipangilio ya ukurasa inayoitikia

Sanifu gridi za dashibodi

Jenga mpangilio wa matunzio ya picha

Unda gridi za kuorodhesha bidhaa

Sanifu mipangilio inayotegemea kadi

Unda maudhui ya safu wima nyingi

Unda mipangilio ya mtindo wa uashi

Jenga gridi za kwingineko

Mipangilio ya fomu ya kubuni

Unda violezo vinavyoitikia

Frequently Asked Questions

Je! Gridi ya CSS ina msaada gani wa kivinjari?

Gridi ya CSS inatumika katika vivinjari vyote vya kisasa. Vivinjari vya zamani kama vile IE11 vina usaidizi mdogo na vinaweza kuhitaji njia mbadala.

Je, ninawezaje kufanya gridi yangu kuitikia?

Tumia hoja za midia kurekebisha mipangilio ya safu wima na safu mlalo katika sehemu tofauti tofauti za miundo inayojibu.

Je, ninaweza kuchanganya Gridi ya CSS na Flexbox?

Ndiyo, unaweza kutumia Gridi ya CSS kwa mpangilio wa jumla na Flexbox kwa kupanga vipengee vya gridi ya mtu binafsi.

Tool Information

Category
Palette Design and Color Tools
Type
Processed in browser
Tags

📤 Share This Tool

CSS Grid Generator - Gratis Online | NavajaSuiza Digital