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

Sivupalkki + sisällön CSS-ruudukkoasettelu

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 kahdessa sarakkeessa, yksirivisessä asettelussa, joka on jo nimetty: 200 kuvapisteen sivupalkkisarake joustavan sisältösarakkeen vieressä, joka vie jäljellä olevan tilan. Molemmat alueet näkyvät live-esikatselussa välittömästi, värillisinä ja merkittyinä, joten jako on ilmeinen yhdellä silmäyksellä.

Tämä on yleisin navigointi- ja sisältömuoto verkossa – asetussivut, dokumentaatiosivustot ja järjestelmänvalvojan hallintapaneelit nojaavat kiinteäleveälle kiskolle sujuvan pääalueen vieressä. Koska sivupalkin sarake käyttää pikseliarvoa ja sisältösarake 1fr, sivupalkki pysyy vakiona, kun taas sisältösarake absorboi näkymän jokaisen ylimääräisen pikselin.

Nimeä jompikumpi alue uudelleen, muuta sarakkeen leveyttä tai lisää rivejä jaon yläpuolelle otsikkoon – alla oleva CSS- ja HTML-tuloste seuraa jokaista muokkausta reaaliajassa. Työkalu on ilmainen ja toimii edelleen kokonaan selaimessasi ilman latausta tai tiliä.

🛡️
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.