Mam siatkę, która dla dużych ekranów (@media (min-width: 800px)) używa siatki 12 kolumn z następną dyrektywą:

grid-template-columns: repeat(12, [col-start] 1fr);

Ale dla urządzeń mobilnych używam zamiast tego:

grid-template-columns: repeat(4, [col-start] 1fr);

Dopóki tutaj wszystko jest w porządku, nie ma wyraźnego problemu. Ale jeśli dodam grid-gap: 1rem;, problem staje się oczywisty dla małych ekranów, ponieważ wydaje się, że chociaż określiłem 4 kolumny, przyjmuje to jako 12 kolumn, 4 z nich mają 25% szerokości, a reszta ma 0 pikseli, więc jest złe zachowanie CSS.

Na razie nie mogę odtworzyć go w JSFiddle, ale mam obraz problemu.

Dla 12 kolumn na dużym ekranie:

Grid for 12 columns Computed values for 12 columns

Zastosowane style: (Inne obliczone wartości)

 @media (min-width: 800px) {
   .my-grid {
     display: grid;
     padding: 2.5rem 4.875rem 0 4.875rem;
     grid-template-columns: repeat(12,[col-start] 1fr);
   }
 }

Dla 4 kolumn: Niedobrze 4 kolumny wartości obliczane

Zastosowane style: (Inne obliczone wartości)

   .my-grid {
     display: grid;
     grid-template-columns: repeat(4,[col-start] 1fr);
     padding: 1rem;
   }

Jak widać, obliczone wartości dla siatki 4 kolumn mają ustawione 4 kolumny, a reszta ma szerokość 0 pikseli...

W przeglądzie elementów są tylko linie, które napisałem powyżej.

Jakieś pojęcie, dlaczego mamy takie zachowanie?

Dodatkowo używam styled-components i jest to div.

Codepen z błędem

4
SirPeople 21 listopad 2018, 11:13

1 odpowiedź

Najlepsza odpowiedź

Element znajdujący się pod spodem miał rozpiętość:

grid-column: 1 / span 12;

To zmuszało CSS Grid do posiadania 12 kolumn.

Jeśli usuniemy ten element pod spodem, CSS Grid zachowa się normalnie

5
SirPeople 11 luty 2019, 13:50