Najprostszy grid CSS 960px

Tym razem mam szybciutką wskazówkę na temat szablonów stylów. Często zachodzi konieczność umieszczenia treści strony w kolumnach, a pomocne przy tym okazują się przeróżne, mniej lub bardziej wyrafinowane, siatki (gridy) CSS, dzielące nam stronę na wybrana liczbe kolumn, których suma szerokości odpowiada szerokości całej strony.

Mnie się po prostu nie chce szukać online żadnych gridów, najczęściej więc piszę własną wersję, działającą w większości przeglądarek (a dostosować je do wymagań IE7 też się da, za pomocą m.im. użytego tu clearfixa od Perishable Press). Ponieważ korzystam z preprocesora LESS, mój kod wygląda następująco:

.clearfix {
    &:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
}
.boxes {
    .clearfix;
    .box {
        padding: 0 10px;
        float: left;
        &.col1 { width: 60px; }
        &.col2 { width: 140px; }
        &.col3 { width: 220px; }
        &.col4 { width: 300px; }
        &.col5 { width: 380px; }
        &.col6 { width: 460px; }
        &.col7 { width: 540px; }
        &.col8 { width: 620px; }
        &.col9 { width: 700px; }
        &.col10 { width: 780px; }
        &.col11 { width: 860px; }
        &.col12 { width: 940px; }
    }
}
// IE7:
*:first-child+html .boxes {
    zoom: 1;
}

Dzięki powyższemu przykładowemu zestawowi stylów, wystarczy stworzyć kontener z klasą boxes, a w nim dowolną liczbę kontenerów z klasą box (w którym to przypadku kolumny dostosują się do szerokości zawartości), opcjonalnie dodając też klasę col*, definiująca konkretną szerokość kolumny. Powyższy kod jest napisany na potrzeby siatki 960px z 12 kolumnami, marginesami 10px i odstępami między kolumnami 20px. Wartości można dowolnie dostosować do potrzeb danego projektu.


Napisz komentarz


Szukaj wpisów


Chmura tagów