Grelhas

As grelhas são utilizadas com objetivo de criar e desenvolver um produto digital consistente e eficiente para todos os dispositivos e tamanho de ecrã. Com base nos princípios de design, todas as medidas são múltiplos de 8 para facilitar e agilizar o trabalho quer do designer quer do developer.

As grelhas ajudam a preparar o design para a capacidade de resposta dos diferentes ecrãs, através destas, conseguimos definir margens de segurança e criar estruturas mais consistentes ao longo de todo o projeto.

NOTA: sempre que seja iniciada uma nova linha (row) deve-se criar uma nova DIV com a classe .gra-row-bs, e dentro da DIV adicionamos as colunas pretendidas como mostra nos exemplos abaixo.

	sm < 768px	md < 900px	ld < 1200px	xl >= 1200px
Prefixo da classe	.gra-col-bs-sm-	.gra-col-bs-md-	.gra-col-bs-ld-	.gra-col-bs-xl-
Dispositivos	Telemóveis	Tablets	Portáteis	Desktops

Exemplo 1: row com as 12 colunas com a mesma largura, usando em cada coluna as classes gra-col-bs-xl-12, gra-col-bs-ld-3 e gra-col-bs-md-2.

xl-12

                                        
<div class="gra-row-bs">
    <div class="gra-col-bs-xl-12 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow">xl-12</div>
    </div>
    <div class="gra-col-bs-xl-12 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow">xl-12</div>
    </div>
    <div class="gra-col-bs-xl-12 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow">xl-12</div>
    </div>
    <div class="gra-col-bs-xl-12 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow">xl-12</div>
    </div>
    <div class="gra-col-bs-xl-12 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow">xl-12</div>
    </div>
    <div class="gra-col-bs-xl-12 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow">xl-12</div>
    </div>
    <div class="gra-col-bs-xl-12 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow">xl-12</div>
    </div>
    <div class="gra-col-bs-xl-12 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow">xl-12</div>
    </div>
    <div class="gra-col-bs-xl-12 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow">xl-12</div>
    </div>
    <div class="gra-col-bs-xl-12 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow">xl-12</div>
    </div>
    <div class="gra-col-bs-xl-12 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow">xl-12</div>
    </div>
    <div class="gra-col-bs-xl-12 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow">xl-12</div>
    </div>
</div>

Podemos adicionar também a cada coluna mais classes como mostra no exemplo acima. No exemplo adicionamos, para além da gra-col-bs-xl-12, as classes gra-col-bs-ld-3 e gra-col-bs-md-2. Quando a largura da viewport for >= 1200px vai aplicar a lei das 12 colunas, se a viewport for < 1200px vai aplicar a lei das 3 colunas, se a largura da viewport for < 900px vai aplicar a lei das 2 colunas, e se a largura da viewport for < 768px aplica a lei de 1 coluna.

Exemplo 2: Caso pretenda uma row com colunas de tamanhos diferentes pode fazer da seguinte forma:

.gra-col-bs-xl-4

.gra-col-bs

.gra-col-bs-xl-8

                                        
<div class="gra-row-bs">
    <div class="gra-col-bs-xl-4">
        <div class="columnRow">.gra-col-bs-xl-4</div>
    </div>
    <div class="gra-col-bs">
        <div class="columnRow">.gra-col-bs</div>
    </div>
    <div class="gra-col-bs-xl-8">
        <div class="columnRow">.gra-col-bs-xl-8</div>
    </div>
</div>

No exemplo acima criamos 3 colunas em que a primeira definimos com a classe .gra-col-bs-xl-4, a segunda com a classe default .gra-col-bs e a terceira com a classe .gra-col-bs-xl-8.

Exemplo 3: Caso pretenda que o número de colunas se mantenha para todos os dispositivos use apenas a classe .gra-col-bs em cada coluna.

.gra-col-bs

                                        
<div class="gra-row-bs">
    <div class="gra-col-bs">
        <div class="columnRow">.gra-col-bs</div>
    </div>
    <div class="gra-col-bs">
        <div class="columnRow">.gra-col-bs</div>
    </div>
    <div class="gra-col-bs">
        <div class="columnRow">.gra-col-bs</div>
    </div>
</div>