[cyberDEV]

Ćwiczę tworzenie responsywnego grida i natrafiłem na uciążliwy CSS-owy problem. Demo https://codepen.io/anon/pen/dRrrxj?editors=1100

Kolumny nie są wyrównane do prawej krawędzi boxa .container; można zaobserwować większy odstęp ( ͡° ʖ̯ ͡°) Domyślam się, że to przez nieprawidłowe obliczenia marginesów i szerokości. Nie wiem jak sobie z tym poradzić, więc zapytam: ktoś bardziej doświadczony mógłby powiedzieć mi jak to naprawić?

Chciałbym jeszcze dodać, że w założeniu odstęp pomiędzy 2 kolumnami wynosi 1rem (16px) i kolumny odpowiednio zajmują wolną przestrzeń.

#webdev #css #frontend #naukaprogramowania

[coeai]

@cyberDEV:

.container {
width: 100%;
margin: 0 auto;
padding: 1rem 0rem 1rem 1rem;
background-color: #bbdefb;
}

[P.....M]

@cyberDEV: Użycie flexboxa ( ͡° ͜ʖ ͡°)

[Jare_K]

@cyberDEV:
secondary section:
width: calc(50% - 0.5rem);

[januzi]

@cyberDEV: Przy tym układzie jaki teraz masz najlepiej chyba będzie zrobić następująco: górne width 50%, dolne width 33.33333%, bez marginesów i paddingów, wewnątrz divy mające marginesy, background, shadow, itd.

[getin]

z fajniejszych gridów polecam miligram
http://milligram.io/

[cyberDEV]

@coeai: Faktycznie i już wiem o co chodzi. Jeszcze drobna poprawka w media query i wygląda elegancko. Bardzo ci dziękuję za pomoc ( ͡° ͜ʖ ͡°)

[cyberDEV]

@PerfectM: Słyszałem o nim i wykorzystałem w pewnej sytuacji, ale chciałbym najpierw dobrze opanować metodę z floatami. Tak czy siak dzięki za sugestię ( ͡° ͜ʖ ͡°)

[cyberDEV]

@januzi: Hmm wtedy należałoby przerobić układ html, a akurat chciałem tego uniknąć. Oczywiście dzięki za sugestię.

[januzi]

@cyberDEV: Na upartego możesz zrobić cssa z numerowaniem kolumn i wrzucić margin-left dla trzeciej, left + right dla drugiej i right dla pierwszej, ale przy rwd jest to bardzo zły pomysł.
Ewentualnie tylko dla trzeciej i pierwszej.