piątek,
Układ CSS Grid Layout
CSS Grid Layout to najlepsza metoda rozmieszczania elementów strony HTML w kolumnach i wierszach. Jej wadą jest brak wsparcia w starszych przeglądarkach, jednak dotyczy to jedynie około 5% użytkowanych obecnie aplikacji. Siatka CSS pozwala kontrolować układ w bardzo wyrafinowany sposób, w prezentowanym przykładzie ograniczono się do bardzo prostego rozwiązania i wykorzystania tylko dwóch spośród dostępnych własności Grid Layout.
Kod HTML przykładu
Zgodnie z zapowiedzią zastosowany w przykładzie kod HTML to niezmodyfikowane rozwiązanie z materiału „Układ normalny elementów HTML”. Dla przypomnienia zaprezentowano jedynie schematyczny zapis kodu, jego pełną postać można zobaczyć w źródle przykładu.
Schematyczny zapis prezentowanego kodu:
body > div.container >
( div.header
+ div.section > (
div.main
+ div.aside
)
+ div.footer
)
Przykład
Z powodów technicznych prezentowana strona została umieszczona w ramce iframe. Możesz ją otworzyć w pełnym oknie.
Kod CSS
Aby uzyskać dwie położone obok siebie kolumny, należy nadać elementowi nadrzędnemu własność display: grid i ustalić szerokość podrzędnych elementów. Posłużyła do tego własność grid-template-columns. Do zdefiniowania wymiarów można użyć różnych jednostek, w przykładzie zastosowano fr (fraction of available space). Jednostki fr reprezentują ułamek dostępnej przestrzeni, ich znaczenie łatwo zrozumieć za pomocą praktycznego przykładu. W poprzednio prezentowanych układach wykorzystywano wartości procentowe, kolumny zajmowały odpowiednio 55% i 25% dostępnej przestrzeni. Pozostałe 20% zajmowało wypełnienie (padding) elementów, ponieważ zachowano „klasyczny” model pudełkowy stosowany domyślnie przez przeglądarki. W demonstrowanym przykładzie usunięto własności width obu kolumn, a element nadrzędny otrzymał deklarację: grid-template-columns: 55fr 25fr, w definicjach obu elementów zastąpiono jedynie jednostkę. Sumaryczna wartość szerokości kolumn to 80fr, co oznacza, że dostępną przestrzeń podzielono na osiemdziesiąt części, elementy otrzymały odpowiednio 55 i 25 spośród nich. Łatwo zauważyć, że zapis „grid-template-columns: 55fr 25fr” można „uprościć”, po podzieleniu obu liczb przez pięć otrzymany zostanie zapis „grid-template-columns: 11fr 5fr”. Po takiej modyfikacji wygląd układu zostanie zachowany, ponieważ zmiana nie wpłynęła na proporcje.
body, body div {
margin: 0;
padding: 0;
}
body {
padding: 30px;
background-color: #e4d7c1;
}
div.container {
max-width: 960px;
margin: 0 auto;
}
div.header {
background-color: #a00;
color: #fff;
text-align: center;
padding: 2% 0;
}
div.section {
background-color: #f2f2f2;
}
div.aside {
background-color: #fff;
}
div.footer {
background-color: #343434;
color: #fff;
text-align: center;
padding: .5% 3%;
}
/* KLUCZOWE REGUŁY */
div.section {
display: grid;
grid-template-columns: 55fr 25fr;
}
div.main, div.aside {
padding: 30px 50px;
}
/* END KLUCZOWE REGUŁY */
