“T’es pas cap !” n°4 (frères de taille)

raphael

Un petit défi d’intégration CSS m’a donné l’idée de ressusciter ce blog et d’en profiter pour relancer (au moins une fois) les défi que j’avais à l’époque nommé « T’es pas cap ! ».

J’ai retrouvé les archives des trois premiers « T’es pas cap ! » dans les limbes des Internet. Ceci est donc le numéro 4…

Ce nouveau petit “défi” d’intégrateur s’appelle « Frères de taille » et j’ai pensé qu’il pourrait être amusant de le partager pour voir comment chacun et chacune pourrait s’y prendre de son côté.

(Pour info, ce n’est pas juste pour vous piquer l’idée : j’ai trouvé une solution et je la partagerai bientôt).

Voici l’énoncé de ce 4e défi “T’es pas cap !” :

  1. le code HTML se limite à un élément parent et à ses deux (ou plus) enfants,
  2. les enfants sont disposés côte à côte
  3. la largeur des deux enfants est identique, elle correspond à la largeur de contenu de l’enfant qui en a le plus
  4. la densité de contenu doit pouvoir changer
  5. les enfants ne doivent pas déborder de leur parent (tester avec `border: 2px dotted pink;` sur le parent)
  6. pas d’image, pas de requête, pas de JavaScript

Voici le visuel attendu :

equal.png

Qu’en dites-vous ? 😉

Ne publiez pas vos propositions tout de suite, envoyez-les moi par e-mail à raphael(at)goetter.fr (de préférence via un lien vers Codepen ou jsFiddle) et je les dévoilerai dans quelques jours.

Amusez-vous bien !

Correction

Voilà maintenant plusieurs mois que ce défi est lancé, il est grand temps de dévoiler les pistes les plus sérieuses.

Sans surprise, les méthodologies de Grid Layout se sont révélées très efficaces, mais certains ont trouvé leur bonheur dans les ancestrales techniques tabulaires de Table Layout.

Voici quelques solutions…

Solutions avec Grid Layout

.parent {
  display: inline-grid;
  grid: auto / 1fr 1fr;
  gap: 10px;
}

Voir en ligne : https://jsbin.com/hobenuhome/edit?html,css,output (Solution de Vincent de Oliveira).
Ma version personnelle (très semblable) : https://codepen.io/raphaelgoetter/pen/mdPEjbB?editors=1100

.parent {
    display: grid;
    width: -moz-fit-content;
    width: fit-content;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

(Solution de Christine Ruzic)

Solution avec Table Layout

.parent {
  display:table;
}
.frere {
  display:table-cell;
  width:50%;
}

Voir en ligne : https://codepen.io/pierre_tl/pen/rNeLbGG?editors=1100 (Solution de Pierre Tampon-Lajarriette).
Note : cette solution tabulaire rend bien plus difficile l’ajout d’une gouttière entre les deux éléments.

Merci pour vos participations et à la prochaine fois ! 🙂