Bonjour à tous! Aujourd'hui, nous allons parler de ça qu'est-ce que les systèmes de grille (système de grille) ou simplement maille flexible dans la disposition adaptative.

Tout d'abord, nous donnerons la définition de ce qui est Système de grille.

Système de grille - Collection de classes basées sur des classes permettant à l'utilisateur de contrôler la disposition de la page à l'aide d'un système de rangée et de haut-parleurs.

Imaginez que nous ayons une page de blog. Il est divisé en 2 colonnes: à gauche la partie principale et à droite - Sidbar. Essayons de créer une grille flexible pour une telle page.

Eh bien, pour les débuts, nous devons faire le primaire, mais html. Marquage.

Ici, nous avons un bloc contenant la page entière, il réside un bloc avec un blog dans lequel 2 blocs mentent: la partie principale de la page et de Saydbar.

Donc, toute notre page sera la taille 960px. Toute la grille est divisée en 12 colonnes 69px. Chaque. Une partie pour blog sera largeur 900px. La partie principale de la page sera 566px, Barre latérale - 331px.

C'est ce que nous obtenons à la fin

#page (
Marge: Auto 36PX;
largeur: 960px;
}

Blog (
Marge: 0 AUTO 53PX;
largeur: 900px;
}

Blog.main (
Flotteur: gauche;
largeur: 566px;
}

Blog.Sidebar (
Flotter à droite;
largeur: 331px;
}

Tout est bon, mais comme vous pouvez le constater, tout cela est statique, défini en pixels. Nous voulons que notre grille modifie leurs dimensions en fonction de l'écran de la page visible, par conséquent, nous devons tout mettre en place pour cent. Faisons le.

Pour cela, il reste toujours la même formule que pour les polices

cible / contexte \u003d résultat

Nous traduisons le bloc de la page entière du pourcentage de pixels.

#page (
Marge: Auto 36PX;
largeur: 90%;
}

90% Il est choisi par le fait que, dans ce cas, nous aurons également des trindages sur les bords de 5% . Cependant, vous pouvez choisir une autre valeur.

Nous utilisons notre formule: 900 / 960 = 0.9357

Je vais multiplier le résultat 100 obtenir des intérêts et pleuré dans notre cSS..

Blog (
Marge: 0 AUTO 53PX;
Largeur: 93,75%;
}

La même chose doit être faite avec des colonnes, mais notez que le contexte a changé. Parce que Les colonnes sont à l'intérieur d'un bloc de classe .Blog, ce sera un contexte. Considérons.

566 ÷ 900 \u003d .628888889

331 ÷ 900 \u003d .367777778

Nous traduisons tout en intérêts et écris dans la feuille de style.

Blog.main (
Flotteur: gauche;
Largeur: 62.8888889%;
}

Blog.Sidebar (
Flotter à droite;
Largeur: 36,7777778%;
}

C'est tout! Maintenant, nous avons eu une grille flexible et pouvons l'utiliser lors de la pose.

Comme vous pouvez le constater, tout est très simple. Au cœur de la grille flexible, comme une police flexible, est la même formule, rappelant que vous pouvez facilement disperser des sites adaptatifs.

La note! Comme vous pouvez le constater, nous avons des pourcentages assez longs. Certains peuvent vous conseiller de les arrondir, mais cela n'est pas nécessaire pour cela! Rappelles toi!

Et j'ai tout dessus, merci de votre attention et de réussir la mise en page adaptative!

Nous continuons le sujet mise en page adaptative. Aujourd'hui, nous parlerons d'une des trois baleines de la mise en page adaptative - mise en page à base de maille Mise en page flidbaled flexible). Deux autres sont des images flexibles (images flexibles).

Au milieu du 20ème siècle, les graphistes ont popularisé le concept typographique, ou alors modulaire, grille - Système rationnel des colonnes et des lignes dans lesquels des modules peuvent être placés avec du contenu. Il avait l'air frais et très harmonieux.

Cependant, la conception graphique et la conception de sites Web sont, comme on dit à Odessa, deux grandes différences. Moment clé Voici la taille de la page. Dans la version d'impression, il est corrigé et la page Web peut s'étirer et rétrécir en fonction de ce qui est visualisé.

Pour appliquer une grille modulaire à une page Web, utilisez une formule de proportionnalité simple:

cible / contexte \u003d résultat

Comprendre cette formule est la solution la plus simple sur un exemple visuel. Supposons que nous ayons une mise en page de site dessinée dans deux colonnes - la partie de contenu et la barre latérale:

Nous la poursuivons "caoutchouc". Mais voici le problème: comment définir la largeur des deux blocs? Après tout, s'ils le prescrivent en pixels, ils ne seront pas en caoutchouc. Vous devez donc utiliser des intérêts, pas des pixels. Mais laissez-moi, quelles valeurs pour écrire quelque chose? Quoi qu'il en soit, vous devez repousser quelque chose.

Bien sûr, vous pouvez comprendre: le contenu occupe environ 70% de la largeur totale de la page, et Saydbar est de 30%. Mais le benchman droit jamais et ne prétend pas à l'œil. Nous avons besoin d'une taille précise.

C'est pour cela et sert la formule même de la proportionnalité. Nous venons de prendre la largeur des blocs internes et de la diviser sur la largeur globale de la page. Ici la page entière est le contexte.et chacun des blocs internes, respectivement, cible. De la formule ci-dessus.

660 / 960 = 0,6875
300 / 960 = 0,3125

Il reste seulement de traduire ces données en intérêts. Pas très dérangeant, juste survoler la virgule sur deux signes à droite. On a:

68,75%
31,25%

C'est juste juste. Cependant, compliquons la tâche. Supposons que nous ayons que la partie de contenu est toujours divisée en deux parties inégales. Par exemple, à gauche, la colonne étroite avec la date de l'article et les boutons sociaux situés verticalement, et la colonne de droite est large et nous avons le texte de l'article.

De la disposition de la conception, nous savons que la largeur de cette colonne étroite est de 120 pixels et une largeur 520. Comment traduire ces chiffres en%? Encore une fois, appliquez la formule proportionnelle. Mais cette fois, nous utilisons toute la largeur de la page comme contexte et la largeur de ce bloc, qui inclut ces deux colonnes, c'est-à-dire la largeur de contenu, que nous avons 660 pixels. Nous divisons:

120 / 660 = 0,1818
520 / 660 = 0,7878

En pourcentage, nous obtenons, respectivement, 18,18% et 78,78%

À propos, dans des fichiers de style modernes utilisant des mises en page adaptative, les vers corrects ajoutent des calculs similaires comme des commentaires. Pour une meilleure visibilité. Voici comment il ressemble généralement à:

Contenu (
Largeur: 68,75%; / * 660PX / 960PX * /
}

J'espère qu'il n'y avait aucune difficulté avec cela. Allons plus loin!

À base de maille

Les exemples discutés ci-dessus sont, bien sûr, pas encore une grille. Eh bien, quel est le maillage de deux colonnes? La vraie grille modulaire est conçue pour aider et concepteurs et caméras pour créer des sites complexes avec une variété de colonnes et de blocs individuels.

Par conséquent, il y avait beaucoup de services et d'outils pratiques qui mettent en œuvre cette méthode facilement et simplement. Par exemple, 960.gs. Ici, vous pouvez non seulement explorer clairement le principe de Markup en fonction de la grille modulaire, mais également de télécharger des modèles et utilisez-les.

En fait, ces services sont maintenant un étang d'une fierté! Ils sont également appelés cadres. Choisissez ce qui va comme ça. Voici une excellente sélection de 30 frameworks CSS pour la conception Web adaptative.

Pourquoi avez-vous besoin de ces grilles modulaires?

Tout d'abord, des grilles modulaires sont nécessaires pour rationaliser visuellement le contenu sur la page du site. Ce non seulement du point de vue esthétique est magnifique et plave l'œil de l'utilisateur, mais aussi commode pour les développeurs eux-mêmes. Surtout si le site est vraiment complexe dans la structure et le contenu.

De plus, de telles grilles modulaires sont beaucoup plus faciles à rendre adaptatives que des blocs dispersés aléatoirement de différentes tailles.

Bien sûr, la rapidité du développement de ces sites est beaucoup plus élevée. Vous n'avez pas besoin de tromper et de réinventer le vélo de zéro. Il suffit de choisir le cadre approprié et la brane du site.

J'espère que vous savez maintenant que la mise en page adaptative est basée sur la grille modulaire.

La prochaine fois parlons d'images flexibles dans la disposition adaptative. Thème très important et non sans ambiguïté. Je le recommande aussi pour apprendre de bonnes choses afin de ne pas venir à venir. Reste en contact! Et encore mieux pour souscrire à la newsletter du blog Webcose.

Lorsqu'il s'agit de choisir une grille, de nombreuses options apparaissent. Vous trouverez ci-dessous (et non seulement) que vous pouvez utiliser librement dans vos projets. Ces grilles CSS vous aideront à créer rapidement un site réactif merveilleux. À la fin de l'article, une table est donnée dans laquelle les grilles décrites ci-dessous sont comparées.

1. Squelette.

Squelette. Il s'agit d'un ensemble de fichiers CSS, plus un modèle PSD pour les concepteurs Web. Ces fichiers, par le plan des auteurs du squelette, vous aideront à créer une mise en page réactive. Squelette a également une décharge de styles, qui convient parfaitement. Par défaut, le squelette est basé sur une grille de 960px (sur des moniteurs de largeur de 980px), les blocs de squelette ont une largeur fixe; Les blocs s'adaptent au navigateur en raison de l'espace autour du site; Lors du changement de la fenêtre du navigateur, le défilement horizontal n'apparaît pas.

Depuis les blocs de largeur fixe, une telle grille peut être appelée adaptative, non réactive. Je peux difficilement l'utiliser.

2. Grille simple.

Si vous êtes minimaliste, cette grille vous conviendra. La largeur de la grille par défaut dépasse 1140px. Selon les auteurs de la grille, effectuez un site Web avec une plus petite largeur maximale incorrectement. Contrairement au squelette simpleGrid se comporte sensible et satisfait aux concepts de conception réactive. Comme déjà mentionné, la largeur maximale du maillage est de 1140px, mais il n'est pas possible de modifier cette valeur, car tous les blocs de grille sont posés en pourcentage: c'est ce que signifie une conception réactive! Dans le fichier CSS lui-même, le registre des médias n'est qu'un:
@MediaHandheld, Seulscreenand (max-largeur: 767px), qui peut être noté comme une faille.

En principe, la chose est pratique, mais lors du développement, très probablement, il devra affiner.

La grille simple est la base d'une grille lumineuse, tandis que la grille simple n'est pas un cadre CSS. La grille simple n'a pas de styles pour les boutons, les tables, les polices, etc. La grille simple fonctionne avec deux divers types Grilles. Il y a un maillage pour le contenu qui ressemble à

et un maillage pour une mise en page qui ressemble à . La grille simple prend également en charge des aménagements réactifs. La grille a des haut-parleurs de caoutchouc, la grille change ses dimensions en fonction de la taille de la fenêtre du navigateur. Pour appareils mobiles La grille construit ses propres colonnes sous la forme d'une pile, une pour une autre.

Paramètres Grille simple.

Les principaux paramètres de grille simples sont similaires à toute autre grille. Vous devez d'abord envelopper votre grille en div avec la classe de grille. Si vous souhaitez que la grille soit en retrait (rembourrage) à 20px, ajoutez la classe de la grille-pad. Ensuite, sur la base de vos préférences de maillage, ajoutez les classes souhaitées. Par exemple, si vous voulez une grille avec une colonne de gauche et l'unité principale (pour le contenu), utilisez le code suivant:

Html

Si vous souhaitez obtenir avec 4 colonnes (pour le contenu), vous pouvez utiliser un tel code:

Html

La première colonne (pour le contenu) dans notre maillage est toujours faite en flottant par rapport au bord gauche du bloc d'enveloppe. Si vous souhaitez effectuer une colonne de flottante par rapport au bord droit, ajoutez une classe à droite.

Basé sur une grille simple, par exemple, des astuces CSS ...

Articles dans le sujet:

• Traduction de l'article "Ne pas trop penser aux grilles" sur habhara.ru-maillage sans problèmes

3. Grille profonde

Grille profonde. Vous permet d'afficher avec précision la mise en page dans la plupart des navigateurs. Comment pourraient-ils atteindre de tels progrès pour une mise en page réactive? La grille profonde utilise des champs négatifs lors du calcul des colonnes.

4. griddle

Plaque (Github.com/necolas/griddle) est une grille pour les concepteurs Web orientés vers les navigateurs modernes (IE8 +). Le fichier CSS est généré à l'aide de fonctions et d'impuretés SASS. L'utilisation de propriétés en ligne-block et de dimensionnement de la boîte fournit une disposition de nouvelles fonctionnalités par rapport aux dispositions basées sur des blocs flottants. Inconvénients: la grille n'a pas de fichier CSS, seulement SASS; Télécharger un exemple est impossible; Sass seulement.

5. Grilles réactives supplémentaires

Si vous sentez que les autres grilles CSS vous limitent si votre priorité est un contrôle complet de la manière dont votre disposition réactive est adaptée à divers écrans, si vous êtes préoccupé par les noms des classes de votre CSS, vous pouvez être utile. Grilles sensibles à force supplémentaires.

6. Grilles proportionnelles.

Cette solution CSS résout le problème, très souvent survenant lorsque la mise à l'échelle de notre mise en page, à savoir la taille disproportionnée des rainures pour diverses zones de visualisation. Les grilles proportionnelles vous permettent d'utiliser des tailles fixes pour vos gouttières tout en laissant la possibilité d'utiliser des colonnes en caoutchouc (colonnes).

L'idée de l'auteur est la suivante: L'auteur utilise la propriété de taille de la boîte, ce qui vous permet de créer des écarts fixes avec des colonnes. La distance entre les colonnes est la même pour chaque point spécifique de l'arrêt et dépend de la taille de la police de la police.

7. Neat.

Description apparaîtra plus tard

8. Cswizardry-Grids

Description apparaîtra plus tard

9. Grille simple morte

Description apparaîtra plus tard

10. Système de grille réactif

Description apparaîtra plus tard

De nos jours, il y a des cadres pour tout, et il semble que seuls-vous la comprendre avec un, comme un autre sera remplacé par un autre. Cela est particulièrement vrai pour les cadres CSS pour une grille adaptative, et tout le monde s'appelle "le mieux". Un tel excès d'informations introduit la confusion.

Revenons à un pas de retour, nous allons prendre une profonde respiration et vous demander: allons-nous utiliser toutes les 24 options et un million de leurs combinaisons que nous fournissons «ce devoir de bighteel»? Souvent, nous avons besoin d'une solution simple et flexible, avec un nombre limité de variations, avec une base de code, que nous pouvons développer à tout moment. Je tiens à raconter environ quatre techniques de mise en œuvre de la grille CSS, chacune se développant facilement. Ce sont ces quatre manières:

1. Numéro de marge de grille adaptatif 1 (en utilisant des tirets négatifs)
2. Marquillage de grille adaptatif Numéro 2 (Utilisation de la taille de la boîte: Bordure-Box)
3. Marquillage de grille adaptatif basé sur l'affichage tabulaire
4. Markup de maillage adaptatif basé sur Flexbox

Je simplifie la description de ces méthodes et je vais utiliser le nombre minimum de CSS simple et compréhensible. Pour chaque méthode, une démonstration sur CodePen sera présentée.

Général CSS.

Avant d'approfondir la description de chaque méthode, examinons les styles communs que nous utiliserons dans tous les exemples. Je vais utiliser la boîte d'annonce: la boîte de frontière pour tous les éléments du document, ainsi que d'ajouter une classe.Clearfix pour nettoyer les blocs flottants. Voici notre CSS de base:

/ * Réinitialiser les propriétés * / *, *: Avant, *: After (dimension de la boîte: bordure;) .Clearfix: après (contenu: ""; Affichage: Table; Clair: Tableau: les deux;)

Méthode 1: Nous utilisons des retraites négatives

Cette méthode est basée sur l'utilisation d'indents négatifs pour créer des blocs de grille d'indents fixes entre les blocs. La taille de la retraite négative varie de la position du bloc dans la grille et la distance entre les blocs reste constante. Regardons le balisage:

/ * Maillage * / (marge-bas: 20px;): dernier enfant (marge-bas: 0;) () @media tous et (min-largeur: 768px) (/ * Tout marge de Cols * / (marge-droite : 20px;): dernier enfant (marge-droit: 0;) / * Nous faisons les haut-parleurs adaptatifs * / .col-1-2 (flotteur: gauche; largeur: 50%;) .col-1-4 (flotteur : gauche; largeur: 25%;) .Col-1-8 (flotteur: gauche; largeur: 25%;) / * 2 rangées de span * / .row-2 (Rembourrage gauche: 20px;) .Orow-2: First - Enfant (Marge-Gauche: -20Px;) / * 4 SPAN lignes * / .row-4 (rembourrage-gauche: 60px;) .Orow-4: premier enfant (marge-gauche: -60px;) / * 8 rangées de span * / .row-8 (rembourrage-gauche: 60px;) .Orow-8: Nth-enfant (4n + 1) (marge-gauche: -60px;) .row-8: Nth-enfant (5n- 1) (Marge-droite: 0;) .row-8: Nth-enfant (6n-1) (Clear: les deux;)) @media Tous et (min-largeur: 1200px) (/ * Ajuster la largeur * / .col -1 -8 (flotteur: gauche; largeur: 12,5%;) / * 8 rangées de span * / .row-8 (rembourrage-gauche: 140px;) / * réinitialiser ces ... * / .row-8: Enfant (4n + 1) (marge-gauche: 0;) .row-8: Nth-Chi Ld (5n-1) (marge-droit: 20px; ) .Row-8: Nth-enfant (6n-1) (Clear: Aucun;) / * Et Ajouter ceci * / .row-8: Nth-enfant (1) (Marge-gauche: -140px;))

Comme on peut le voir, dans le cadre des conditions de registre des médias, la valeur fixe du retardateur (appeler X) est multipliée par le nombre de colonnes dans la ligne moins 1 (N-1), et ce tiret est appliqué à la ligne. à gauche. Chaque colonne, outre ces dernières, une retraite fixe de la droite (X) est définie. Une première colonne de la chaîne est donnée un tiret négatif (N-1) * x

Inconvénients et erreurs

La nécessité de certains calculs, en plus de, la méthode devient impraticable pour augmenter le nombre de colonnes. En outre, avec une augmentation du nombre d'étapes (nombre de gradations de registres de médias, par exemple 1 colonne sur une chaîne, 4, 8 ...), nous devons réinitialiser CSS et utiliser de nombreux mathématiques. calculs.

Une autre erreur intéressante apparaît lorsque nous avons beaucoup d'éléments flottants. La quantité totale d'indents à un moment donné peut être combinée et les éléments seront transférés à nouvelle chaîne. Cela peut être vu dans le cas de 8 colonnes. Si vous modifiez l'état de la dernière demande de média à une largeur minimale, moins de 1200px, ce bogue peut alors être observé en action. Rappelez-vous cela. Mais cette méthode présente ses avantages.

Avantages et utilisation dans la pratique

Le charme actuel de cette méthode consiste à créer une combinaison de grille fixe / alternative. À titre d'exemple, imaginons la zone du contenu principal de la variable de largeur et la zone latérale supplémentaire de la largeur fixe. Notre code HTML peut ressembler à ceci:

Et CSS - comme ceci:

/ * Marquage * / .Primary (marge-bas: 20px;) @media tout et (min-largeur: 600px) (.Container (Padding-droite: 300px;) .Primaire (flotteur: gauche; Rembourrage: 60px; Largeur: 100%;) .secondaire (flotteur: droite; marge-droite: -300px; largeur: 300px;))

Et voici la démonstration du code en action sur CodePen:

Méthode 2: Utiliser le dimensionnement de la boîte: Bordure-Box

Cette méthode utilise la puissance du dimensionnement de la boîte: bordure. Étant donné que cette propriété vous permet d'ajouter un élément au champ sans influencer par la valeur de la largeur totale de l'élément, nous pouvons toujours obtenir une grille flexible avec des "retraites" fixes. Mais ici au lieu d'utiliser la propriété de marge, nous utiliserons des champs internes qui joueront le rôle des trindages entre les éléments de la grille.

Marquage:

Ici, nous allons contourner sans mathématiques vertigineuses, notre CSS sera donc vraiment simple. Et ici, avec la possibilité de marquer jusqu'à 8 colonnes:

/ * Mesh * / .row (marge: 0 -10px; marge-bas: 20px;) .Orow: dernier enfant (marge-bas: 0;) (rembourrage: 10px;) @media tous et (min-largeur: 600px) (.col-2-3 (flotteur: gauche; largeur: 66,66%;) .col-1-2 (flotteur: gauche; largeur: 50%;) .col-1-3 (flotteur: gauche; largeur: 33,33%;) .col-1-4 (flotteur: gauche; largeur: 25%;) .col-1-8 (flotteur: gauche; largeur: 12,5%;)

Les tiges négatifs et les indents gauche sont nécessaires pour compenser les champs de colonne. Sur la demande de support spécifiée, la largeur minimale de nos éléments de grille prennent sa propre largeur et devient flottant à l'intérieur de leurs conteneurs. Vous pouvez modifier cette largeur à votre discrétion ou spécifier d'autres demandes de média pour divers groupes d'éléments de grille.

Développez cette méthode:

Disons que vous voudriez faire des objets. Col-8 d'abord embarqué dans 4 par ligne, puis 8. Il est assez facile à mettre en œuvre si vous pensez un peu. Pour le marquage ci-dessus, notre CSS ressemblera à ceci:

@Media tous et (min-largeur: 600px) (.Col-1-8 (flotteur: gauche; largeur: 25%;) .Col-1-8: Nth-enfant (4n + 1) (Clear: les deux;) ) @Media Tous et (min-largeur: 960px) (.Col-1-8 (largeur: 12,5%;) .Col-1-8: Nth-enfant (4n + 1) (Clear: Aucun;))

Méthode 3: Utilisez un affichage tabulaire

Cette méthode implémente un ancien comportement de table, mais ne casse pas la sémantique ou la structure. Dans cette méthode, des éléments visibles sont affichés par défaut comme des blocs. Mais avec certaines tailles de la rangée de la grille, deviennent des tables et que les colonnes deviennent des cellules de table. Jetons un coup d'œil au balisage - il ressemble à un similaire de la deuxième façon, mais ici, nous n'avons pas besoin de .Clearfix:

Et, en conséquence, CSS:

/ * Mesh * / .row (marge: 0 -10px; marge-bas: 10px;) .Orow: dernier enfant (marge-bas: 0;) (rembourrage: 10px;) @media tous et (min-largeur: 600px) (.Orow (affichage: table; disposition de table: fixe; largeur: 100%;) (Affichage: cellule de table;) / * Définissez les largeurs de col * / .col-2-3 (largeur: 66,66%;) .Col-1-2 (largeur: 50%;) .col-1-3 (largeur: 33,33%;) .col-1-4 (largeur: 25%;) .col-1-8 (largeur: 12,5% ;))

Cette méthode peut sembler déroutante, mais elle présente des avantages. Pour commencer, nous ne brisons pas la sémantique à l'aide de tables traditionnelles et nous n'avons pas besoin de nettoyer les blocs flottants. Les colonnes de la même hauteur sont faciles. Combinaison de colonnes fixes et de colonnes d'une largeur variable? Pas de problème. Le tableau d'affichage apporte ses problèmes et de toutes les quatre manières à laquelle il est ma très mal aimé. Malgré le fait que, dans certains cas, c'est une bonne option.

Méthode 4: Flexbox

La dernière façon dont je vais décrire utilise le module Flexbox. Selon MDN:

CASS3 Flexible Box ou Flexbox - Mode de mise en page qui vous permet de placer des éléments sur la page afin qu'ils se comportent de manière prévisible sur diverses tailles d'écran et divers appareils.

Flexbox propose de nombreuses fonctionnalités différentes qui nous donnent un puissant arsenal de différentes options de mise en page pour des éléments. Rendre le module Flexbox adaptatif plus facile que simple. Comme auparavant, notre balisage ressemble à ceci:

Et maintenant regardons notre nouveau CSS:

/ * Grille * / .row (affichage: flex; flex-flux: enveloppe de rangée; marge: 0 -10px; Bottométrie de la marge: 10px;) .row: dernier enfant (marge-bas: 0;) (Rembourrage: 10px ; Largeur: 100%;) @media All et (min-largeur: 600px) (/ * Définir les largeurs de col * / .Col-2-3 (largeur: 66,66%;) .col-1-2 (largeur: 50% ;) .Col-1-3 (largeur: 33,33%;) .col-1-4 (largeur: 25%;) .Col-1-8 (largeur: 12,5%;))

Dans ce cas, la propriété d'affichage doit être définie sur Flex, ainsi que spécifier la propriété Flex-Flow. La définition complète et la description de ces propriétés sont disponibles dans la documentation MDN à Flexbox. Pour une demande de support, nous modifions simplement la largeur des colonnes et Flexbox fait le reste pour nous.

Conclusion

Nous avons examiné 4 façons de créer des grilles adaptatives sur CSS, chacune avec leurs avantages et leurs inconvénients. Il n'y a pas de moyen absolu de mettre en œuvre une action particulière, et je m'attrape souvent sur le fait qu'il existe des situations quand une façon est une meilleure qualité que l'autre, ou je dois combiner plusieurs options. Les méthodes 1 et 2 sont mes préférées et je les utilise souvent dans mes projets (le marquage principal selon la méthode 1 et les grilles adaptatives selon la méthode 2).

Comme mentionné précédemment, la troisième méthode présente ses avantages, mais je préfère utiliser des dispositions tabulaires uniquement lorsqu'elle est strictement nécessaire. La méthode 4 est belle et je ne peux pas attendre le jour où je peux le transférer à tous mes projets. Flexbox gagne de l'élan, mais il n'est supporté que dans IE10 et plus élevé. Il y a des polyfillas pour lui, mais je préfère faire sans eux. Bien que aujourd'hui, il existe des scénarios dans lesquels Flexbox sera une excellente solution (par exemple, dans navigateurs mobilesoù il n'y a pas d'IE).

Chacune de ces méthodes à l'échelle et à l'expansion facilement. En utilisant les idées présentées, vous pouvez facilement configurer votre propre disposition adaptative avec le placement souhaité pour les éléments maillés avec un CSS minimum. Module CSS Grids sur l'approche, mais prendra du temps, à condition que nous puissions l'utiliser. J'espère que vous avez aimé l'article, et vous n'êtes pas si effrayant d'utiliser le maillage CSS.

Développement de sites Web

À n'importe quel garant, devant lequel la prochaine tâche dans la couche de mise en page adaptative a besoin de grilles. Dans la plupart des cas, la bonne vieille bootstrap est prise et Div-i commence à apparaître dans HTML-KE avec des classes de COL-XS-6 COL-SM-4 COL-MD-3. Et tout semble aller bien et rapidement, mais dans cette approche se pose souvent de nombreux pièges. Dans cet article, nous examinerons ces pièges et nous jetons des tomates baisées. Considérons mon métier pour des grilles sans problème.

Problèmes

Grilles non standard

Donc, notre plaque d'immatriculation a très peu de temps, la mise en page brûle, tout doit être fait hier. Par conséquent, il prend une bottes de la CSS-Framework populaire et commence son travail. Et puis, au milieu du travail, il soudainement des pierres sur le bloc des bannières "5 d'affilée". Tous ceux qui ont travaillé avec Bootstrap sait que sa maille par défaut est 12 fois, donc 5 colonnes dans un certain nombre de grilles de bootstrap standard ne feront rien. Oui, bien sûr, dans le bootstrap, vous pouvez collecter une grille arbitraire, mais cette fois-ci est de perdre, de télécharger des dépendances, de recueillir un ki (et nous, écrivons sur Sass).

Pouvez-vous connecter une bibliothèque pour les grilles personnalisées? En général, il s'agit d'une bonne production, le seul moins de cette approche, que presque tous sont conçus soit pour une orthographe longue et fastidieuse @media (min-largeur :) () ou génèrent votre ensemble de classes, avec un BUNCH, probablement non nécessaire COL15-XS offset-3, qui tombera dans la finale CSS-KU.

Par conséquent, avec une probabilité élevée, la tablette va simplement écrire tous les styles manuellement (là, en principe, pas tant à écrire).

Très souvent, dans la grille de bootstrap standard, il n'y a pas assez de points d'arrêt supplémentaires, c'est-à-dire qu'il y a XS, SM, MD, LG - toutes à une largeur de 1200px. Qu'en est-il des grands moniteurs? Quelques points XL de points XL à 1600px et demandant un ensemble standard. Mais ce n'est pas non plus, et les mêmes solutions surviennent que dans le paragraphe précédent. Mais parce que points de contrôle Peut-être beaucoup - 320, 360, 640, 768, 992, 1200, 1600, 1900 ..

Redondance et multi-résistance

Et ici, nous abordons sans heurts le problème suivant. Imaginez que vous devez vous inscrire à chaque grille de tailles de bloc, vous obtiendrez quelque chose comme ceci:

N'est-ce pas trop? Ajouter ici Tirez / poussez-vous et visibles / cachés, puis vous pouvez commencer à devenir fou. Mais toutes ces classes sont épelées dans CSS, imaginez à quel point vous devez enregistrer des cours dans CSS pour toutes les combinaisons d'une grille de 60 fois!

Séparation de style du marquage

Tout déclencheur sait que les styles en ligne sont mauvais. Alors, pourquoi écrivons-nous dans les classes du marquage ce qui concerne les styles? Col-Xs-6, Visible-SM et Dieu interdisent le text-droit - ce sont tous des styles et si vous avez besoin de modifier les modifications déjà étirées sur la liste, il sera nécessaire de faire un problème que le mamelon devra demander la broche du backend pour changer le Col-SM 6 sur Col-SM-4.

Chevauchement des styles inutiles

Souvent, le cadre CSS ne connecte que pour le bien des grilles et des paires de petites fonctions, qui s'écoule ensuite dans des styles excessifs et une double taille de la finale du CSS. Par exemple, l'ensemble des bootstrap.min.css est connecté, puis les chansons et les coins arrondis de U.BTN, la commande .form-contrôle, etc., y compris: Survolez ,: Focus, sont amusants et zerny, notamment: plancher, : Focus: Premier-enfant. En conséquence, au lieu d'aider, le cadre commence à interférer. Sans parler souvent de fonctionnalités nécessaires, par type .glyphicon. Bien sûr, encore une fois, vous pouvez collecter Bootstrap de ce qui est nécessaire, mais c'est de nouveau l'heure.

Normes et style de code des autres

Supposons que le projeser a étudié BEM et a commencé à l'appliquer. Mais la nécessité d'utiliser Bootstrap dicte leurs exceptions - dans toute la classe des classes est écrite à travers un trait d'union, sans suivre les principes de BEM. Et ensuite, le problème du choix se pose - soit d'accepter le messager dans les noms des classes (composant de la composante de BTN-Block désactivé__btn__tn_disabled), ou de lancer toujours une bootstrap.

Méthodes obsolètes

Comme vous le savez, les grilles de bootstrap 3 sont basées sur Float-Ah. Ce qui provoque souvent des problèmes, l'une des plus fréquentes - différentes hauteur des blocs, à la suite de laquelle une belle grille "pause". Assez pour utiliser le but float-s non destiné, presque éteint tous les navigateurs qui ne savent pas comment Flexbox!

SUSY! - Est-ce une sortie?

Dans la recherche de solutions de tous les problèmes énumérés ci-dessus, je suis sur un magnifique cadre de grille Susy! En général, très bon. Mais je manquais de vitesse, depuis Susy! Offert pour décrire les colonnes pour chaque point d'arrêt séparément:

.Col (@media (min-largeur: 768px) (@inclu Gallery (4 sur 12);) @Media (min-largeur: 1200px) (@inclu Gallery (3 sur 12);))

C'est-à-dire SUSY! Il suppose que vous allez traiter avec vous-même des points d'arrêt. De plus, SUSY! Il n'écris lui-même pas pour vous afficher: Flex for, lignes, vous n'avez pas besoin d'oublier de les prescrire vous-même. Les tirettes entre les haut-parleurs de celui-ci sont définis que par rapport à la relative (faire des pixels fixes ne fonctionnera pas). En outre, il a récemment appris Flex, et avant cela, il a construit des filets sur flotteur et: Nth-enfant (). En général, Susy! C'est bon, mais j'aimerais que la vitesse et la description lumineuse des grilles pour tous les points d'arrêt, car il était avec Bootstrap.

La recherche sur d'autres systèmes de grille n'a pas non plus donné de résultat particulier - tous les ailleurs sur la manière dont SUSY! Oubliez les points d'arrêt ou sur le chemin de la bootstrap, fournissant un ensemble de classes générées pour les mailles HTML.

Bâtiment de vélo

Ainsi, il a été décidé d'écrire quelque chose le mien, en conséquence, la grille rapide est née. Il aussi, comme Susy, construit sur Sass. Quels avantages majeurs fournit-il par rapport à d'autres solutions, en particulier, avec SUSY!? Tout d'abord, au détriment d'un code plus petit, prenez un exemple de bootstrap standard:

En utilisant une grille rapide, une telle grille est très facile à décrire:

@import "~ Fast-Grid / Fast-Grid"; .row (@include-grille-rangée ();) .col (@include Grid-col (6 4 3 2);)

Passons maintenant à nos lacunes et voyons comment la grille rapide résout tous ces problèmes.

Grilles non standard

@import "~ Fast-Grid / Fast-Grid"; .Cols ($ grille: (Gap: 5px); @include-Row-Row-Row ($ grille); & __ élément (@include Grid-col (12 6 null (1 sur 5), $ grille);)

La nécessité de votre point d'arrêt

@import "~ Fast-Grid / Fast-Grid"; .Cols ($ grille: (points d'arrêt: (xxs: 0px, xs: 360px, sm: 640px, md: 960px, lg: 1200px, xl: 1600px), colonnes: 60); @include-rangée ($ grille); & __ article (@include Grid-col ((xxs: 60, XS: 30, SM: 20, MD: 15, LG: 12), $ grille);));));)

Redondance et coiffage de vérification / coiffage

fast-Grid est un cadre de grille destiné à être utilisé dans CSS et non en HTML basé sur les ensembles génériques de classes. Grâce à cela, le balisage devient séparé des styles, ce qui est bénéfique pour un soutien supplémentaire. De plus, en raison de cela, il n'est pas nécessaire de générer une série de classes auxiliaires (.Col-XS-Push-4, etc.), qui sont principalement utilisées.

Chevauchement des styles inutiles

Étant donné que la grille rapide est un ensemble de mixin, il ne génère aucune des règles en CSS. Par conséquent, ici, vous ne rencontrerez pas le fait que le cadre styliste les éléments que vous n'avez pas besoin. Et en général, ce n'est que des grilles et rien de plus.

Normes et style de code des autres

la grille rapide est le mixin-s que vous devez utiliser à l'intérieur le vôtre classes, avec les noms que vous préférez vous-même. Amour bem? Aucun problème!

Méthodes obsolètes

La flexbox par défaut est utilisée, qui ouvre de nombreuses fonctionnalités et résout les problèmes de flotteur classique. Par exemple, vous pouvez facilement modifier l'ordre des colonnes.

Dans l'exemple ci-dessous, nous apportons SageBar sous le contenu principal de version mobileEt nous en font le premier bloc sur de grands écrans.

Il serait possible d'atteindre enfin avec tirage / poussée pour flotter, mais c'est très béquille.

Conclusion

En général, la tâche fixée pour moi était terminée - maintenant, les grilles ne me font plus aucun problème et que la mise en page va rapidement et facilement. Vous pouvez en savoir plus sur les fonctionnalités de grille Fast-Grid dans le référentiel et examiner les exemples:

Utilisez-vous toujours Bootstrap? Ensuite, nous allons à vous!

Mots clés:

• cSS.
• tOUPET.
• grille.

Ajouter des balises