Niech autor poda link aby móc to sprawdzić. Kolejna kwestia jest fakt wprowadzania elementów grid-area skoro wypełnia całe "rzędy". Tym bardziej że z przekazanego kodu jednoznacznie wynika to z faktu że dla wersji mobile ma to sens ale to samo robi dla wersji desktop
Kod:
@media (min-width: 992px) {
.site-grid {
grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". side-l comp comp side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". bot-c bot-c bot-c bot-c ." ". footer-b footer-b footer-b footer-b .";
}
}
Więc dla wersji mobile i desktop umieszczane są elementy jeden pod drugim. By to uzyskać tak naprawdę wystarczy wpisać wyłącznie
i też się wyświetlą elementy jeden pod drugim.
jednak z jakiegoś powodu autor wprowadził ten fragment:
Kod:
grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
który wyraźnie dzieli nam stronę na konkretne kolumny.
jeżeli chcesz umieszczać po kolei elementy to nie musisz stosować grid-area. Można to tak zrobić:
Kod:
.site-grid {
display: grid;
grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
grid-gap: 0 1em;
}
.element {
grid-column: main-start / span 2; /* Każdy div zajmuje dwie kolumny */
}
oczywiście możesz to zamienić tak aby zajmował jedną kolumnę czy inaczej nie ma potrzeby stosować grid-area. To jest znaczne ograniczenie kodu. Jednak cały problem polega na tym że autor nie podał linku i nie opisał na czym jeszcze polega dokładnie brak efektu który chce uzyskać.
Cytuj