Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Klasyczny układ Świętego Graala obejmuje nagłówek, stopkę, lewy pasek boczny, prawy pasek boczny i główną treść. Jest podobny do poprzedniego układu, ale teraz zawiera paski boczne.
Aby zapisać całą siatkę za pomocą 1 wiersza kodu, użyj właściwości grid-template. Dzięki temu możesz ustawić wiersze i kolumny jednocześnie.
Para właściwość i wartość to: grid-template: auto 1fr auto / auto 1fr auto. Ukośnik między pierwszą a drugą listą rozdzielaną spacjami to podział między wierszami i kolumnami.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Tak jak w poprzednim przykładzie, gdzie rozmiar nagłówka i stopki jest automatycznie dostosowywany do rozmiaru lewego i prawego paska bocznego, rozmiar lewego i prawego paska bocznego jest dostosowywany automatycznie na podstawie wewnętrznego rozmiaru elementu podrzędnego. Tym razem ma on jednak wymiar poziomy (szerokość), a nie pionowy (wysokość).