CSS grid jak przeliczać ilość kolumn 8 tablet

Question

Czy ktoś z was miał doświadczenie przy pracy z kodowaniem layoutu opartego o grid np foundation lub bootstrap i  dostał materiały od grafika w takiej formie że 

desktop: 12 kolumn

tablet: 8 kolumn

mobile: 4 kolumny

Jeśli chodzi o mobile to łatwo ponieważ dostaje PSD z 4 kolumnami to wiem że przelicznik będzie taki 4 kolumny x 3 = 12 kolumn. Czyli 1 mobila kolumna to 3 kolumny desktopowe i tylko dodaje klase i samo się dzieje:

small-3 small-3 small-3 small-3 = 4 kolumny mobile

 

Problem jaki mam to w jaki sposób przeliczyć te 8 kolumn z gridu w PSD na grid z foundation?

W większości tutoriali jak np tutaj https://www.youtube.com/watch?v=YTzvsspDUGk graicy takiego ustawienia używają więc to chyba standard.

 

Dzięki za odpowiedzi

 

 

 

 

 

Answer 1

Zrób siatkę na 24 kolumny wówczas full screen na każdym kroku będzie możliwy do obliczenia liczbami całkowitymi :

12 X 2 = 24

8 x 3 = 24

4 x 6 = 24

 

bootstrapa 3 można było bez problemu wygenerować poprzez wyklikanie w konfiguratorze ale bootstrap 4 chyba tego nie ma i musisz samodzielnie skompilować SCSS bootstrapa nadpisując jedną zmienną która ustala liczbę kolumn ;)

Comments

@rafal612b  ciekawy pomysł :) ale według mnie to i tak przerost formy nad treścią :) ja zaproponowałem że chce mieć design na tablecie w 12 kolumnach i to rozwiązuje wszytskie problemy dla developera.

Ciekawi mnie tylko skąd te 8 kolumn się wzięło i jak developerzy to interprestują 

---

można zrobić dokładnie to co jest pokazane na wideo z użyciem bootstrapa bez modyfikacji :)

<div class="col-12 col-md-6 col-xl-7"></div>
<div class="col-12 col-md-6 col-xl-5"></div>

w końcu jest na mobilce na całym, na tablecie na pół, a na ekranie masz podziałkę na 12.

podział na 12 jest najpopularniejszy z tego co wiem :)

---

@Tnifey twój przykład nie za bardzo obrazuje jak osiągnąć rozmiar 7 kolumn z 8 na tablecie ;)

Z góry uprzedzam ze niestety nie zobaczyłem wideo wiec nie mam się jak do niego odnieść.

liczba 12 jest popularna ponieważ ma sporo dzielników (1 ,2, 3, 4, 6) i jest dosyć mała. Jednak jej wielokrotności są równie często używane. Ja w pracy miałem do czynienia wyłącznie z siatką opartą o 24 kolumy co dawało nam możliwość zachowania większej dokładności która przydawała się głównie na projektach na całą szerokość strony. Przy klientach którzy wymagają kontroli wielkość co do piksela więcej skoków było zbawienne. 

Jeśli grafik był w stanie przerobić projekt to jest to najlepszy sposób jednak czasem nie da się zmienić projektu lub klient nie zgodzi się na zmiany. Wówczas trzeba sobie jakoś poradzić.  

Answer 2

W BS 4 masz coś takiego jak col-md (o ile dobrze pamiętam, to odnosi się to do tabletów), który nadaje każdej kolumnie taką samą szerokość. Resztę możesz ukryć (jest klasa, która powoduje, że na tej rozdzielczości element nie będzie widoczny) i będziesz miał podział na 8 kolumn.

Answer 3

Podziel najpierw na 2x6 i potem te dwie 4x3 co da ci 8 kolumn.

Answer 4

@arces to nie o to chodzi :) bo te 8 kolumn ma być na 100% i zachowywać się tak jak by było ich 12

@pablop76 tylko to mi narzuca dodatkowe elementy w htmlu które będa miały wpływ na pozostałe breakpointy

 

Na tym filmie który zamieściłem jest pokazane jak grafik projektuje sobie grid i ustawia 8 kolumn na tablet które się zachowują jak 12. Mam podejrzenie że to jakiś specjalny grid trzeba używać bo normalnie to nie ma sensu albo ja nie wiem jak to uzyskać :)

Dlatego pytam czy ktoś miał takie doświadczenie w pracy bo skoro to normalna praktyka wśród grafików to znaczy że jakoś to się ustawia w gridzie ;)

Comments

Będziesz miał 8 kolumn w moim przypadku, reszta na tej rozdzielczości nie będzie widoczna przecież. Masz 8 divów z klasą col-md i cztery z klasą, która ukrywa Ci te kolumny. Łącznie 12 tak jak jest w standardowym gridzie.