Praca z kolumnami a odstęp

Question

Siemka

Uczę się kodować gotowe szablony w html css i mam pytanie dot. pracy z kolumnami. Szablon jest podzielony na 12 kolumn z odstępami pomiędzy nimi.

Na W3S znalazłem coś takiego:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

Wszystko działa prawidło. Problem jest wtedy gdy chcę utworzyć odstęp pomiędzy nimi ? Np.. mam 3 kolumny ale przylegają do siebie. Gdy robię odstęp za pomocą margin'u, te przeskakują niżej gdyż są za szerokie żeby zmieścić się w jednej linii.

Answer 1

Nie męcz się z tym. Proponuję od razu wejść we flexa, to jest dzisiaj standard, a już coraz częściej do gry wkracza grid. Na początek polecam: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ to chyba najlepsza stronka o flexie. Sam generalnie mało co dotykam css jak i samego html więc generalnie UX to nie mój świat ale jak czasami muszę wyjść z pięknego świata JS to korzystam z tej stronki.

Comments

Dzięki! Flexa i grid'a ogarniam. Nigdy nie pracowałem jeszcze z kolumnami i chciałem spróbować ale skoro nie jest to potrzebne, to oleję ^^,

---

Powiem tak, nie zaszkodzi rozumieć jak to działa, jak działa float itp. Ale w pracy raczej tego nie wykorzystasz, chyba, że przy utrzymaniu jakiegoś starego projektu. Ale ja uważam, że zawsze warto szukać optymalnych rozwiązań do nauki. Na przykład jeśli powiedzmy można założyć, że z 80% nowych apek stoi na flexie, ewentualnie grid to pytanie, czy warto poświęcać czas na te 20% starych? Jeśli przyjdzie Ci takową utrzymywać to szybko sobie to ogarniesz na konkretnej apce :)

Answer 2

Możesz użyć funkcji calc() do zmniejszenia kolumn i uzyskaną różnicę wykorzystać na marginesy.

Ale jak pewnie zauważyłeś dalej w tutku to jest

[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}

Co daje 30px 'odstępu' między kolumnami.

border jest do celów projektowych.