Keskustelu: Nettisivujen teko: CSS boxien siisti listaus

Välillä taas painin CSS tyylin parissa, joka välillä tuntuu käyttäytyvän "järjenvastaisesti".
Minulla on boxin tyyli näin:

class="col-sm-2 col-lg-2 col-xs-12" style="padding:0px;border:solid 1px #e3e3e3;margin:1px;display:block;height:120px;"

Olen vasiten laittanut tässä testissä paddingit ja margin olemattomiin, jotta ne ei vie leveyttä. Yhä nuo laatikot tulostuu näin:

1. rivi: 4 laatikkoa
2. rivi: 5 laatikkoa
3. rivi: 1 laatikko
4. rivi: 4 laatikkoa

Mistä tuollainen omituisuus johtuu? Tavoiteena olisi kullekkin riville saada se 5 laatikkoa ja alimmalle riville se, mitä jää jäljelle eli tässä tapauksessa 4.

Tässä nyt ei näytä olevan ihan vaan css kyseessä vaan joku muu, ilmeisesti bootstrap. En lähde arvailemaan mikä versio bootstrapista jne.

pistemies kirjoitti:

Tavoiteena olisi kullekkin riville saada se 5 laatikkoa ja alimmalle riville se, mitä jää jäljelle eli tässä tapauksessa 4.

CSS:llä onnistuu näin

.container { display: flex; flex-wrap: wrap }
.container > div { flex: 0 0 20% }

älä muuten käpistele noita margineja bootstrapissä, kun ne on tarkoituksella asetettu, jotta columnit vievät juuri oikean verran tilaa.

mutta mutta...
Viisi normaalisti, mutta alimmalle yli jäävät neljä? Bootstrap on 12 jakoinen gridi, joten viisi palstaa on aika hankala sillä vääntää.

Eli joko täysin omalla systeemillä bootrapistä välittämättä, tai sitten unohdat viiden palstan.

Lebe80 kirjoitti:

(17.09.2019 16:28:35): älä muuten käpistele noita margineja...

Kyllä tuohon olisi mahdollista tehdä myös 6 laatikkoa rinnakkain, mutta haluaisin siihen hiukan kauniimpaa muotoilua, näyttää niin tukkoiselta jos ne tiiviisti toisissaan kiinni.

No se riippuu varmaan pitkälti kuin leveä se container on, jossa noita palstoja näytetään.

Eihän tuossa mikään kait rajoita, että eri näyttölaitteilla olisi eri verran palstoja vierekkäin (kun se vähän on koko bootstrapin ideakin).

Josta pitikin mainita, että tämä col-xs-12 --> col-sm-2 on melkoinen hypähdys, eli pitäisikö tuossa olla jonkin vähän maltillisempi jako? esim. col-xs-12 col-sm-6 col-md-3 col-lg-2 ?

Taas perinteistä pistemiestä: ei pienintäkään järjen hiventä yhtään missään. Kysymys koskee kokonaisen gridin asettelua mutta annoit koodin vain yhdelle laatikolle?? Ja jos ajatellaan tuon laatikon olevan kopioitu gridiin mainitut 14 kertaa, niin silloin rivillä pitäisi olla kuusi laatikkoa, ei neljä tai viisi.

Vastaus itse ongelmaan on kuitenkin se, että Bootstrap käyttäytyy järjen vastaisesti, koska olet paskonut sen järjen vastaisilla, ihan itse kirjoittamillasi tyyleillä.

Bootstrapin vakio 12-palstainen gridi ei tietenkään edes taivu viiden yhtä suuren solun asetelmaan kovin hyvin, mutta voisit scss-versiota itse kääntämällä helposti muuttaa gridin 15:n (tai joustavampaan 20:n) yksikön asetteluun.

Tällöin voit myös tuunata paddingia ja marginia ns. oikealla tavalla, jolloin et niin herkästi riko mitään.