Witam, potrzebuję stworzyć responsive design oparty na siatce grid, ale nie tylko po szerokości ale też po wysokości (gutter:0). Czyli ekran dzielimy na np. 10 kolumn. Czyli mogę utworzyć kafelki: każdy odpowiednio na szerokość 10%, 20% .. 100%. I do tej pory jest to mega banał. Teraz potrzebuję by każdy ten div był kwadratem! Tak więc np. {width:100%; height:10% } nie jest dla mnie żadnym rozwiązaniem bo nie będzie to zawsze proporcja 1:1.

Chciałbym ominąć JavaScript do wyrównywania kafelków....
Czy ktoś zna jakiś sposób rozwiązania tego lub już coś takiego istnieje z czego mógłbym skorzystać?

Jeśli dobrze zrozumiałem i chcesz uzależnić wysokość elementu od jego szerokości i dynamicznie zmieniać, to niestety nie zrobisz tego w CSS. Musisz posiłkować się JS.

Tego się bałem, czyli jedynie wyjście żeby uzyskać kwadraciki to fixed size?

Nie jestem szczęśliwy...

Nie. Możesz ustawić procentowo szerokość i za pomocą JS ustawić taką samą wysokość (ta już będzie w px). Ta czynność powinna być powtórzona na zdarzenie window.onResize. Dzięki temu będziesz miał ładne kwadraciki.

PS. w jQuery to 4 linijki kodu.