colonnes multiples avec des hauteurs de lignes identiques en HTML/CSS

Question

Je travaille sur un site Web où le concepteur a demandé le format suivant sur la page d'accueil:

News  Notices Events 
Item 1 Item 1 Item 1 
Blurb Blurb Blurb 
Blurb    Blurb 
Blurb 

Item 2 Item 2 Item 2 
Blurb Blurb Blurb 
Blurb Blurb 
     Blurb 

L'idée est que chaque élément doit être de la même hauteur horizontale. Je peux facilement le faire avec divs de la façon suivante:

<div class="row"> 
    <div>News</div> 
    <div>Notices</div> 
    <div>Events</div> 
</div> 
<div class="row"> 
    <div>Item 1</div> 
    <div>Item 1</div> 
    <div>Item 1</div> 
</div> 
<div class="row"> 
    <div>Item 2</div> 
    <div>Item 2</div> 
    <div>Item 2</div> 
</div> 

Cependant, ce n'est pas grande architecture d'information - d'autant plus que je veux empiler les Nouvelles, Avis et événements colonne pour petits écrans/étroites/mobiles.

Y at-il de toute façon que je puisse obtenir le résultat souhaité par le concepteur tout en conservant l'architecture d'information correcte?

Mise à jour

Après avoir utilisé jQuery pour réajuster la grille chargement de la page I a montré le concepteur. Une fois qu'il s'est rendu compte que nous avons très peu de contrôle sur ce que les utilisateurs ont mis dans le CMS et que le contenu de la grille allait être déséquilibré, il a mis en boîte toute l'idée.

Donc, je n'ai pas besoin de la réponse à cela, mais je vais le garder par curiosité.

Answer 1

Vérifiez les éléments suivants. Doit vous donner quelques idées:

http://spyrestudios.com/css-grid-systems/