CSSruudukon

CSSruudukon (CSS-ruudukko) viittaa CSS:n ruudukkoasetteluun, jonka avulla verkkosivujen sisältö voidaan asettaa sekä riveihin että sarakkeisiin kahden ulottuvuuden muodossa. Se on standardoitu CSS Grid Layout -moduuliksi ja on nykyisin laajalti tuettu nykyaikaisissa selaimissa. Verrattuna yhdenulotteiseen flexboxiin, CSS-ruudukko tarjoaa paremman hallinnan koko sivuston rakenteeseen.

Kontti asetetaan display: grid; ja rivejä sekä sarakkeita määritellään grid-template-columns ja grid-template-rows -ominaisuuksilla. Solut osoitetaan grid-column- ja grid-row -ominaisuuksilla, tai käytetään grid-area-sijoituksia. Grid tukee eksplisiittistä rakennetta sekä implisiittistä lisäystä: uudet rivit ja sarakkeet voidaan luoda automaattisesti.

Keskeisiä ominaisuuksia ovat lisäksi gap (välit rivien ja sarakkeiden välillä), sekä kohdistusominaisuudet kuten justify-items, align-items, justify-content ja align-content. Named areas mahdollistavat visuaalisesti mielekkään asettelun ilman monimutkaisia koordinaattikäsittelyjä.

Historia ja tuki: CSS Grid Layout esiteltiin 2010-luvun loppupuolella ja on nykyään perusosa modernia CSS:ää. Kaikki suuret selaimet tukevat sitä; IE11-tuki on poistunut ja korvautunut nykyaikaisilla ominaisuuksilla.

Käyttötarkoitukset: monimutkaisten verkkosivujen asettelut, responsiivinen suunnittelu sekä sisältöjen järjestyksen ja mittasuhteiden hallinta ilman raskaita CSS-luokkia.

See also: Katso myös CSS Grid Layout, CSS Flexbox sekä verkkokehityksen standardit.