CSS Grid rafall
Stilltu dálka og raðir, dragðu yfir reitina til að staðsetja einingar og afritaðu grid-CSS ásamt samsvarandi HTML með einum smelli.
Netið þitt er byggt beint í vafranum þínum. Engu af því sem þú stillir hér er hlaðið upp á BroBroGo.
Algengar spurningar
Hvernig staðset ég einingar á netinu?
Smelltu og dragðu yfir reitina til að afmarka rétthyrning — þegar þú sleppir verður það að staðsettri undireiningu sem nær yfir þá dálka og raðir. Hver eining sem þú teiknar fær sína eigin grid-column og grid-row reglu í CSS-kóðanum og samsvarandi div í HTML-kóðanum. Einingar mega skarast og sú sem er teiknuð síðar liggur ofan á; notaðu × á einingu til að fjarlægja hana.
Geta dálkar og raðir verið af mismunandi stærðum?
Já. Hver rás (track) hefur sinn eigin stærðarreit og þú getur slakað inn hvaða grid-gildi sem er þar — 1fr, 200px, auto, min-content eða minmax(120px, 1fr). Rásir sem deila sömu stærð eru dregnar saman í repeat() svo úttakið haldist stutt. Bil á milli dálka og raða eru stillt sérstaklega og sameinast í eitt gap þegar þau eru eins.
Hvað geri ég við kóðann sem verður til?
Afritaðu CSS- og HTML-kóðann hlið við hlið. HTML-kóðinn gefur þér gáminn með einu div fyrir hverja einingu, og CSS-kóðinn skilgreinir netið og staðsetur hverja einingu. Límdu bæði inn í verkefnið þitt og þú færð nákvæmlega sama útlit og þú teiknaðir hér.