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

3 yhtäläistä saraketta 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 ruudukon generaattorin, joka on asetettu kolmeen samanleveiseen sarakkeeseen yhdelle riville ja nimetyt alueet pois päältä – asettelu on vain toista (3, 1fr), lyhin tapa sanoa "kolme saraketta, jotka jakavat aina käytettävissä olevan leveyden tasaisesti".

Tasaleveät sarakkeet ovat korttiruudukoiden, hinnoittelutaulukoiden ja kuvagallerioiden työhevonen: mitään aluetta ei tarvitse nimetä, koska jokaisella sarakkeella on sama rooli, joten pelkkä raidan koko on selkeämpi kuin ruudukkomalli-alueilmoitus olisi. Lisää rivi ja samat kolme kappaletta toistuvat alla, silti täysin tasaisesti.

Nosta sarakkeiden määrää, jotta ruudukko on tiheämpi, tai ota käyttöön nimetyt alueet, jos myöhemmän sarakkeen on erotuttava muista – alla olevat CSS ja HTML päivittyvät heti, kun teet sen. Kaikki toimii asiakaspuolella, joten mitään ei tarvitse ladata eikä odottaa.

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