Linhas agrupam colunas de modo que uma fique ao lado da outra. Dessa forma podemos criar diversas divisões para o layout de um website, como o demonstrado pela seção Modelo de doze grades A sintaxe básica para declarar uma linha é a seguinte:

Linhas são elementos que trabalham como blocos de conteúdo, portanto, cada nova linha é inserida abaixo de sua antecessora. Dessa forma, as linhas fazem repartições horizontais no layout de um website. As colunas, por sua vez, fazem repartições verticais no layout de um website. Considerando o modelo de doze grades, as colunas podem ocupar uma escala de 1 a 12 grades do espaço disponível pela tela do dispositivo do usuário.

Assim, há classes para designar quantas colunas cada bloco de conteúdo irá ocupar, sendo essas classes antecedidas pelo prefixo col-. O código abaixo ilustra a declaração de linhas e colunas:

O exemplo acima irá resultar em uma página com duas linhas. Na primeira linha cria-se um cabeçalho de uma única coluna, que ocupa doze colunas. A segunda linha é dividida em duas colunas de larguras diferentes, a primeira para menu e a segunda para conteúdo, respectivamente.

Caso você esteja utilizando um dispositivo de alta resolução, redimensione a janela de seu navegador para analisar a apresentação do conteúdo proposto pelo exemplo do código acima.

Pode ser que não seja interessante para o designer, que a estrutura de seu site, linhas e colunas, seja reorganizada pelo framework como o demonstrado no exemplo acima. Aliás, pode ser que o designer deseje manter o número de colunas que propôs para a grade de conteúdo em questão. Nesse caso, o framework Sketch disponibiliza diferentes versões das classes com prefixo col-. Assim, há classes para resolução de tela para desktopCom resolução maior que 768px de largura., dispositivos móveis com até 768px de resolução, dispositivos móveis com até 600px de resolução e dispositivos móveis com até 480px de resolução.

Para cada uma dessas resoluções têm-se as seguintes versões dos prefixos para definir o número de colunas que uma grade de conteúdo irá ocupar:

• Para dispositivos com mais de 768px de largura: definir colunas por meio do prefixo col-

• Para dispositivos com 768px ou menos de largura: definir colunas por meio do prefixo col-mh-

• Para dispositivos com 600px ou menos de largura: definir colunas por meio do prefixo col-m-

• Para dispositivos com 480px ou menos de largura: definir colunas por meio do prefixo col-s-

Assim, caso utilizássemos código do último exemplo acima, adicionando regras para manter as dimensões de suas colunas, teriamos o seguinte código abaixo:

Isso resultaria na seguinte apresentação de conteúdo:

Caso você esteja utilizando um dispositivo de alta resolução, redimensione a janela de seu navegador para analisar a apresentação do conteúdo proposto pelo exemplo do código acima.

O framework Sketch também fornece classes para formatar a altura de colunas e suas linhas. Para a altura relativa, o framework trabalha com uma adaptação do modelo de doze grades, formando o modelo de doze linhas. O modelo de doze linhas divide a altura da tela em frações de 1 até 12 repartições, tendo por prefixo o termo height- combinado com o termo lv + o valor numérico da fração, que vai de 1 a 12, cujas medidas são apresentadas pela tabela abaixo:

O framework Sketch fornece classes para formatar a altura mínima estática dos blocos de conteúdo em uma escala de 50px a 600px. Por altura mínima, entende-se que inicialmente um bloco de conteúdo terá uma altura y e caso a quantidade de elementos contida em seu interior ultrapasse essa altura, este bloco de conteúdo também irá aumentá-la. A tabela abaixo apresenta as classes responsáveis por definir medidas para alturas estáticas.

Poderiamos com isso definir a altura de um contêiner e de um elemento contido nele da seguinte forma:

Isso resultaria na seguinte apresentação de conteúdo:

Nesse exemplo foi criado um contêiner com 400px de altura mínima, sendo que em seu interior há um bloco de conteúdo com posição absoluta, com altura estimada em 75% da altura de seu contêiner. Aqui, nesse exemplo, uma nova classe foi utilizada: absolute. A classe absolute fornece a capacidade de sobrepor elementos independente do espaço disponível no elemento que o contém.