Utilisez grid quand vous placez du contenu dans une mise en page que vous avez définie en deux dimensions, comme une structure de page ou une grille de cartes avec des lignes et colonnes alignées. Utilisez flexbox quand une seule rangée ou colonne d'éléments doit se répartir selon son propre contenu, comme une barre d'outils ou un groupe de boutons. Grid part de la mise en page, flexbox part du contenu, et ils s'imbriquent sans problème l'un dans l'autre.
Pourquoi les recruteurs posent cette question
C'est un test rapide pour savoir si vous écrivez vraiment du CSS moderne ou si vous transposez encore des habitudes de l'ère des float. Le recruteur veut une règle de décision plutôt qu'une liste de fonctionnalités, plus des signes que vous utilisez les parties qui suppriment du JavaScript, comme auto fit avec minmax pour les grilles responsives ou gap au lieu de bidouilles de marges. Votre réponse indique aussi combien de votre code de mise en page est dupliqué entre les points de rupture.
Comment structurer votre réponse
- Donnez la règle en une ligne : mise en page à deux dimensions contre répartition à une dimension.
- Nommez un cas concret pour chacun.
- Mentionnez qu'ils se composent, donc on peut imbriquer l'un dans l'autre.
- Ajoutez un détail moderne comme auto fit, minmax ou subgrid.
Exemple de réponse
Ma règle, c'est que grid sert quand je connais déjà la forme de la mise en page et que je place des choses dedans, et flexbox quand les éléments doivent déterminer eux-mêmes leurs tailles sur un axe. Donc une structure de page avec une barre latérale et une colonne de contenu, ou une grille de cartes où les lignes doivent s'aligner, c'est grid. Une barre d'outils, un jeu de puces de filtre, une rangée de boutons avec un élément poussé tout au bout, c'est flexbox avec un margin auto ou space between. Ils s'imbriquent très bien, donc la plupart de mes composants sont une grid au niveau extérieur et du flex dans chaque cellule. Ce que j'utilise en permanence, c'est repeat avec auto fit et minmax, parce que ça me donne une grille de cartes responsive sans aucune media query : les colonnes se réagencent toutes seules quand le conteneur rétrécit. Subgrid est l'autre qui vaut le coup de connaître, puisqu'il permet d'aligner les contenus internes des cartes sur toute la grille plutôt que dans chaque carte séparément.
Vous passez cet entretien bientôt ? GhostPilot écoute votre appel en direct, repère la question dès qu'elle est posée et affiche une réponse structurée à l'écran en temps réel. Essayez-le lors de votre prochain entretien blanc, ou prenez un Session Pass à $29, sans abonnement, pour le jour J.
Voir comment ça marcheQuestions de relance à prévoir
- Comment construiriez-vous une grille de cartes responsive sans une seule media query ?
- Quel problème subgrid résout-il que la grille imbriquée ne résout pas ?
- Quand aligner avec gap vaut-il mieux qu'aligner avec des marges ?
Autres questions pour Développeur frontend
Votre recruteur posera sa propre version de celle-ci. Collez votre véritable fiche de poste dans le Question Predictor gratuit et obtenez les 20 questions que ce poste a le plus de chances de poser, avec ce que chacune cherche vraiment à sonder.
Prédire mes questions