CSSruutuja

CSSruutuja on web-suunnittelun käsite, jossa sivun sisältö jaetaan neliön muotoisiin ruutu- eli laatikkoyksiköihin. Ruudut muodostavat tasaisen, visuaalisesti johdonmukaisen ruudukon, jonka koko ja järjestys sopeutuvat näytön kokoon. Termiä käytetään erityisesti suomenkielisessä web-keskustelussa kuvaamaan neliöpitoisten elementtien hallittua asettelua ja visuaalista rytmitystä.

Tekninen perusta perustuu CSS Gridin ja aspect-ratio-ominaisuuden käyttöön. Yleisesti toteutuksessa määritellään ruutujen koko siten, että jokainen ruutu on neliö, esimerkiksi asettamalla aspect-ratio: 1 / 1. Gridin kohdalla voidaan hyödyntää minmax- ja auto-fill/auto-fit -rakenteita, jolloin ruudut täyttävät rivin leveyden riippumatta sisällöstä. Sisällön kohdalla voidaan käyttää sisäistä flex- tai grid-layoutia, jotta kuvien ja tekstin mittasuhteet säilyvät selkeinä ja skaalautuvina.

Käyttökohteet ja käytännön huomioita. CSSruutuja sopii kuvalaatikoiden, portfoliosivujen, tuoteryhmäkoostumien ja dashboard-tyyppisten listojen esittämiseen. Saavutettavuus on huomioitava: ruudut voivat olla interaktiivisia, niihin on annettava riittävä kontrasti ja tuki näppäimistöohjaukselle. Rajoitteita voivat olla vanhempien selainten tuki ja joidenkin dynaamisten sisällöjen hallinta, joka vaatii lisäoptimointeja ruutujen koon ja sisällön yhteensovittamiseksi eri laitteilla.