Floats to Flexbox & Grid –

Il peut être difficile de réaliser des maillages de réseau complexes, mais flexibles et réactifs. Diverses techniques ont évolué au fil des ans, mais la plupart, comme étaient plutôt des options de conception robustes.

La plupart de ces hacks ont été construits sur le flottant CSS propriété. Lorsque le module flexbox layout a été introduit dans la liste des options de propriétés display un nouveau monde d'options est devenu possible. Maintenant, vous pouvez non seulement définir la direction dans laquelle le conteneur va empiler les articles, mais aussi les envelopper, les aligner (éléments et lignes), les ordonner, les réduire, etc. dans un conteneur.

commencé à créer leurs propres combinaisons de règles pour toutes sortes de dispositions. La flexibilité a régné. Cependant, flexbox a été conçu pour traiter des mises en page unidimensionnelles: une ligne ou une colonne. La disposition de grille CSS, en revanche, autorisait la disposition bidimensionnelle des lignes et des colonnes .

Amélioration progressive et dégradation gracieuse

Il est difficile de créer un site Web prenant en charge le navigateur de chaque utilisateur. Deux options sont couramment utilisées – «dégradation progressive» et «amélioration progressive».

Une dégradation harmonieuse garantit qu'un site Web continue à fonctionner même lorsque quelque chose se brise. Par exemple, float: right peut échouer si un élément est trop grand pour l’écran, mais qu’il passe au prochain espace vide pour que le bloc reste utilisable.

L’amélioration progressive approche opposée. La page commence avec des fonctionnalités minimales et des fonctionnalités sont ajoutées lorsqu'elles sont prises en charge. L'exemple ci-dessus peut utiliser une requête multimédia CSS pour vérifier que l'écran est une largeur minimale avant de permettre à un élément de flotter.

Lorsqu'il s'agit de dispositions de grille, chaque navigateur détermine l'apparence de ses composants. Dans cet article, vous allez comprendre avec de vrais échantillons comment faire évoluer certains contenus Web d’une ancienne stratégie vers une nouvelle. Plus précisément, comment améliorer progressivement le modèle, de la mise en page à base flottante à la flexbox, puis à la grille CSS, respectivement.

Votre ancienne disposition flottante pour une page

Consultez la page HTML suivante:

  

     contenu de l'article
  

  

C'est un petit exemple courant de disposition de grille que vous pouvez avoir dans une page Web: deux div partageant le même conteneur ( body ).

Le CSS suivant peut être utilisé dans tous les exemples que nous allons créer pour définir le style du corps:

 body {
  font-family: Segoe UI;
  style de police: normal;
  poids de la police: 400;
  taille de la police: 1rem;
}

Plus, l'extrait CSS pour chacun de nos divs, permettant l'effet flottant:

 main {
  largeur: 100%;
}

principal, article, de côté {
  border: 1px solide # fcddd1;
  rembourrage: 5px;
  float: à gauche;
}

article {
  couleur d'arrière-plan: # fff4dd;
  largeur: 74%;
}

de côté {
  largeur: 24%;
}

Vous pouvez voir l'exemple en action ici:

Voir le stylo Exemple de mise en page flottante par SitePoint ( @SitePoint ) sur CodePen . ] Vous pouvez faire flotter autant d’éléments que vous le souhaitez, les uns après les autres. Cependant, cette stratégie a quelques inconvénients:

• Il est difficile de gérer les hauteurs des éléments du conteneur
• Le centrage vertical, si nécessaire, peut être difficile à gérer
• selon le contenu que vous avez à l'intérieur des éléments avec les propriétés CSS de chaque conteneur interne), le navigateur peut envelopper les éléments sur la ligne libre suivante et casser la mise en page.

Une solution est l'affichage : table layout:

 main {
  display: table;
}

principal, article, de côté {
  afficher: cellule de table;
}

Cependant, l'utilisation de display: table devient moins pratique à mesure que vos dispositions deviennent plus complexes et que l'utilisation de mises en page réactives peut entraîner des problèmes. display: le tableau fonctionne mieux avec de petites sections de page que dans les sections principales.

Flexbox Approach

Le module de boîte flexible connu sous le nom de flexbox est un modèle de mise en page plus récent capable de répartir l'espace et d'aligner puissamment les éléments d'un conteneur (la boîte) d'une manière unidimensionnelle. Sa nature unidimensionnelle ne vous empêche toutefois pas de concevoir des mises en page multidimensionnelles (lignes et colonnes), mais la flexbox peut ne pas aboutir à un empilement fiable des lignes.

présente une série d'avantages par rapport à float:

• alignement vertical et égalité de hauteur pour les éléments du conteneur sur chaque ligne encapsulée
• le conteneur (boîte) peut augmenter / diminuer en fonction de l'espace disponible et déterminer s'il s'agit d'une colonne ou une ligne
• indépendance de la source – ce qui signifie que l'ordre des éléments n'a pas d'importance, ils doivent juste être dans la boîte.

Pour lancer une stratégie de formatage Flexbox, il suffit de définir le CSS affiche la propriété avec une valeur flex :

 main {
  largeur: 100%;
  affichage: flex;
}

principal, article, de côté {
  border: 1px solide # fcddd1;
  rembourrage: 5px;
  float: à gauche;
}

article {
  couleur d'arrière-plan: # fff4dd;
  largeur: 74%;
}

de côté {
  largeur: 24%;
}

L'image suivante montre le résultat:

Voici un exemple réel:

Voir le stylo Exemple de présentation Flexbox par SitePoint ( @SitePoint ) sur CodePen .

Mise en forme de la grille CSS

La disposition de la grille CSS suit de près celle de la Flexbox. Autrement dit, si vous avez besoin de concevoir une mise en page qui traite à la fois des lignes et des colonnes, la disposition de la grille conviendra probablement mieux. Il a les mêmes facteurs d'alignement et de répartition de l'espace que Flexbox, mais agit maintenant directement sur les deux dimensions de votre conteneur (boîte). Par rapport à la propriété float, elle offre encore plus d'avantages: disposition des éléments simples, alignement, contrôle ligne / colonne / cellule, etc.

Travailler avec CSS Grid est aussi simple que de changer la propriété display de votre élément conteneur à la grille . Dans le conteneur, vous pouvez également créer des colonnes et des lignes avec des div, par exemple. Considérons un exemple de page HTML avec quatre divs de conteneur internes.

En ce qui concerne les définitions CSS, commençons par la grille conteneur div:

 div.container {
  affichage: grille;
  colonnes grille-modèle: 24% 75%;
  grille-modèle-lignes: 200px 300px;
  grille-colonne-écart: 15px;
  écart de rangée: 15px;
}

La ​​propriété grid-template-columns définit la même configuration que précédemment: deux colonnes de la grille occupant respectivement 24% et 75% de la largeur totale du conteneur. Les grid-template-rows font la même chose, appliquant respectivement 200px et 300px en hauteur pour les première et deuxième lignes.

Utiliser les propriétés grid-column-gap et grille-rangée-écart pour allouer de l'espace autour des éléments de la grille.

En ce qui concerne l'application des propriétés d'alignement de la grille à des cellules spécifiques, jetons un coup d'oeil:

 .div1 {
  couleur d'arrière-plan: # fff4dd;
  align-self: fin;
  justifier soi-même: fin;
}

.div4 {
  align-self: centre;
}

Pour le div de la classe div1 vous alignez et justifiez-le à la fin de de la cellule de la grille. Les propriétés align-self et Justifie-moi sont valides pour tous les éléments flexibles de la mise en page, y compris, dans ce cas, les cellules de la grille. div4 n'a défini que l'alignement centré, pour que vous puissiez vérifier la différence entre les deux.

Voici comment les éléments sont positionnés maintenant:

consultez l'exemple de disposition de grille finale ici:

Voir le stylo Exemple de disposition de grille par SitePoint ( @SitePoint ) sur CodePen .

offrent également un support natif pour les inspections de disposition de grille, ce qui est idéal pour voir comment il gère le mécanisme de grille en interne. Essayons notre exemple de grille sur Firefox avec son inspecteur de grille disponible via Firefox DevTools. Pour l'ouvrir, cliquez avec le bouton droit sur l'élément conteneur et dans la vue Règles du volet CSS, recherchez et cliquez sur l'icône de grille juste après l'affichage : grid :

Cela va basculer le surligneur Grid. Vous pouvez également contrôler davantage de paramètres d'affichage dans la vue de la sous-fenêtre CSS, comme les numéros de ligne ou les noms de zones:

] Dans cet exemple suivant, nous allons utiliser une page de blog comme référence pour mettre à niveau une page totalement flottante vers une disposition CSS Grid, en explorant la façon dont l’ancienne disposition peut être complètement transformée en une présentation qui englobe à la fois la flexbox. et grille.

Dans les mises à jour suivantes, nous garderons un œil sur les anciens navigateurs qui ne prennent pas en charge la grille Flexbox ou CSS, ainsi que sur le comportement du blog sur les versions mobiles. Ceci est l'apparence de notre page de blog totalement basée sur divs et la propriété float CSS:

Et ceci un exemple de l'exemple:

Pen Mise en page de blog avec Float par SitePoint ( @SitePoint ) sur CodePen .

Notez que la structure HTML est commune à toute personne déjà familiarisée avec les tags sémantiques: un div (le conteneur) contenant tous les éléments internes qui composeront la mise en page finale en fonction de qui est qui flottant.

Il est essentiellement constitué d'un simple en-tête avec un menu qui définit ses éléments ( liens) sera affiché et aligné:

 nav.menu {
  largeur: 98%;
}

ul {
  style de liste: aucun;
  remplissage: 0px;
  marge: 0px;
}

.la gauche {
  float: à gauche;
}

.droite {
  Flotter à droite;
}

une {
  rembourrage: 4px 6px;
}

Le contenu de la page est divisé en deux parties, la section et de côté elements:

 main {
  float: à gauche;
  largeur: 74%;
}

de côté {
  float: à gauche;
  largeur: 24%;
  margin-left: 15px;
  margin-bottom: 15px;
}

à part h2 {
  text-align: center;
}

Rien d'exceptionnel, il suffit de laisser flotter les divs et de déterminer la largeur maximale de chacun au-dessus de toute la largeur. Notez également la nécessité d'effacer ( effacer ) les choses chaque fois que nous devons désactiver l'effet flottant après un en-tête div:

: after {
  contenu: "";
  display: table;
  clarifier les deux;
}

La ​​fin du CSS apporte une règle @media qui divisera la barre latérale en la colonne suivante lorsque la page est ouverte dans des périphériques à petit écran. La fin du HTML apporte un pied de page simple avec un texte simple.

Remarque: le début du HTML inclut le HTML5 script Shiv afin de permettre l'utilisation d'éléments de sectionnement HTML5 dans Internet Explorer hérité.

Comme nous l'avons vu précédemment, flexbox fonctionne mieux avec des mises en page unidimensionnelles comme un menu horizontal. La même structure de menu pourrait être améliorée à celle-ci:

 nav.menu {
  largeur: 98%;
}

nav.menu ul {
  affichage: flex;
}

nav.menu ul> li: dernier enfant {
  margin-left: auto;
}

L'utilisation de la propriété flexbox désactive automatiquement le float pour les nouveaux navigateurs. Cependant, comme nous avons conservé les anciennes configurations CSS pour la propriété float le float s'appliquera quand un navigateur ne supporte pas la flexbox.

En même temps, affiche: flex a été ajouté afin de disposer le menu en utilisant flexbox avec le margin-left: auto au dernier élément du menu. Cela garantira que cet élément sera poussé à droite de la mise en page, en les séparant en groupes distincts.

Amélioration des zones de la grille

La grille CSS nous donne plus de flexibilité pour le placement des éléments internes. Tout comme Flexbox est un choix parfait pour un conteneur horizontal (le menu), une grille serait parfaite pour une disposition de blog en deux dimensions qui se divise essentiellement en trois parties:

[19659003] La fonction Grid Area area consiste en la combinaison de deux propriétés: grid-template-areas et grid area . Le premier définit la façon dont la hauteur et la largeur de la mise en page seraient divisées en groupes en plaçant explicitement les noms de chaque groupe tels qu’ils étaient dans la mise en page finale:

 div.container {
  largeur: 100%;
  affichage: grille;
  écart de grille: 20px;
  zones de grille-modèle:
    "en-tête d'en-tête"
    "barre latérale du contenu"
    "footer footer"
}

Nous divisons ici l’ensemble de l’espace conteneur en trois lignes et trois colonnes. Les noms des zones répétés à côté de la définition indiquent combien d'espace chacun occupera verticalement et horizontalement.

Ensuite, nous pouvons utiliser la deuxième propriété en définissant pour chaque zone de la grille la zone de grille respective value:

 header {
  zone de grille: en-tête;
}

principale {
  zone de grille: contenu;
  / * autres propriétés * /
}

de côté {
  zone de la grille: barre latérale;
  / * autres propriétés * /
}

bas de page {
  zone de grille: pied de page;
  / * autres propriétés * /
}

Tout comme avec la flexbox, les éléments de grille désactivent automatiquement les déclarations flottantes dans les navigateurs prenant en charge la grille CSS. Le reste des propriétés reste le même (le flottant s'appliquera quand un navigateur ne supporte pas la grille).

Vous pouvez voir cet exemple en cours d'exécution ici:

Voir le stylo Mise en page du blog avec grille CSS Zones par SitePoint ( @SitePoint ) sur CodePen .

Amélioration des modèles de grille

La propriété grid-template est également très utile lorsque Nous avons besoin de définir un modèle qui suivra un modèle pour les définitions de notre grille.

Jetons un coup d'œil au .container CSS:

 div.container {
  largeur: 100%;
  affichage: grille;
  écart de grille: 20px;
  grid-template-columns: auto auto automatique;
}

Ici, nous disons essentiellement que la taille des colonnes est déterminée par la taille du conteneur et la taille du contenu des éléments de la colonne.

Ensuite, chacune de nos zones de grille devra adapter:

 header {
  colonne de grille: 1/4;
}

section {
  colonne de grille: 1/3;
  / * autres propriétés * /
}

de côté {
  colonne de grille: 3/4;
  / * autres propriétés * /
}

bas de page {
  colonne de grille: 1/4;
  / * autres propriétés * /
}

Ici, grid-column: 1/4 indique au navigateur de démarrer une colonne sur la première piste et de terminer sur la quatrième piste. Les pistes sont les séparateurs entre chaque cellule de la grille, donc cet élément occuperait les cellules un à trois:

] Voir le stylo Mise en page de blogue avec des modèles de grille CSS par SitePoint ( @SitePoint ) sur CodePen .

Vous pouvez maintenant tester le navigateur

En savoir plus sur la mise en page de la grille CSS

Pour plus d'informations sur la grille CSS, reportez-vous à la section Présentation de la grille CSS de SitePoint. consultez le site CSS Flexbox Introduction de SitePoint.

Mozilla a également fourni un excellent article sur Disposition de grille CSS et amélioration progressive . De bonnes études!

Diogo travaille comme développeur Java chez Fulcrum Worldwide et a travaillé pour des sociétés telles que Indra Company, Atlantic Institute et Ebix LA. Il est également formateur Android, intervenant lors d'événements sur le monde Java et mobile et consultant chez DevMedia.