CSS Grid: jak utworzyć kolumnę o pełnej szerokości, gdy nie ma drugiej kolumny?

Question

Wiem, że są podobne pytania, ale to jest właśnie pytanie, jak to zrobić za pomocą CSS Grid Layout.

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       | 

Answer 1

można zbliżyć się za pomocą treści słowa kluczowe kalibrujący coś takiego:

.grid { 
    display: grid; 
    grid-template-columns: 1fr fit-content(200px); 
} 

.sidebar { 
    width: 100%; 
} 

fit-content kluczowe będą patrzeć na wielkości zawartości i zachowywać się jak max-content aż niego osiąga wartość, którą przekazujesz.

W rzeczywistości prawdopodobnie nie będziesz potrzebować aby umieścić rozmiar na pasku bocznym, ponieważ zawartość może narzucać rozmiar co najmniej 200 pikseli (na przykład), ale można się z tym bawić.

Answer 2

nie określają kolumny wyraźnie z grid-template-columns.

Zamiast tego ustaw kolumny jako domyślne, a następnie określ ich szerokości za pomocą grid-auto-columns.

Dzięki temu pierwsza kolumna (.content) zużyje całe miejsce w rzędzie, gdy druga kolumna (.sidebar) nie istnieje.

.grid { 
 
    display: grid; 
 
    grid-auto-columns: 1fr 200px; 
 
} 
 

 
.content { 
 
    grid-column: 1; 
 
} 
 

 
.sidebar { 
 
    grid-column: 2; 
 
} 
 

 
.grid > * { 
 
    border: 1px dashed red; /* demo only */ 
 
}

<p>With side bar:</p> 
 

 
<div class="grid"> 
 

 
    <div class="content"> 
 
    <p>content</p> 
 
    </div> 
 
    
 
    <div class="sidebar"> 
 
    <p>sidebar</p> 
 
    </div> 
 

 
</div> 
 

 
<p>No side bar:</p> 
 

 
<div class="grid"> 
 

 
    <div class="content"> 
 
    <p>content</p> 
 
    </div> 
 
    
 
</div>