Grid.css - Un système de grille minimal pour les développeurs Web

Les infrastructures frontales plus grandes comme Bootstrap sont livrées avec leur propres configurations de grille. Mais ils ont aussi venir avec beaucoup de bagages sous la forme d'éléments de page préconçus et de composants JavaScript.

Si vous recherchez un système de grille beaucoup plus petit et rationalisé, alors vous allez adorer Grid.css.

Cette bibliothèque open source gratuite est livrée avec le traditionnel Système de grille 12 colonnes que vous pouvez structurer pour n’importe quelle mise en page. Le CSS est vraiment facile à utiliser et le fichier lui-même mesure seulement 560 octets (c'est un demi-KB!)

Se lancer est super facile et vous avez juste besoin un fichier CSS ajouté à votre entête.

Vous pouvez trouver le lien de téléchargement direct sur la page d'accueil de Grid.css ou dans le dépôt officiel GitHub. Vous pouvez même utiliser le version CDN brute intégrer ce fichier directement à partir de GitHub sans l'héberger vous-même.

Maintenant, vous pouvez configurer votre structure de colonne en utilisant les éléments que vous voulez (divs, sections, etc).

Cela comprend généralement un .rangée élément (le conteneur) avec beaucoup éléments de colonne internes. Les classes de colonne utiliser des nombres pour définir leur espace total à l'intérieur du conteneur, par exemple, .col4 prend quatre colonnes sur les douze total.

Voici un exemple extrait de la démo:

Vous pouvez utiliser n’importe quelle combinaison de classes de colonnes de votre choix, tant qu’elles ajouter jusqu'à 12.

Cela signifie que vous pouvez aussi restructurer la page comme vous voulez, en utilisant différents conteneurs de rangée. Par exemple, vous pourriez avoir une grande étendue pour votre en-tête mais utiliser deux configurations différentes de lignes / colonnes pour le corps de votre page.

Naturellement, cette bibliothèque est 100% gratuit et Open source, de sorte que vous êtes libre de faire des modifications comme bon vous semble.

Le créateur, Ahmed Tarek, aussi fait des Butns qui est une variante des nombreux kits d'interface utilisateur de boutons. Il se marie bien avec Grid.css, donc ils sont tous deux d'excellentes bibliothèques à ramasser lors du démarrage d'un nouveau projet Web.