O co chodzi z gridem?

Grid to nic innego jak układ kolumnowy strony (przyjeło się używanie 12 kolumn i na dwunastu kolumnach będę tłumaczył jednak równie dobrze może to być 6 kolumn jak i 24. Ważne żeby to było parzyście).
Z grida korzystają pewnie wszystkie frameworki cssowe, mają one zaawansowane opcje i w dokumentacji można sobie popatrzeć jak to powinno działać. Poszukaj bootstrap grid lub foundation grid lub skeleton grid.
Na czym to polega. Układ strony dzielimy na kolumny. W takich kolumnach umieszczać możemy poszczególne elementy strony (np sidebar w dwuch kolumnach a sekcje w pozostałych 10).
Pokazuje to gdzieś tam wzięty przezemnie pierwszy lepszy layout -> http://prntscr.com/ogarzm ma kolumny -> http://prntscr.com/ogastt
Dodatkowo ma to ten plus, że dobrze napisanym gridem możemy manipulować i tworząc elementy i nadając im odpowiednie klasy możemy powodować automatycznie, że na urządzeniach mobilnych ten element będzie szeroki na 100 % a na desktopie już 50%.
To po prostu ułatiwa dvelopment. No dobra ale jak? Pomyśl o gridzie jako o zdefiniowanych uniwersalnych klasach dodanie takiej klasy spowoduje, że element, który ją dostanie będzie miał odpowiednią szerokość swojego kontenera(rodzica). Od 1/12 do 12/12 jego szerokości (co 1/12).
Czyli klasa .col-6 da nam 6/12 szerokości klasa .col-2 2/12 itd. Takie uniwersalne klasy nazywamy atomic lub utility class.

Jak coś takiego napisać? Ano bardzo prosto. Musimy stworzyć kolejno klasy z wartościami i dopowiednimi szerokościami procentowymi. Muszą mieć też wartość float. Kolumy zazwyczaj mają padding lewy i prawy (fachowo nazywany glutter).
Jednak skrajnie lewa i skrajnie prawa kolumna nie powinny mieć odpowiednio lewego i prawego paddingu. Eliminuje się go zazwyczaj umieszczając kolummy w kontenerze z klasą .row - ta klasa niweluje padding pierwszej i ostatniej kolumny w nim zawartych.
Jako, że korzystamy z float to musimy pamiętać o zresetowaniu tych właściwości po ostatnim elemencie. Tutaj z pomocą przychodzi klasa .clear, można tez użyć pseudoelementów o takich wartościach na początku i na końcu .row.

Poniżej kod css na grida z przeklejony z customowego projektu:

.col {
    padding: 0 12.5px;
    float: left;
    min-height: 1px;
}

.col.col_1 {
    width: 8.33%;
    flex: 8.33%;
}

.col.col_2 {
    width: 16.66%;
    flex: 16.66%;
}

.col.col_3 {
    width: 25%;
    flex: 25%;
}

.col.col_4 {
    width: 33.33%;
    flex: 33.33%;
}

.col.col_5 {
    width: 41.66%;
    flex: 41.66%;
}

.col.col_5_5 {
    width: 45.82%;
    flex: 45.82%;
}

.col.col_6 {
    width: 50%;
    flex: 50%;
}

.col.col_7 {
    width: 58.33%;
    flex: 58.33%;
}

.col.col_7_5 {
    width: 62.49%;
    flex: 62.49%;
}

.col.col_8 {
    width: 66.66%;
    flex: 66.66%;
}

.col.col_9 {
    width: 75%;
    flex: 75%;
}

.col.col_10 {
    width: 83.33%;
    flex: 83.33%;
}

.col.col_11 {
    width: 91.66%;
    flex: 91.66%;
}

.col.col_12 {
    width: 100%;
    flex: 100%;
}

.row .col:last-of-type {
    padding-right: 0;
}

.row .col:first-of-type {
    padding-left: 0;
}

.row .col:last-of-type {
    padding-right: 0;
}

.clear {
    float: none;
    clear: both;
}