Gridok megjelenítése a böngésző hibakeresőjében

A grid-okkal való munka során a weboldal layoutjának készítése közben gyakran szükséges ellenőrizni, hogy a grid rendszerben helyesen történik-e az elemek elhelyezése. Ezenkívül, ha hibát vétettünk, ki kell derítenünk, hogy melyik elemtől ered a helytelen elhelyezkedés. Erre a célra használhatjuk a böngésző hibakeresőjét.

Nézzük meg a grid-et a Chrome böngésző hibakeresőjében példaként. Először kiválasztjuk a minket érdeklő objektumot, ami a grid, jobb egérgombbal rákattintunk, és kiválasztjuk a listából a 'Elem vizsgálata' opciót:

Most a jobb oldalon megnyíló böngésző panelen ráviszük az egérmutatót a grid objektumunkra, és észrevesszük, hogy a szülőelem melletti sorban található egy grid gomb:

Miután rákattintottunk a grid gombra, látni fogjuk, hogy objektumunk vizuálisan érthető grid rendszerben jelenik meg, az összes oszlop és sor számozásának feltüntetésével:

Most fordítsuk figyelmünket a hibakereső paneljére. Azon elhelyezkedő lapok között Styles, Computed, Layout és mások. Váltsunk át a Styles lapról, amely alapértelmezetten aktív, a Layout lapra. Megjelenik a grid beállításainak listája:

Most válasszuk ki a megjelenítéshez az első opciót, a Show track sizes-t, amely megmutatja a track-ek méretét:

A Show area names opcióval megjeleníthetők a grid területeinek nevei, ha azok meg lettek adva. A Extend grid lines opció kiválasztásával pedig a track vonalak meghosszabbítását láthatjuk a grid keretein túl: