https://github.com/hdev14/css-grids
Grids responsivos criados ou mais utilizados.
https://github.com/hdev14/css-grids
css frontend styles ui
Last synced: 8 months ago
JSON representation
Grids responsivos criados ou mais utilizados.
- Host: GitHub
- URL: https://github.com/hdev14/css-grids
- Owner: hdev14
- Created: 2019-03-09T00:19:40.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-05-03T23:26:15.000Z (over 5 years ago)
- Last Synced: 2024-12-25T11:43:22.454Z (about 1 year ago)
- Topics: css, frontend, styles, ui
- Language: CSS
- Homepage:
- Size: 8.79 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **_GRIDS CSS PARA PROJETOS_**
# GRID-18
_Esse é um grid básico que foi desenvolvido baseado em 18 colunas, 6 colunas e 2 colunas._
## Container
Para definir um container:
```
--Conteúdo--
```
> Eu sei... como os outros, porém esse container só servirá para telas grandes !
## Row
```
--Colunas--
```
> Da mesma maneira que os outros grids, sempre deve ter uma div com class "row" antes das colunas.
## Colunas
Para definir uma div como uma coluna basta adicionar col a class.
```
--Conteúdo--
```
## Colunas 18, 6 e 2.
Então como mencionado este grid é dividido em 18 colunas, 6 e 2.
> Estas colunas são respectivamente relacionadas para os tamanhos de telas grande(large), média(medium) e pequena(small).
Desta forma, para criar um layout em **_telas grandes_**, o grid disponhe de 18 colunas.
O Código ficaria assim:
```
--conteúdo--
```
Para dispostivos com tamanhos de **_telas médias_**, o grid disponhe de 6 colunas.
O **código** ficaria assim:
```
--conteúdo--
```
Para dispositivos com tamanhos de **_telas pequenas_**, o grid disponhe de 2 colunas.
O **código** ficaria assim:
```
--conteúdo--
```
> obs: No começo é meio confuso de se entender, porém depois fica fácil.
## Divs responsivos
Para desenvolver um site totalmente responsivel, é bastante fácil !
Só basta adicionar as colunas específicas para os determinados tamanhos de telas.
O **código** ficaria assim:
```
--conteúdo--
```
> obs: Preste muita atenção quando for projetar seus layouts para os determinados tamanhos de telas !
## Offsets
> _Esse tópico ainda não foi adicionado..._
> Os grids ainda estão em desenvolvimento, se você tiver alguma sujestão ou conheci outros tipos de grid css, por favor, mande uma mensagem para este endereço de email ne.hermerson@gmail.com :p