Wiem, że są podobne pytania, ale to jest właśnie pytanie, jak to zrobić za pomocą CSS Grid Layout.CSS Grid: jak utworzyć kolumnę o pełnej szerokości, gdy nie ma drugiej kolumny?
Więc mamy tę podstawową konfigurację siatki:
HTML (z bocznym):
<div class="grid">
<div class="content">
<p>content</p>
</div>
<div class="sidebar">
<p>sidebar</p>
</div>
</div>
CSS:
.grid {
display: grid;
grid-template-columns: 1fr 200px;
}
Aby stworzyć układ, który wygląda mniej więcej tak to:
| content | sidebar |
Jeśli strona nie ma paska bocznego, np. html wygląda tak, ale z tego samego CSS:
HTML (nr boczny):
<div class="grid">
<div class="content">
<p>content</p>
</div>
</div>
Układ strony wygląda następująco (kreski oznaczają pustą przestrzeń)
| content | ------- |
I wiedzieć, dlaczego tak się dzieje, kolumna siatki jest nadal zdefiniowana w regule grid-template-columns
.
Po prostu zastanawiam się, jak powiedzieć sieci, że jeśli nie ma zawartości, wypełnij pozostałe miejsce podobne do tego, jak flex-grow
działa dla flexbox
.
Pożądany wynik będzie wyglądał tak, jeśli nie ma paska bocznego.
| content |
Myślę, że szerokość ustawienia: 100%; na pasku bocznym najprawdopodobniej pozwoli na to, by pasek boczny opierał swoją szerokość na wartości układu siatki zamiast podawania 200 pikseli dwukrotnie. –
po prostu nie ustawiaj niczego, jeśli chcesz. –
Czy to nie oznacza, że pasek boczny może mieć mniej niż 200 pikseli, ale jeśli na pasku bocznym nie ma zawartości o wartości 200 pikseli? –