• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Grid dziwny błąd grid-template-columns

VPS Starter Arubacloud
0 głosów
259 wizyt
pytanie zadane 17 sierpnia 2017 w HTML i CSS przez jankowa1ski Gaduła (3,560 p.)
Miałem taki problem (ktory rozwiazalem) ale nie wiem dlaczego własciwie wystąpił. Konkretnie:

Miałem div z display grid i

grid-template-columns: repeat(7,1fr); i to działało w firefoxie ale juz w chromie i chromie mobilny nie

potem zmieniłem więc na wartosc % a nie fr

grid-template-columns: repeat(7,14%); i to juz działa

co prawda dalej nie działa w ms edge mimo ze dałem prefixy? Ktoś wie dlaczego był taki problem? Chrome wspiera grid system a był zaktualizowany.

2 odpowiedzi

+1 głos
odpowiedź 17 sierpnia 2017 przez niezalogowany
wybrane 17 sierpnia 2017 przez jankowa1ski
 
Najlepsza

Grid to jeszcze nowa technologia (od marca/kwietnia) i bugi związane z gridem nadal nie są największym priorytetem.

Generalnie grid-template-* w chromie (ogólnie przeglądarki bazujące na chromium) nie działa poprawnie od 3-4 wersji. Albo auto albo fr ostro ścina FPS'y albo w ogóle nie działa jak powinno. Osobiście napisałem ticketa do chromium i możesz patrzeć na status: https://bugs.chromium.org/p/chromium/issues/detail?id=726747

Co do Edga to ciężko powiedzieć, bo całkowity support będzie dopiero od 16 wersji. http://caniuse.com/#feat=css-grid

Ewentualnie możesz użyć viewporty zamiast % ale to też nie to samo co auto czy fr

Ogólnie nie potrzebujesz grida jeżeli nie jest to typowa galeria albo układ strony (patrząc po przykładzie repeat(7, x)). Zawsze możesz poprzestać na flexboxsie i lecieć z justify-content: space-evenly/space-around/space-between.

komentarz 17 sierpnia 2017 przez ForeverFriendzone Dyskutant (7,520 p.)
Nawet bardzo nie dawno włączyli grida, bo w mojej książce (wydanej nie tak dawno) pisze, że ,,funkcja zaimplementowana, ale domyślnie wyłączona". Ale z pewnością niesie za sobą ogromne możliwości :D
komentarz 17 sierpnia 2017 przez niezalogowany

Domyślnie wyłączona była w wersji 55? albo 56, gdzie trzeba było wchodzić na chrome://flags żeby włączyć "eksperymentalną" funkcję.

Od początku marca jest ona domyślnie włączona, a od kwietnia (maja w sumie, bo edge dodał grida pod koniec kwietnia) wszystkie przeglądarki supportują grida. 

I tak, daje dużo więcej możliwości od dotychczas standardowego 12-kolumnowego grida

https://gridbyexample.com/examples/

+1 głos
odpowiedź 17 sierpnia 2017 przez ForeverFriendzone Dyskutant (7,520 p.)
W Chrome z gridem jest trochę dziwnie z tego co sam zdążyłem przekonać się na własnej skórze - np. nie wiem czy też tak masz ale nie jestem w stanie wyśrodkować w gridzie divów :(

 

Co do twojego problemu rzeczywiście Chrome też robi coś dziwnego z fr. To jest ogólnie nowy sprzęt w tej przeglądarce i myślę, że muszą jeszcze nad nim popracować...
komentarz 17 sierpnia 2017 przez niezalogowany

W gridzie do wyśrodkowania divów musisz używać *-content: center gdzie * to align albo justify. 

https://codepen.io/anon/pen/KvZEMZ

Podobne pytania

+1 głos
1 odpowiedź 105 wizyt
pytanie zadane 22 września 2023 w HTML i CSS przez troian1337 Użytkownik (720 p.)
+1 głos
1 odpowiedź 270 wizyt
pytanie zadane 6 grudnia 2021 w HTML i CSS przez new_user Użytkownik (610 p.)
+1 głos
1 odpowiedź 251 wizyt
pytanie zadane 29 marca 2021 w HTML i CSS przez Konrad Milewski Nowicjusz (180 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...