Comment créer une mosaïque responsive HTML/CSS?

Question

J'essaie de comprendre comment CSS et responsive design fonctionnent. J'ai fait un petit exemple here.

Ceci est un modèle de tuile simple.

Je voudrais être en mesure de montrer ma tuile sur 2, 3, 4 colonnes ou plus. Dans cet exemple, vous avez juste besoin de changer la classe div "wrapper" c2, c3, c4 pour modifier le nombre de colonnes.

Cela fonctionne parce que mes tuiles sont flottantes à gauche et ces c2, c3, c4 modifient la largeur de mon emballage. Voir le fichier HTML et CSS ou allez sur JSFiddle.

HTML

<div class="wrapper c2"> <!-- try with c3, c4--> 
    <div class="scrollable"> 
     <div class="webbutiles"> 
      <a href='?page_id=77' class='tile TBlue iconmain '><div class='boxContent'><i class='icon-group'></i></div><div class='tilename '><div class='name'>Tile 1</div></div></a> 
      <a href='?page_id=85' class='tile TDarkGreen iconmain '><div class='boxContent'><i class='icon-comments-alt'></i></div><div class='tilename '><div class='name'>Tile 2</div></div></a> 
      <a href='?page_id=89' class='tile TDarkPurple iconmain '><div class='boxContent'><i class='icon-cogs'></i></div><div class='tilename '><div class='name'>Tile 3</div></div></a> 
      <a href='?page_id=91' class='tile TDarkBlue iconmain '><div class='boxContent'><i class='icon-table'></i></div><div class='tilename '><div class='name'>Tile 4</div></div></a> 
      <a href='?page_id=93' class='tile TDarkRed iconmain '><div class='boxContent'><i class='icon-heart'></i></div><div class='tilename '><div class='name'>Tile 5</div></div></a> 
      <a href='?page_id=95' class='tile TTwitterBlue iconmain '><div class='boxContent'><i class='icon-twitter'></i></div><div class='tilename '><div class='name'>Tile 6</div></div></a> 
      <a href='?page_id=97' class='tile TGreen iconmain '><div class='boxContent'><i class='icon-columns'></i></div><div class='tilename '><div class='name'>Tile 7</div></div></a> 
      <a href='?page_id=87' class='tile TOrange t2x iconmain '><div class='boxContent'><i class='icon-reorder'></i></div><div class='tilename '><div class='name'>Tile Large</div></div></a> 
     </div> 
    </div> 
</div> 

CSS

/* General tile settings */ 
.tile{ display:block; float:left; background-color:#525252; width:150px; height:150px; cursor:pointer; text-decoration:none; color:#fff; overflow:hidden; position:relative; font-weight:300; font-size:11pt; letter-spacing:0.02em; line-height:20px; margin:0 10px 10px 0; overflow:hidden} 
.tile:hover{ outline:3px #3a3a3a solid} 


/* Tile responsive setting. */ 
@media (min-width:1025px){ 
    .wrapper{width:1024px} 
} 

.wrapper{margin-left:auto; margin-right:auto} 
.wrapper.c2{width:400px} 
.wrapper.c3{width:600px} 
.wrapper.c4{width:800px} 
.wrapper.c5{width:1000px} 
.resimgicon {max-width:62px;height:auto;} 
.tile .boxContent .resimgicon{ margin-left: 3em; margin-top: 2.7em;} 
.tile{ width:157px; height:157px} 
.tile.t2x{ width:324px} 
.tile.t2x .boxContent{ width:324px} 

@media (max-width:640px){ 
    .wrapper{margin-left:auto; margin-right:auto} 
    .wrapper.c2{width:324px} 
    .wrapper.c3{width:491px} 
    .wrapper.c4{width:658px} 
    .wrapper.c5{width:785px} 
    .resimgicon {max-width:64px;height:auto;} 
    .tile .boxContent .resimgicon{ margin-left: 2.7em; margin-top: 2.8em;} 
    .tile{ width:147px; height:147px} 
    .tile.t2x{ width:304px} 
    .tile.t2x .boxContent{ width:304px} 
} 

@media (max-width:360px){ 
    .wrapper{margin-left:auto; margin-right:auto} 
    .wrapper.c2{width:184px} 
    .wrapper.c3{width:281px} 
    .wrapper.c4{width:378px} 
    .wrapper.c5{width:435px} 
    .resimgicon {max-width:38px;height:auto;} 
    .tile .boxContent .resimgicon{ margin-left: .74em; margin-top: .68em;} 
    .tile{ width:77px; height:77px} 
    .tile.t2x{ width:164px} 
    .tile.t2x .boxContent{ width:164px} 
} 

Je n'aime pas ce CSS parce que je ne veux pas travailler avec une tuile fixe et la taille emballage. Cela crée une marge gauche et droite (auto). Ce n'est pas un problème pour un grand écran, mais c'est inutile sur un téléphone ou une tablette.

Que dois-je faire pour créer un système de carreaux avec une colonne sans avoir une largeur fixe? Y a-t-il une meilleure façon de générer ce type de tuile?

Answer 1

D'une certaine manière ... Vous êtes en quelque sorte en train de le faire à l'envers de la façon dont c'est fait partout ailleurs. Au lieu de moduler la largeur de votre wrapper, vous voulez que l'enveloppe soit fluide en largeur. ce qui signifie qu'il peut être 320px de large ou 2560px de large. Puis, ... donnez un ensemble de largeurs de colonnes prédéfinies calculées en pourcentages, en fonction d'un système de quadrillage.

Supposons que vous souhaitiez un maximum de 12 colonnes. Chaque ensemble de colonnes doit être égale à un total de 12.

Ensuite, par exemple, si vous voulez une colonne de largeur, vous appelleriez cette classe « col-12 » et lui donner width: 100%;

Ensuite, si vous vouliez deux colonnes, toutes deux égales en largeur par exemple avec une marge de 3,8% entre elles. Ensuite, vous calculeriez 100% - 3,8% = 96,2% puis 96,2%/2 = 48,1%. Faire une classe appelée col-6 qui a width: 48.1% et margin-right: 3.8%; Puis faire une autre classe appelée "last" Cette classe est appliquée à la dernière div dans une "rangée" et il a margin-right: 0; afin de réinitialiser la marge droite non nécessaire de la dernière div.

Rincer et répéter avec le même concept ci-dessus pour faire col-1, col-2, col-3, etc. et

Ensuite, vous pouvez créer une combinaison que vous voulez aussi longtemps que les classes ajouter jusqu'à 12. Donc, col-6 et col-6 comme ci-dessus, ou peut-être col-3, col-3, col-3, col-3. Et si vous aviez une raison pour cela ... col-1, col-2, col-3, col-5, col-1 ...

Cela aide-t-il?