Wprowadzenie do CSS GRID

Kilka słów o CSS GRID

Grid layout pozwala nam dzielić layout naszej strony internetowej w sposób podobny do tego jaki oferują tabele, ale robimy to z poziomu CSS w sposób dużo łatwiejszy i bardziej intuicyjny. Do tego dzięki @media możemy uczynić nasz layout responsywnym w kilka min. Obecnie CSS GRID jest już wspierany przez obecne wersje przeglądarek Firefox, Chrome, Safari i Opera, oraz Safari i Chrome w wersjach mobilnych.

Warto więc uczyć się nowego sposobu budowania stron, gdyż już niebawem będzie miał świetne wsparcie a budowa layoutu strony jest bardzo prosta i przyjemna. Zapraszam do poniższego poradnika, w którym przedstawię Ci jak można w prosty sposób zbudować taki prosty layout strony i uczynić go responsywnym.

Struktura HTML

Struktura HTML naszego projektu będzie bardzo prosta. Nagłówek i stopka, a pomiędzy nimi div z 4 newsami w boxach oraz sidebar, czyli pasek boczny. No to budujemy strukturę, która jest bardzo prosta. Efekt końcowy możecie zobaczyć tutaj:

Zobacz Gotowy Projekt

<div class="layout">
    <div class="header">
        <div class="nav-left">
            LOGO
        </div>
        <div id="nav-menu" class="nav-right">
          MENU
        </div>
    </div>
    <div id="content">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>
    <div class="sidebar">Sidebar</div>
    <div class="footer">
        Footer
        </p>
    </div>
</div>

Struktura CSS

Najpierw budujemy grid dla .layout. W tym celu musimy ustawić kolumny. Pierwszą ustawimy na automatyczną szerokość a 2 na 16em dla paska bocznego: grid-template-columns: auto 16em;. Następnie ustawiamy wysokość wierszy kolejno na 80px dla nagłówka z menu, 40px dla stopki a treść ustawimy na auto lub min-content. na sam koniec ustawmy sobie odstępy między wierszami i kolumnami na 20px.

.layout {
    display: grid;
    grid-template-columns: auto 16em;
    grid-template-rows: 80px min-content 40px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
}

Teraz musimy ustawić layout dla poszczególnych elementów. Nagłówek będzie umieszczony w 1 wierszu i ma zajmować 2 kolumny. Wszystko ustawiamy przy pomocy grid-row oraz grid-column.

.header {
    grid-row: 1;
    grid-column: 1 / span 2;
}

Analogicznie ustawiamy treść główną:

#content {
    grid-row: 2;
    grid-column: 1;
}

Następnie pasek boczny czyli sidebar:

.sidebar {
    grid-row: 2;
    grid-column: 2;
}

Oraz na samym końcu stopkę czyli footer:

.footer {
    grid-row: 3;
    grid-column: 1 / span 2;
}

Teraz pozostaje nam ustawienie siatki dla boxów w content. Tutaj również posłużymy się GRIDEM CSS.Ustawimy 2 kolumny korzystając z opcji 1fr oraz wysokość wierszy na min-content, dzięki czemu wysokość dopasuje się automatycznie do treści/zawartości. Dodatkowo możemy ustawić przerwy między kolumnami i wierszami na np. 20px.

#content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-template: min-content min-content;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

Teraz pozostaje nam jeszcze ustawić zachowanie się naszego layout na mniejszych ekranach.

@media (max-width: 60.000em) {
    .layout {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 60px min-content min-content min-content;
        grid-column-gap: 0px;
        grid-row-gap: 20px;
    }
    .sidebar {
        grid-row: 3;
        grid-column: 1;
    }
    .footer {
        grid-row: 4;
    }
}

oraz na smartfonach:

@media (max-width: 40.000em) {
    #content {
        display: grid;
        grid-template-columns: auto;
        grid-row-template: min-content;
    }
}

Dzięki tym zabiegom nasz sidebar powinien przeskakiwać na dół przy mniejszych rozdzielczościach a na jeszcze mniejszych nasze boxy/divy w content będą układały się jeden pod drugim.

Wszystko z dodatkowymi treściami i ostylowaniem można zobaczyć tutaj:

Zobacz Gotowy Projekt

http://codepen.io/Naymapl/pen/RpvNbo?editors=1100

Stworzenie takiego prostego layout nie powinno zająć dłużej niż 20-30min. A co wy sądzicie o nowym CSS GRID ?? Podzielcie się opinią w komentarzach !!

Dodatkowe materiały warte przeczytania (w języku ang.):
https://tympanus.net/codrops/css_reference/grid/
https://css-tricks.com/snippets/css/complete-guide-grid/
http://gridbyexample.com/examples/
https://www.sitepoint.com/introducing-the-css-grid-layout/
http://caniuse.com/#feat=css-grid