Construire une disposition Trello avec la grille CSS et Flexbox

Les plats clés

• Le tutoriel montre comment implémenter une disposition de base d'une carte Trello à l'aide de la grille CSS et du Flexbox, fournissant une solution réactive et CSS uniquement. La disposition se compose d'une barre d'application, d'une barre de carte et d'une section contenant des listes de cartes.
• Le tutoriel explique comment utiliser une grille 3 × 1 pour construire la structure de mise en page, les deux premières lignes ayant des hauteurs fixes et la troisième ligne couvrant le reste de la hauteur de la fenêtre disponible. Il utilise également des unités de fenêtre pour s'assurer que le conteneur est toujours aussi grand que la fenêtre du navigateur.
• Le tutoriel montre comment utiliser un conteneur complet de lignes à ligne de vue de la fenêtre de la fenêtre de la fenêtre complète pour formater les listes de cartes. Il montre également comment utiliser la propriété Overflow-X pour afficher une barre de défilement horizontale en bas de l'écran lorsque les listes ne correspondent pas à la largeur de la fenêtre.
• Le tutoriel suggère que la contrainte maximale-hauteur soit appliquée à la liste intérieure non ordonnée pour gérer la hauteur d'une liste. Il explique également comment rendre la liste aussi haute que son conteneur parent, et comment utiliser la propriété Overflow-y pour afficher la barre de défilement des cartes uniquement en cas de besoin.

Dans ce tutoriel, je vous guiderai à travers une implémentation de la disposition de base d'un écran de la carte Trello (voir l'exemple ici). Il s'agit d'une solution réactive et CSS uniquement, et seules les caractéristiques structurelles de la disposition seront développées.

Pour un aperçu, voici une démo de codepen du résultat final.

Outre la disposition de la grille et Flexbox, la solution utilise des unités CALC et de la fenêtre. Pour rendre le code plus lisible et efficace, je profiterai également des variables SASS.

Aucune repli n'est fournie, alors assurez-vous d'exécuter le code dans un navigateur de support. Sans plus tarder, plongeons, développons les composants de l'écran un par un.

La disposition de l'écran

L'écran d'une carte Trello se compose d'une barre d'application, d'une barre de carte et d'une section contenant les listes de cartes. Je vais construire cette structure avec le squelette de balisage suivant:

<span><span><span><div</span> class<span>="ui"</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar app"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar board"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><div</span> class<span>="lists"</span>></span>
</span>    <span><span><span><div</span> class<span>="list"</span>></span>
</span>      <span><span><span><header</span>></span>...<span><span></header</span>></span>
</span>      <span><span><span><ul</span>></span>
</span>        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>        ...
        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>      <span><span><span></ul</span>></span>
</span>      <span><span><span><footer</span>></span>...<span><span></footer</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Cette disposition sera réalisée avec une grille CSS. Plus précisément, une grille 3 × 1 (c'est-à-dire une colonne et trois lignes). La première ligne sera pour la barre d'application, la seconde pour la barre du conseil d'administration et la troisième pour l'élément .lists.

Les deux premières lignes ont chacune une hauteur fixe, tandis que la troisième ligne s'étendra sur le reste de la hauteur de la fenêtre disponible:

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

Les unités de la fenêtre s'assurent que le conteneur .ui sera toujours aussi grand que la fenêtre du navigateur.

Un contexte de formatage de grille est affecté au conteneur, et les lignes et colonnes de grille spécifiées ci-dessus sont définies. Pour être plus précis, seules les lignes sont définies car il n'est pas nécessaire de déclarer la colonne unique. Le dimensionnement des lignes se fait avec quelques variables SASS pour la hauteur des barres et l'unité FR pour faire en sorte que la hauteur de l'élément .lists s'étend sur le reste de la hauteur de la fenêtre disponible.

La section des cartes répertorie

Comme mentionné, la troisième ligne de la grille d'écran héberge le conteneur des listes de cartes. Voici le contour de son balisage:

<span><span><span><div</span> class<span>="ui"</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar app"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar board"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><div</span> class<span>="lists"</span>></span>
</span>    <span><span><span><div</span> class<span>="list"</span>></span>
</span>      <span><span><span><header</span>></span>...<span><span></header</span>></span>
</span>      <span><span><span><ul</span>></span>
</span>        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>        ...
        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>      <span><span><span></ul</span>></span>
</span>      <span><span><span><footer</span>></span>...<span><span></footer</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

J'utilise un conteneur complet de lignes de ligne de vue de la fenêtre de la fenêtre pour formater les listes:

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

L'attribution de la valeur automatique à la propriété Overflow-X indique au navigateur d'afficher une barre de défilement horizontale en bas de l'écran lorsque les listes ne rentrent pas dans la largeur fournie par la fenêtre.

La propriété Flex Shorthand est utilisée sur les éléments Flex pour rendre les listes Rigid . La valeur automatique pour Flex-Basis (utilisée dans le raccourci) demande au moteur de disposition de lire la taille de la propriété de la largeur de l'élément. >

Ensuite, je devrai ajouter une séparation horizontale entre les listes. Si une marge droite sur les listes est définie, la marge après la dernière liste d'une carte avec débordement horizontal n'est pas rendue. Pour résoudre ce problème, les listes sont séparées par une marge gauche et l'espace entre la dernière liste et le bord de la fenêtre droite est géré en ajoutant un :: après un pseudo-élément à chaque élément .lists. Le flex-shrink par défaut: 1 doit être remplacé sinon le pseudo-élément «absorbe» tout l'espace négatif et il disparaît.

Notez que sur Firefox La liste des cartes

Chaque liste de cartes est composée d'une barre d'en-tête, d'une séquence de cartes et d'une barre de pied de page. L'extrait HTML suivant capture cette structure:

<span><span><span><div</span> class<span>="lists"</span>></span>
</span>  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span>  ...
  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

La tâche cruciale ici est de gérer la hauteur d'une liste. L'en-tête et le pied de page ont des hauteurs fixes (pas nécessairement égales). Ensuite, il existe un nombre variable de cartes, chacune avec une quantité variable de contenu. Ainsi, la liste se développe et se rétrécit verticalement lorsque des cartes sont ajoutées ou supprimées.

mais la hauteur ne peut pas croître indéfiniment, elle doit avoir une limite supérieure qui dépend de la hauteur de l'élément .lists. Une fois cette limite atteinte, je veux qu'une barre de défilement verticale semble permettre l'accès aux cartes qui débordent de la liste.

Cela ressemble à un travail pour les propriétés max-hauteur et à débordement. Mais si ces propriétés sont appliquées au conteneur racine .List, alors, une fois que la liste atteint sa hauteur maximale, la barre de défilement apparaît pour tous les éléments de liste, l'en-tête et le pied de page inclus. L'illustration suivante montre la mauvaise barre latérale à gauche et la bonne à droite:

Alors, appliquons plutôt la contrainte maximale-hauteur à l'intérieur

. Quelle valeur doit être utilisée? Les hauteurs de l'en-tête et du pied de page doivent être soustraites de la hauteur du conteneur parent de liste (.lists):

<span><span><span><div</span> class<span>="ui"</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar app"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar board"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><div</span> class<span>="lists"</span>></span>
</span>    <span><span><span><div</span> class<span>="list"</span>></span>
</span>      <span><span><span><header</span>></span>...<span><span></header</span>></span>
</span>      <span><span><span><ul</span>></span>
</span>        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>        ...
        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>      <span><span><span></ul</span>></span>
</span>      <span><span><span><footer</span>></span>...<span><span></footer</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

mais il y a un problème. La valeur en pourcentage ne fait pas référence aux listes mais au parent de l'élément

, .List, et cet élément n'a pas de hauteur définie et ce pourcentage ne peut donc pas être résolu. Cela peut être corrigé en rendant .List aussi haut que .lists:

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

de cette façon, puisque .List est toujours aussi haut que .lists, quel que soit son contenu, sa propriété en couleur d'arrière-plan ne peut pas être utilisée pour la couleur de l'arrière-plan de la liste, mais il est possible d'utiliser ses enfants (en-tête, pied de page, cartes ) à cet effet.

Un dernier ajustement à la hauteur de la liste est nécessaire, pour tenir compte d'un peu d'espace ($ GAP) entre le bas de la liste et le bord inférieur de la fenêtre:

<span><span><span><div</span> class<span>="lists"</span>></span>
</span>  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span>  ...
  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Un autre montant d'épaisseur de la barre de défilement $ est soustrait pour empêcher la liste de toucher la barre de défilement horizontale de l'élément. En fait, sur Chrome, cette barre de défilement «grandit» à l'intérieur de la boîte .lists. C'est-à-dire que la valeur à 100% fait référence à la hauteur des listes.

sur Firefox à la place, la barre de défilement est «annexée» à l'extérieur de la hauteur. Cette soustraction ne serait donc pas nécessaire. En conséquence, lorsque la barre de défilement est visible, sur Firefox, l'espace visuel entre la bordure inférieure d'une liste qui a atteint sa hauteur maximale et le haut de la barre de défilement est légèrement plus grand.

Voici les règles CSS pertinentes pour ce composant:

<span>.lists {
</span><span>  <span>display: flex;</span>
</span><span>  <span>overflow-x: auto;</span>
</span>  <span>> * {
</span><span>    <span>flex: 0 0 auto; // 'rigid' lists</span>
</span><span>    <span>margin-left: $gap;</span>
</span>  <span>}
</span><span>  <span>&::after {</span>
</span><span>    <span>content: '';</span>
</span><span>    <span>flex: 0 0 $gap;</span>
</span>  <span>}
</span><span>}</span>

Comme mentionné, la couleur d'arrière-plan de la liste est rendue en attribuant la valeur $ list-bg-coulor à la propriété de couleur arrière de chaque. Overflow-y montre la barre de défilement des cartes uniquement en cas de besoin. Enfin, un style simple est ajouté à l'en-tête et au pied de page.

touches de finition

Le HTML pour une seule carte se compose simplement d'un élément de liste:

<span><span><span><div</span> class<span>="list"</span>></span>
</span>  <span><span><span><header</span>></span>List header<span><span></header</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>    ...
    <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span>  <span><span><span><footer</span>></span>Add a card...<span><span></footer</span>></span>
</span><span><span><span></div</span>></span></span>

ou, si la carte a une image de couverture:

<span>ul {
</span><span>  <span>max-height: calc(100% - #{$list-header-height} - #{$list-footer-height});</span>
</span><span>}</span>

Il s'agit du CSS pertinent:

<span><span>.list</span> {
</span>  <span>height: 100%;
</span><span>}</span>

Après avoir défini un arrière-plan, un rembourrage et des marges inférieures, la disposition de l'image de couverture est prête. La largeur de l'image doit retirer la carte entière du bord de rembourrage gauche au bord du rembourrage droit:

<span>.list {
</span><span>  <span>height: calc(100% - #{$gap} - #{$scrollbar-thickness});</span>
</span><span>}</span>

Ensuite, les marges négatives sont affectées pour aligner l'image horizontalement et verticalement:

<span>.list {
</span><span>  <span>width: $list-width;</span>
</span><span>  <span>height: calc(100% - #{$gap} - #{$scrollbar-thickness});</span>
</span>
  <span>> * {
</span><span>    <span>background-color: $list-bg-color;</span>
</span><span>    <span>color: #333;</span>
</span><span>    <span>padding: 0 $gap;</span>
</span>  <span>}
</span>
  <span>header {
</span><span>    <span>line-height: $list-header-height;</span>
</span><span>    <span>font-size: 16px;</span>
</span><span>    <span>font-weight: bold;</span>
</span><span>    <span>border-top-left-radius: $list-border-radius;</span>
</span><span>    <span>border-top-right-radius: $list-border-radius;</span>
</span>  <span>}
</span>
  <span>footer {
</span><span>    <span>line-height: $list-footer-height;</span>
</span><span>    <span>border-bottom-left-radius: $list-border-radius;</span>
</span><span>    <span>border-bottom-right-radius: $list-border-radius;</span>
</span><span>    <span>color: #888;</span>
</span>  <span>}
</span>
  <span>ul {
</span><span>    <span>list-style: none;</span>
</span><span>    <span>margin: 0;</span>
</span><span>    <span>max-height: calc(100% - #{$list-header-height} - #{$list-footer-height});</span>
</span><span>    <span>overflow-y: auto;</span>
</span>  <span>}
</span><span>}</span>

La troisième valeur de marge positive prend en charge l'espace entre l'image de couverture et le texte de la carte.

Enfin, j'ai ajouté un contexte de formatage flexible aux deux barres qui occupent les premières lignes de la disposition de l'écran. Mais ils ne sont esquissés que. N'hésitez pas à créer votre propre mise en œuvre de cela en développant la démo.

Conclusion

Ce n'est qu'un moyen possible d'accomplir cette conception et il serait intéressant de voir d'autres approches. De plus, ce serait bien de finaliser la mise en page, par exemple en terminant les deux barres d'écran.

Une autre amélioration potentielle pourrait être la mise en œuvre de barres de défilement personnalisées pour les listes de cartes.

Donc, n'hésitez pas à alimenter la démo et à publier un lien dans la discussion ci-dessous.

Questions fréquemment posées (FAQ) sur la construction d'une disposition Trello avec la grille CSS et Flexbox

Comment puis-je créer une disposition de type Trello à l'aide de CSS Grid et Flexbox?

Création d'une disposition de type Trello à l'aide de la grille CSS et Flexbox implique plusieurs étapes. Tout d'abord, vous devez créer une structure HTML de base pour votre disposition. Cela comprend la création d'un conteneur pour votre carte et des conteneurs individuels pour vos listes et cartes. Ensuite, vous appliquez la grille CSS au conteneur de la carte pour créer une disposition de grille. Vous pouvez ensuite utiliser Flexbox pour organiser vos listes et cartes dans leurs conteneurs respectifs. Cela vous permet de créer une disposition réactive et flexible qui peut accueillir n'importe quel nombre de listes et de cartes.

Quels sont les avantages de l'utilisation de la grille CSS et du Flexbox pour créer une disposition de type Trello?

La grille CSS et Flexbox offrent plusieurs avantages pour créer une disposition de type Trello. Ils vous permettent de créer une disposition réactive qui peut s'adapter à différentes tailles d'écran et orientations. Ils fournissent également un système de mise en page flexible qui peut accueillir n'importe quel nombre de listes et de cartes. De plus, ils offrent des contrôles d'alignement et de distribution puissants, ce qui facilite la création d'une disposition propre et organisée.

Puis-je utiliser CSS Grid et Flexbox pour créer d'autres types de dispositions?

Oui, CSS Grid et Flexbox sont des systèmes de disposition polyvalents qui peuvent être utilisés pour créer une grande variété de dispositions. Ils peuvent être utilisés individuellement ou en combinaison pour créer des dispositions complexes et réactives. Que vous créiez une disposition simple à deux colonnes ou une disposition de grille complexe, la grille CSS et Flexbox peuvent fournir les outils dont vous avez besoin.

Comment puis-je rendre ma mise en page de type Trello en utilisant la grille CSS et Flexbox?

Rendre votre disposition de type Trello réactive à l'aide de la grille CSS et Flexbox implique l'utilisation de requêtes multimédias pour ajuster votre disposition en fonction de la taille de l'écran. Vous pouvez utiliser les requêtes multimédias pour modifier le nombre de colonnes de grille ou ajuster les propriétés flexibles de vos listes et cartes. Cela permet à votre disposition de s'adapter à différentes tailles d'écran et orientations, garantissant une expérience utilisateur cohérente sur tous les appareils.

Comment puis-je ajouter de l'interactivité à ma mise en page de type Trello?

Ajout d'interactivité à votre La disposition de type Trello peut être réalisée en utilisant JavaScript. Vous pouvez utiliser JavaScript pour ajouter des fonctionnalités de glisser-déposer à vos cartes, permettant aux utilisateurs de déplacer des cartes entre les listes. Vous pouvez également utiliser JavaScript pour ajouter d'autres fonctionnalités interactives, telles que la possibilité d'ajouter de nouvelles cartes ou listes.

Y a-t-il des limites à l'utilisation de la grille CSS et du Flexbox pour créer une disposition de type Trello?

Alors que CSS Grid et Flexbox sont de puissants systèmes de disposition, ils ont certaines limites. Par exemple, ils peuvent ne pas être entièrement pris en charge dans les navigateurs plus âgés. De plus, bien qu'ils fournissent un système de disposition flexible, ils peuvent ne pas convenir à tous les types de dispositions. Il est important de comprendre ces limitations et de considérer des solutions alternatives si nécessaire.

Comment puis-je personnaliser l'apparence de ma disposition de type Trello?

Personnalisation de l'apparence de votre disposition de type Trello peut être effectuée Utilisation de CSS. Vous pouvez utiliser CSS pour modifier les couleurs, les polices et autres éléments visuels de votre disposition. Vous pouvez également utiliser CSS pour ajouter des effets, tels que des ombres ou des transitions, pour améliorer l'expérience utilisateur.

Puis-je utiliser CSS Grid et Flexbox pour créer une disposition de type Trello sans aucune expérience préalable?

Bien que CSS Grid et Flexbox soient des fonctionnalités CSS relativement avancées, elles peuvent être apprises avec une étude et une pratique. Il existe de nombreuses ressources disponibles en ligne, y compris des tutoriels et des guides, qui peuvent vous aider à apprendre à utiliser ces fonctionnalités. Avec du temps et des efforts, vous pouvez créer une disposition de type Trello à l'aide de la grille CSS et du Flexbox, même si vous êtes un débutant.

Comment puis-je résoudre les problèmes avec ma disposition de type Trello?

Les problèmes de dépannage avec votre disposition de type Trello peuvent être effectués à l'aide d'outils de développeur dans votre navigateur. Ces outils vous permettent d'inspecter votre HTML et CSS, ce qui facilite l'identification et la résolution des problèmes. Vous pouvez également utiliser des forums ou des communautés en ligne, tels que Stack Overflow, pour poser des questions et obtenir de l'aide d'autres développeurs.

Comment puis-je optimiser ma mise en page de type Trello pour les performances?

Optimiser votre La disposition de la performance de type Trello peut impliquer plusieurs stratégies. Cela comprend la minimisation de votre CSS et de votre JavaScript, à l'aide de sélecteurs CSS efficaces et à l'optimisation de vos images. Vous pouvez également utiliser des outils de performance, tels que Google Lighthouse, pour analyser votre disposition et identifier les zones d'amélioration.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!