⭐ 0
🔍
Tekst Slika PDF i dokumenti Audio Glazba Elektronika Vrijeme Komunalije Validatori Ezoterija Igre

3 jednaka stupca CSS raspored mreže

Vizualno dizajnirajte CSS Grid rasporede: postavite stupce, retke i razmake, a zatim upišite nazive područja u ćelije kako biste izgradili područja predložaka mreže — uz live pregled i CSS i HTML koji se mogu kopirati.

Upišite naziv u bilo koju ćeliju ispod; ćelije s istim imenom spajaju se u jednu regiju područja predloška mreže.

Obrada... 0%

Rezultat

Ova stranica otvara generator rešetke postavljen na tri stupca jednake širine u jednom retku, s isključenim imenovanim područjima — izgled je samo repeat(3, 1fr), što je najkraći način da se kaže "tri stupca koja uvijek ravnomjerno dijele dostupnu širinu."

Stupci jednake širine su radni konj rešetki kartica, tablica s cijenama i galerija slika: nijednom području nije potrebno imenovanje jer svaki stupac ima istu ulogu, tako da je jednostavno određivanje veličine staze jasnije nego što bi bila deklaracija područja predloška mreže. Dodajte red i iste tri pjesme ponavljaju se ispod, i dalje savršeno ravnomjerno.

Povećajte broj stupaca za gušću rešetku ili uključite imenovana područja ako se kasniji stupac treba istaknuti od ostalih — CSS i HTML u nastavku ažuriraju se čim to učinite. Sve radi na strani klijenta, tako da se nema što prenijeti i čekati.

🛡️
Izvršeno u pregledniku

Vaše datoteke i unosi nikada ne napuštaju ovaj uređaj. Obrada se odvija potpuno offline. 100% siguran.

Prihvaćeni formati i pravila

  • Unosi brojeva za 1–6 stupaca i redaka, plus zasebne kontrole razmaka u stupcu i retka koje se kombiniraju u jednu vrijednost razmaka kada se podudaraju.
  • Način rada s imenovanim područjima: upišite naziv područja izravno u bilo koju ćeliju mreže uživo; alat gradi važeći niz grid-template-areas i upozorava kada imena ne tvore čiste pravokutnike.
  • CSS blok koji se može kopirati (prikaz: rešetka, rešetka-predložak-stupaca/redova, praznina, područja-predloška mreže) plus odgovarajući HTML kostur s jednim divom područja rešetke po imenovanom području.

Ključne prednosti

✓ Upišite naziv ravno u bilo koju ćeliju i odgovarajući nazivi spojit će se u jednu regiju područja predloška rešetke — bez odabira povlačenjem, bez ručnog pogađanja sintakse niza navodnika.
✓ Mreža pregleda uživo mijenja veličinu i boju pri svakoj promjeni, tako da vidite točne tragove stupca i retka i svaku imenovanu regiju prije kopiranja jednog retka CSS-a.
✓ Unaprijed postavljene postavke poput klasičnog rasporeda svetog grala i uske bočne trake daju vam stvarnu, radnu deklaraciju područja predloška mreže za početak umjesto prazne mreže.

Slučajevi upotrebe

  • • Izgradite klasičnu ljusku stranice svetog grala — zaglavlje i podnožje pune širine s navigacijskim/glavnim/postranim srednjim redom — upisivanjem naziva područja umjesto rukom ispisanog grid-template-areas.
  • • Postavite stranicu s postavkama ili administratorsku nadzornu ploču s bočnom trakom fiksne širine pored fleksibilnog stupca sadržaja i kopirajte točan CSS i HTML kada pregled uživo bude izgledao kako treba.
  • • Prije slanja provjerite da li skup imenovanih područja stvarno tvori valjane pravokutnike — alat označava točna imena koja bi razbila područja predloška mreže u pregledniku.