Generator CSS Grid

Atur kolom lan baris panjenengan, seret nglangkungi sel kangge masang item, lan salin CSS grid sarta HTML kanthi saklik.

Setelan
Item
CSS
HTML
Seret nglangkungi grid kangge masang item.

Grid panjenengan dipunproses langsung wonten ing browser. Boten wonten data ingkang dipununggah dhateng BroBroGo.

FAQ

Kadospundi caranipun masang item wonten ing grid?

Pencet lan seret nglangkungi sel-sel kangge nggambar kothak pasagi — nalika dipunculaken, punika badhe dados item ingkang manggen wonten ing kolom lan baris kasebat. Saben item badhe pikantuk aturan grid-column lan grid-row piyambak ing CSS sarta div ing HTML.

Menapa ukuran kolom lan baris saged benten-benten?

Saged. Saben track gadhah kothak ukuran piyambak, lan panjenengan saged nyerat nilai grid menapa kemawon wonten ing mriku — 1fr, 200px, auto, min-content, utawi minmax(120px, 1fr). Track ingkang gadhah ukuran sami badhe dipunringkes ngginakaken repeat().

Menapa ingkang kedah kula lampahi kaliyan kode ingkang dipunasilaken?

Salin CSS lan HTML kanthi bebarengan. HTML nyediyakaken wadhah (container) kanthi satunggal div saben item, lan CSS nemtokaken grid sarta posisi saben item. Pasang kalih kode kasebat wonten ing proyek panjenengan.

Ditulis lan ditinjau dening tim editorial BroBroGo.Pungkasan dipunanyari:

Pangerten Babagan Generator CSS Grid

Generator CSS Grid minangka piranti visual ingkang nggampilaken panjenengan nalika ngrancang tata letak CSS grid. Piranti punika saged dipunginakaken kangge nemtokaken gunggung kolom sarta baris, ngatur ukuran saben track, lan nemtokaken let utawi gap ing antawisipun. Panjenengan ugi saged nggeser utawi nyeret mouse wonten ing sanginggiling kothak grid kangge masang item kanthi langsung. Sasampunipun tata letak rampung dipunrancang, piranti punika badhe ngasilaken kode CSS lan HTML kanthi otomatis ingkang saged dipunsalin lan dipuntempel wonten ing proyek panjenengan.

Piranti punika cocog sanget kangge sinten kemawon ingkang mbetahaken prototipe tata letak CSS grid kanthi cepet, utawi ingkang mbetahaken kode CSS lan HTML tanpa kedah nyerat kanthi manual. Generator punika ugi mbantu panjenengan visualisasi kadospundi pengaruh saking ukuran kolom lan baris ingkang benten-benten dhateng tata letak, sarta nggampilaken pandamelan struktur umum kados dene sidebar, header/footer, galeri, utawi dashboard.

Ngatur Kolom, Baris, lan Gap

Kangge miwiti ngrancang tata letak, panjenengan saged ngatur sawetara input dhasar ingkang kasedhiya wonten ing antarmuka:

  • Kolom: Panjenengan saged nemtokaken gunggung kolom kanthi nilai antawisipun 1 ngantos 12.
  • Baris (Rows): Gunggung baris ugi saged dipunatur antawisipun 1 ngantos 12.
  • Gap kolom: Jarak utawi let ing antawisipun kolom saged dipunatur wiwit saking 0 ngantos 48px.
  • Gap baris (Row gap): Jarak ing antawisipun baris saged dipunatur wiwit saking 0 ngantos 48px.

Saben gap kolom lan gap baris saged dipunatur piyambak-piyambak kanthi independen. Nanging, wonten ing kode CSS ingkang dipunasilaken, kalih properti kasebat badhe dipunringkes dados satunggal properti gap kemawon menawi nilai kekalihipun sami.

Nemtokaken Ukuran Kolom lan Baris

Saben track, sae punika kolom utawi baris, gadhah kothak ukuran piyambak ingkang saged dipunisi kanthi manual. Panjenengan saged nyerat nilai CSS grid ingkang valid wonten ing kothak kasebat, kados dene:

  • 1fr (fractional unit)
  • 200px
  • auto
  • min-content
  • minmax(120px, 1fr)

Menawi panjenengan nyerat nilai ingkang boten valid (tuladhanipun not-a-grid-track) wonten ing kothak ukuran track, kothak input kasebat badhe dipuntandhani minangka input ingkang boten valid. Sanajan mekaten, output CSS ingkang dipunasilaken badhe tetep ngginakaken nilai valid pungkasan ingkang dipunrekam sadurungipun.

Kangge ngasilaken kode ingkang luwih ringkes, track-track ingkang gadhah ukuran ingkang sami badhe dipunringkes ngginakaken fungsi repeat() wonten ing output CSS.

Cara Masang lan Ngatur Item

Sasampunipun nemtokaken gunggung lan ukuran track, panjenengan saged masang item kanthi cara nyeret (drag) mouse nglangkungi sel-sel grid kangge nggambar area pasagi. Nalika tombol mouse dipunculaken, satunggal item enggal badhe dipundamel lan manggen wonten ing area kolom sarta baris ingkang dipunpilih kasebat.

Aturan lan fitur ingkang magepokan kaliyan pangaturan item punika antawisipun:

  • Aturan CSS lan HTML: Saben item ingkang dipunpasang badhe pikantuk aturan grid-column lan grid-row piyambak wonten ing CSS, sarta satunggal elemen div ingkang cocog wonten ing HTML.
  • Item Tumpang Tindih: Item saged dipunpasang tumpang tindih (overlap). Item ingkang dipungambar langkung pungkasan badhe mapan wonten ing sanginggiling item ingkang dipungambar rumiyin.
  • Mbusak Item: Panjenengan saged mbusak item kanthi ngeklik tenger "×" ingkang wonten ing item kasebat.
  • Watesan Item: Generator punika saged nampung maksimal ngantos 16 item.
  • Tambah Item: Tombol "Tambah item" saged dipunginakaken kangge ngasilaken item HTML.
  • Resiki Item: Menawi panjenengan ngeklik "Resiki item", kabeh item badhe dipunhapus saengga wadhah HTML dados kothong lan gunggung item dados 0.

Ngginakaken Setelan

Kangge nggampilaken lan nyepetaken pakaryan, Generator CSS Grid nyediyakaken sawetara pilihan "Setelan" (presets) tata letak ingkang umum dipunginakaken:

  • Sidebar: Setelan kangge tata letak mawi kolom sisih.
  • Header & footer: Setelan tata letak mawi bagean ndhuwur lan ngisor.
  • Dashboard: Setelan kangge struktur panel informasi utawi dashboard.
  • Galeri: Setelan khusus ingkang kanthi otomatis ngasilaken 3 kolom, 2 baris, lan 3 item.

Output Kode lan Keamanan Data

Generator CSS Grid ngasilaken kalih jinis output ingkang saged langsung dipunsalin:

  1. CSS: Kode CSS kangge wadhah grid (grid container) sarta aturan posisi kangge saben item ingkang dipunpasang.
  2. HTML: Kode HTML ingkang awujud wadhah (container) lan elemen-elemen div ingkang dados wakil saking saben item.

Babagan keamanan data, panjenengan boten kedah sumelang. Grid panjenengan dipunproses langsung wonten ing browser panjenengan piyambak. Boten wonten data utawi konfigurasi ingkang panjenengan atur wonten ing piranti punika ingkang dipununggah dhateng BroBroGo.

Pitakonan ingkang Asring Dipunajengaken (FAQ)

Kadospundi caranipun masang item wonten ing grid? Pencet lan seret nglangkungi sel-sel kangge nggambar kothak pasagi — nalika dipunculaken, punika badhe dados item ingkang manggen wonten ing kolom lan baris kasebat. Saben item badhe pikantuk aturan grid-column lan grid-row piyambak ing CSS sarta div ing HTML.

Menapa ukuran kolom lan baris saged benten-benten? Saged. Saben track gadhah kothak ukuran piyambak, lan panjenengan saged nyerat nilai grid menapa kemawon wonten ing mriku — 1fr, 200px, auto, min-content, utawi minmax(120px, 1fr). Track ingkang gadhah ukuran sami badhe dipunringkes ngginakaken repeat().

Menapa ingkang kedah kula lampahi kaliyan kode ingkang dipunasilaken? Salin CSS lan HTML kanthi bebarengan. HTML nyediyakaken wadhah (container) kanthi satunggal div saben item, lan CSS nemtokaken grid sarta posisi saben item. Pasang kalih kode kasebat wonten ing proyek panjenengan.

Generator CSS Cubic BezierSeret kalih gagang kangge ngatur kurva easing, pirsani gerakan titik dibandhingake karo kacepetan konstan, lan salin nilai cubic-bezier().Generator FlexboxAtur wadhah flex lan item-itemipun kanthi kontrol visual, pirsani owah-owahanipun kanthi langsung, lan salin CSS kanthi saklik.Generator Box ShadowSeret slider kangge ngatur box-shadow, tumpuk lapisan kangge efek jero, lan salin CSS kanthi cepet.Generator GradienDamel gradien linear, radial, utawi conic, tambahaken color stops lan atur arahnipun, banjur salin CSS kanthi saklik.Generator Border RadiusNgbunderaken saben pojokan kanthi slider, damel wujud blob organik mawi mode elips, lan salin CSS kanthi cepet.Kalkulator CSS clamp()Lebaken ukuran kangge layar alit lan ageng, banjur pikantuk nilai clamp() fluid ingkang saged gantos kanthi alus — kangge ukuran font, padding, margin, utawi gap.