Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Fala galera do fórum!
Estou começando no design responsivo, mas, tenho muitas dúvidas ainda. Aprendi sobre as medidas relativas, fazer o layout fluido e adaptar com media queries. Fiz um modelo de teste para treinar um pouco. Só que, adaptar o site usando break-points, ele não fica muito simétrico. Andei lendo sobre grids no CSS, mas não entendi muito, na verdade nada! Alguém pode me explicar de uma maneira bem didática sobre as grids? E outra, alguém pode me indicar um sistema simples de grids prontas que vocês costumam usar, ou então como criar um próprio sistema de grids? Agradeço a todos :D
Pô galera, me ajudem nisso por favor...
É o seguinte, tenho lido muitos artigos sobre design responsivo na internet. Principalmente os do Tableless. Tenho visto muitos sites falando sobre usar grids no CSS. O que seriam essas grids que servem como base para layouts no CSS? Realmente não entendo isso. Sei que existem os sistemas de grids prontos, como o Bootstrap, Foundation e etc...
Mas, caso eu não queira usar nenhum desses frameworks prontos, como posso organizar um site para que ele seja sustentado por um grid? Seriam os divs englobando os conteúdos?
Agradeço a todos! :coolio:
Google -> "crie seu grid" retorna vários tutoriais em português.
Oi. Então, eu tbm sou novo nessa área de grids e sites responsivos, mas já consegui compreender seu funcionamento e é maravilhoso.
Os frameworks mais famosos são Bootstrap e Foundation. Eu utilizo o bootstrap, pois achei mais "fácil" de compreender. No site de cada um tem um enorme tutorial de cada função e de como funcionam as colunas, é bem simples a leitura.
Os grids funcionam mais ou menos assim:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/qNrgs8g.jpg&key=3108ac6fee61f22753585ce2e35535ff5269d8042ad20a67849152786db92d78" alt="qNrgs8g.jpg" />
O grid é dividido em 12 colunas (alguns são divididos em 24). Com base nessas colunas, você monta seu site. Exemplo:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/HmIQdqF.jpg&key=8ee725e7af600e3adb64569bc8b1f2ffb579dde0493a8d285ce014ea4cce4915" alt="HmIQdqF.jpg" />
Dá pra notar que os elementos preencher exatamente o número de colunas, sempre totalizando 12 no final.
É mais ou menos isso.. Cada framework tem seus classes para as colunas. No bootstrap usa-se col-*-nº, exemplo:
Nesse exemplo, o "sm" significa small, pois ele já fáz o media querie para as resoluções... então col-sm-6 significa que nas resoluções small a div ocupará 6 colunas. Em col-md-3, nas resoluções "médias" vai ocupar 3 colunas.Como o bootstrap é "mobile first", então sempre ordene as classes da xs (x-small) para a lg (large).