Share
Nous avons créé un guide complet pour vous aider à apprendre le CSS, que vous soyez débutant avec les bases ou que vous souhaitiez explorer un CSS plus avancé..
Salut. Je m'appelle Cory. J'ai un peu une obsession. Je suis accro aux systèmes de grille depuis des années. En fait, j’ai aidé à en faire un très populaire appelé Jeet. J'ai toujours aimé les maths impliquées dans l'espacement approprié des choses.
Je pense que nous pouvons tous convenir que les grilles fixes ont pris le chemin du dinosaure au profit des grilles fluides, mais il y a toujours eu des problèmes qui me dérangeaient au sujet des grilles fluides. Par exemple, il n’est pas possible d’avoir une gouttière de la même taille en haut et en bas qu’une gouttière à gauche et à droite. Sérieusement, essayez.
Et il n’est pas possible de nidifier indéfiniment sans passer par une sorte de contexte avec votre espacement. Par exemple, dans Jeet, vous devez taper colonne (1/3 1/2) où 1/2 est la taille de l'élément conteneur. Cela devient assez poilu quand vous avez imbriqué trois ou quatre fois et que vous avez des déclarations qui ressemblent à colonne (1/4 1/3 1/2 1/2). Beurk. Ce n'est pas seulement Jeet non plus, tous les systèmes de grille basés sur des préprocesseurs ont ce problème.
Et Bootstrap? Ne me demandez pas combien d'éléments supplémentaires vous avez besoin dans votre balisage pour que votre système de grille fonctionne correctement. Elle est sujette aux erreurs, si rien d'autre. Ou encore le fait que vous avez besoin de plus d'éléments dans votre balisage si vous souhaitez définir des couleurs d'arrière-plan sur les éléments. Voici un exemple de ce petit problème sous la forme d'une galerie.
Argh! Même la Flexbox ne semble offrir rien de nouveau, si ce n’est un moyen pratique de centrer verticalement les choses.
Après cette visite éclair de ce qui ne va pas avec les grilles aujourd'hui, qu'est-ce qu'un obsédé par la grille est censé faire?
On peut utiliser calc () au sein de notre CSS, alors que fait-il?
“Avec calc (), vous pouvez effectuer des calculs pour déterminer les valeurs des propriétés CSS.” - MDN
Non seulement cela, mais nous pouvons combiner unités avec calc! Cela signifie que si nous voulons qu'une grille ait quatre colonnes par ligne avec une gouttière de 20 pixels entre elles, nous pouvons écrire une combinaison de valeurs de pourcentage et de pixel telles que largeur: calc (25% - 20px). Comme c'est fantastique?
Voici quelques images de chaton-sept chaton dans un contenant section:
Ensuite, nous appliquons du style aux images:
img float: left; largeur: calc (25% - 20px); marge: 10px;
Cela garantit que chaque image correspond exactement à 25% de la largeur de son image parent, moins 20 pixels, ce qui permet à notre gouttière de s'aligner à gauche et à droite. Une marge de 10 pixels tout autour place ensuite l'image parfaitement centrée dans la "colonne".
Quatre colonnes de chatons Remarquez comment l’espacement en haut et en bas est le même que l’espacement à gauche et à droite? Belle.
Résumons cela un peu plus pour ceux d’entre nous qui préférerions afficher le calcul différemment: largeur: calc (100% * 1/4 - 20px);
Encore une fois, cela nous donne quatre colonnes parfaites avec une gouttière de 20 pixels. Nous pouvons également utiliser des requêtes de média pour modifier le nombre de colonnes en fonction de la largeur de la fenêtre:
img float: left; marge: 10px; largeur: calculée (100% * 1/4 à 20 px); @media (max-width: 900px) img width: calc (100% * 1/3 - 20px); @media (largeur maximale: 600px) img largeur: calc (100% * 1/2 - 20px); @media (largeur maximale: 400px) img width: calc (100% - 20px);
Des années d'obsession complètement effacées par cette belle petite règle CSS. Adieu les systèmes de grille. Bonjour calc.
Il ne serait pas juste de terminer ce tutoriel rapide sans vous dire où et quand vous pouvez utiliser calc (). Les suspects habituels sont en train de rattraper leur retard (IE9 est presque là, mais ignore calc () quand affichage: table est utilisé). Cependant, il s’agit d’un outil CSS très puissant..
Jetez un coup d’œil sur http://caniuse.com/#feat=calc pour plus de détails.
Accentsconagua
