Simples Grid CSS - Uma maneira simples de criar colunas responsivas

Para adicionar o grid na sua pagina

1. Faça o download e adicione os arquivos SASS ou o CSS no seu projeto

2. Adicione uma div com a class container

3. Dentro de container adicione um div row

4. Dentro de row adicione column- de 1 a 12

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
5
5
2
6
6
12
6
6
12
12
12

Se você quiser modificar as colunas para alterar quando for celular, tablet, desktop ou desktop full HD

Mobile <= 576 column__mobile- de 1 a 12

Tablet >= 768 column__tablet- de 1 a 12

Desktop >= 1000 column__desktop- de 1 a 12

Large Desktop >= 1200 column__large-desktop- de 1 a 12

Full HD >= 1440 column__full-hd- de 1 a 12

Mobile 2 / Tablet 12 / Desktop 6
Mobile 2 / Tablet 12 / Desktop 6
Mobile 6 / Tablet 6 / Desktop 4
Mobile 6 / Tablet 6 / Desktop 4
Mobile 6 / Tablet 6 / Desktop 4
Mobile 3 / Tablet 4 / Desktop 2 / Large Desktop 2 / Full HD 6
Mobile 3 / Tablet 4 / Desktop 2 / Large Desktop 2 / Full HD 6
Mobile 3 / Tablet 4 / Desktop 2 / Large Desktop 2 / Full HD 6
Mobile 3 / Tablet 4 / Desktop 2 / Large Desktop 2 / Full HD 6
Mobile 3 / Tablet 4 / Desktop 2 / Large Desktop 2 / Full HD 6
Mobile 3 / Tablet 4 / Desktop 2 / Large Desktop 2 / Full HD 6

Para adicionar o grid com a largura total na sua pagina

1. Faça o download e adicione os arquivos SASS ou o CSS no seu projeto

2. Adicione uma div com a class container-fluid

3. Dentro de container-fluid adicione um div row

4. Dentro de row adicione column- de 1 a 12

1
1
1
1
1
1
1
1
1
1
1
1
6
6