CSS grid generátor (grid-template-areas szerkesztő)

A CSS grid kétdimenziós elrendezési rendszer: egy konténert oszlopokra és sorokra osztasz, és az elemeket a rács celláiba vagy több cellán átívelő területeire helyezed. Oldalvázakhoz (fejléc, oldalsáv, tartalom, lábléc), kártyás listákhoz, galériákhoz és űrlapokhoz ma ez a legkényelmesebb eszköz, minden modern böngésző támogatja.

A CSS grid generátor a szintaxis fejben tartása helyett vizuálisan dolgozik: beállítod a sávokat, kijelölöd a területeket, és közben látod az eredményt. A kód két formában készülhet:

• grid-template-areas névvel: a CSS-ben szinte rajzként látszik az elrendezés, könnyű olvasni és módosítani;
• rácsvonal-számokkal (grid-area: 1 / 1 / 2 / 3): tömörebb, és nem kell hozzá területnév a konténeren.

A generált kód a böngésződben készül, semmi nem kerül szerverre.

Ha minden oszlop azonos (például 1fr 1fr 1fr), a generátor tömörebb repeat(3, 1fr) formát ír. A gap az oszlopok és sorok közötti hézag; ha a kettő azonos, egyetlen gap: 16px sor lesz belőle.

Három oszlop (220px 1fr 220px), három sor (auto 1fr auto), 16 px rés. A fejléc az első sor mindhárom oszlopát, a lábléc az utolsó sort foglalja el, középen oldalsáv, tartalom és egy reklámsáv. A generált CSS:

.racs {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "fejlec   fejlec   fejlec"
    "oldalsav tartalom reklam"
    "lablec   lablec   lablec";
}
.fejlec { grid-area: fejlec; }

és így tovább a többi területre. A HTML-ben egy .racs osztályú div, benne a területek nevével azonos osztályú elemek. A sorrendjük a HTML-ben tetszőleges, a rácson a grid-area dönti el a helyüket, ezért a forráskódban a tartalom kerülhet előre (ez a képernyőolvasóknak és a keresőknek is jobb).

A generált elrendezés asztali nézetre szól; mobilon általában egy oszlopba érdemes rendezni. A területnevekkel ez egyetlen médialekérdezés:

@media (max-width: 700px) {
  .racs {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "fejlec" "tartalom" "oldalsav" "reklam" "lablec";
  }
}

Az elemek CSS-ét nem kell módosítani, mert a grid-area nevük marad. Kártyás listákhoz médialekérdezés sem kell: a grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) annyi oszlopot tesz egymás mellé, amennyi kifér.

A rács celláin egérrel húzva jelölsz ki egy téglalap alakú területet; érintőképernyőn koppints a terület egyik sarkára, majd a másikra. Egycellás területhez koppints kétszer ugyanarra a cellára. A kijelölt terület automatikusan nevet kap (elem1, elem2…), amit a lista mezőjében átírhatsz, például fejlec, menu vagy kiemelt névre; a ✕ gombbal törölheted.

Az oszlopok és sorok számát a + és − gombbal 1 és 12 között állíthatod, a sávok méretét egyenként írhatod át. Ha egy oszlopot vagy sort törölsz, a rajta lévő terület is törlődik. Az előnézet a valós sávméreteket használja, így pixeles oszlopoknál vízszintesen görgethető lehet. A mintákkal (oldalváz, kártyarács, galéria) egy kattintással indulhatsz, és onnan alakíthatod tovább.

• Nem téglalap alakú terület: a grid-template-areas csak téglalapot enged; L alakú elrendezést két területből rakj össze. A generátor ezért eleve csak téglalapot jelöl ki, és nem enged átfedést.
• Elírt területnév: ha a konténerben és az elemnél nem pontosan ugyanaz a név, az elem a rács végére kerül. A generátor a neveket ékezet nélküli, kisbetűs, kötőjeles formára alakítja.
• Üres cellák: a pont (.) üres cellát jelöl; ezt a generátor automatikusan beírja oda, ahová nem jelöltél ki területet.
• Túl széles px oszlopok: fix pixelek összege mobilon túllóghat a képernyőn; használj fr-t vagy minmax-ot.