⭐ 0
🔍
Teksti Kuva PDF & Docs Ääni Musiikki Elektroniikka Aika Apuohjelmat Validaattorit Esoteerinen Pelit

Holy Grail CSS Grid Layout — Valmis koodi

Suunnittele CSS-ruudukkoasettelut visuaalisesti: aseta sarakkeita, rivejä ja aukkoja ja kirjoita sitten alueiden nimet soluihin luodaksesi ruudukkomallialueita – live-esikatselun ja kopioitavan CSS:n ja HTML:n avulla.

Kirjoita nimi mihin tahansa alla olevaan soluun; samannimiset solut sulautuvat yhdeksi grid-template-aluealueeksi.

Käsitellään... 0%

Tulos

Tämä sivu avaa ruudukkogeneraattorin, joka on esiladattu Pyhän Graalin asettelulla: kolme saraketta ja kolme riviä, joissa ylä- ja alatunniste kattaa koko leveyden ja välissä on navigointi-/pää-/sivurivi. Otsikkorivi käyttää automaattista korkeutta, keskirivi täyttää jäljellä olevan tilan, ja kaksi sivusaraketta on kiinteästi 200 pikseliä, kun taas pääsarake ottaa loput.

Graalin asettelu ansaitsi nimensä, koska sitä oli todella vaikea rakentaa luotettavasti ennen CSS Gridiä – vuosien float-hakkerointi, pöytäasettelu ja absoluuttinen sijoittelu yrittivät väärentää tämän tarkan muodon. Grid-template-alueilla se kutistuu viiteen nimettyyn alueeseen ja kouralliseen raitakokoon, minkä vuoksi se on edelleen vakioesimerkki CSS-ruudukon opettamisessa.

Jokainen tämän sivun numero ja aukko on edelleen voimassa: pienennä sivusarakkeita, lisää neljäs rivi tai nimeä alue uudelleen ja esikatselu ja kopioitava CSS-päivitys välittömästi. Kopioi CSS- ja HTML-lohkot suoraan projektiisi – kaikki toimii paikallisesti selaimessasi, mitään ei ladata.

🛡️
Suoritetaan selaimessa

Tiedostosi ja syötteesi eivät koskaan poistu tältä laitteelta. Käsittely toimii täysin offline-tilassa. 100 % turvallinen.

Hyväksytyt muodot ja säännöt

  • Numerosyöttö 1–6 sarakkeelle ja riville sekä erilliset sarakevälin ja rivivälin säätimet, jotka yhdistyvät yhdeksi väliarvoksi, kun ne vastaavat.
  • Nimettyjen alueiden tila: kirjoita alueen nimi suoraan live-ruudukon mihin tahansa soluun; työkalu rakentaa kelvollisen grid-template-areas merkkijonon ja varoittaa, jos nimet eivät muodosta puhtaita suorakulmioita.
  • Kopioitavissa oleva CSS-lohko (näyttö: grid, grid-template-columns/rows, gap, grid-template-areas) sekä vastaava HTML-runko, jossa on yksi grid-area-div per nimetty alue.

Tärkeimmät edut

✓ Kirjoita nimi suoraan mihin tahansa soluun ja vastaavat nimet sulautuvat yhdeksi ruudukkomallialuealueeksi – ei vedä valintaa, ei lainausmerkkijonosyntaksin käsin arvaamista.
✓ Reaaliaikainen esikatseluruudukko muuttaa kokoa ja värittyy uudelleen jokaisen muutoksen yhteydessä, joten näet tarkat sarakkeiden ja rivien jäljet sekä kaikki nimetyt alueet ennen kuin kopioit yhden CSS-rivin.
✓ Esiasetukset, kuten klassinen Graal-asettelu ja kapea sivupalkki, antavat sinulle todellisen, toimivan ruudukkomalli-aluemäärityksen tyhjän ruudukon sijaan.

Käyttötapaukset

  • • Rakenna klassinen Holy Grail -sivun kuori – täysleveä ylä- ja alatunniste navigointi-/pää-/sivurivillä – kirjoittamalla alueiden nimet käsin kirjoittamalla ruudukko-mallialueet.
  • • Aseta asetussivu tai järjestelmänvalvojan hallintapaneeli kiinteäleveisellä sivupalkilla joustavan sisältösarakkeen viereen ja kopioi tarkka CSS ja HTML, kun live-esikatselu näyttää oikealta.
  • • Tarkista ennen toimitusta, että nimettyjen alueiden joukko todella muodostaa kelvollisia suorakulmioita – työkalu merkitsee tarkat nimet, jotka rikkoisivat selaimen ruudukkomalli-alueet.