Grid.css - Um sistema de grade mínima para desenvolvedores da Web

Estruturas de frontend maiores, como o Bootstrap, vêm com suas configurações de grade próprias. Mas eles também vem com muita bagagem na forma de elementos de página pré-concebidos e componentes JavaScript.

Se você está procurando por um sistema de grade muito menor e simplificado, então você vai adorar Grid.css.

Esta biblioteca gratuita de código aberto vem com as tradicionais Sistema de grade de 12 col. que você pode estruturar para qualquer layout. O CSS é realmente fácil de usar e o próprio arquivo mede apenas 560 bytes (isso é meio KB!)

Começar é super fácil e você só precisa um arquivo CSS adicionado ao seu cabeçalho.

Você pode encontrar o link de download direto na página inicial do Grid.css ou no repositório oficial do GitHub. Você pode até usar o versão CDN bruta para incorporar este arquivo diretamente do GitHub sem hospedá-lo você mesmo.

Agora, você pode configurar sua estrutura de colunas usando quaisquer elementos que você quiser (divs, seções, etc).

Isso geralmente inclui um .linha elemento (o container) junto com muitos elementos da coluna interna. As classes da coluna usar números para definir seu espaço total dentro do container, assim por exemplo, .col4 ocupa quatro colunas dos doze total.

Aqui está um exemplo de fragmento da demonstração:

Você pode usar qualquer combinação de classes de colunas que desejar, contanto que elas adicione até 12.

Isso significa que você também pode reestruturar a página como você quiser, usando recipientes de linha diferente. Por exemplo, você pode ter um grande intervalo para o seu cabeçalho, mas usar duas configurações diferentes de linha / coluna para o corpo da página.

Naturalmente, esta biblioteca é 100% grátis e Código aberto, então você está livre para fazer edições como quiser.

O criador, Ahmed Tarek, também fez Butns que é uma variante dos muitos kits de botões da interface que estão por aí. isto pares bem com Grid.css, então eles são ambos excelentes bibliotecas para pegar ao iniciar um novo projeto web.