Curso de HTML5 e CSS3 Responsivo Aula 15 Importante Criando e entendendo sistema de Grid CSS com 12 colunas

Nessa vídeo aula vamos aprender a criar um sistema de Grid com 12 colunas responsivo, é uma aula importante devido a popularidade de um sistema de Grid na criação de layouts estruturais.

O que é um Sistema de Grid?

Em uma rápida definição. Em termos básicos, um sistema de grid é uma estrutura que permite o conteúdo ser empilhado verticalmente e horizontalmente de uma forma consistente e facilmente gerenciável. O código de um sistema de Grid é projetado geralmente de modo que possa ser adotado em novos projetos.

Componentes Básicos

Sistemas de grid incluem dois componentes principais: linhas e colunas. Linhas são usadas para acomodar as colunas. Colunas compõem a estrutura final e envolvem o conteúdo real. Alguns sistemas de grid irão incluir um corpo, que servem para envolver o layout.

Os Benefícios

  • Eles aumentam a produtividade fornecendo simples e previsíveis estruturas de layout para design de HTML. A estrutura de uma página pode ser formulada rapidamente sem perder tempo em adivinhar qual sua precisão ou compatibilidade.
  • Eles são versáteis na forma em como os layouts podem ser construídos, sendo adaptados em variadas combinações de linhas e colunas. Eles ainda suportam grids aninhados para em casos de usos complexos. Não importa a necessidade do layout, um sistema de grid é quase certamente bem adaptado.
  • Eles são ideais para layouts responsivos. Aqui é onde os sistemas de grid dominam. Eles tornam incrivelmente fácil a criação de interfaces mobile amigáveis, que são adaptadas para diferentes tamanhos de tela.

Código do sistema de Grid desenvolvido na vídeo aula

.caixa {
	float: left;
	width: 100%;
	margin: 0.5%
}
.caixa1 {
	width: 7.33333%
}
.caixa2 {
	width: 15.66667%
}
.caixa3 {
	width: 24%
}
.caixa4 {
	width: 32.33333%
}
.caixa5 {
	width: 40.66667%
}
.caixa6 {
	width: 49%
}
.caixa7 {
	width: 57.33333%
}
.caixa8 {
	width: 65.66667%
}
.caixa9 {
	width: 74%
}
.caixa10 {
	width: 82.33333%
}
.caixa11 {
	width: 90.66667%
}
.caixa12 {
	width:  99%
}

 



Hospedagem Profissional de Sites