Comment puis-je créer une grille 3x3 via CSS?

9 divs l'un après l'autre, je veux créer une grille de 3X3 via CSS.

Comment dois-je faire?

CSS:

.cell {
  height: 50px;
  width: 50px;
  background-color: #999;
  display: inline-block;
}

.cell:nth-child(3n) {
  background-color: #F00;
  /* what property should I use to get a line break after this element? */
}

/* this doesn't work; at least not in safari */
.cell:nth-child(3n)::after {
  display: block;
}

HTML:

<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

Remarque: je ne veux pas float/clear solution. L'accent est sur le CSS et pas en HTML restructurer.

Si j'ajoute content: '\A'; white-space: pre; à ::after de sortie vient d'être laid.

CSS:

.cell {
  height: 50px;
  width: 50px;
  background-color: #999;
  display: inline-block;
}

.cell:nth-child(3n) {
  background-color: #F00;
  /* what property should I use to get a line break after this element? */
}

.cell:nth-child(3n)::after {
  display: inline;
  content: '\A';
  white-space: pre;
}

HTML:

<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

Comment puis-je obtenir tous les div dans un 3X3 ligne-colonne mise en page?

InformationsquelleAutor | 2016-05-28
  1. 14

    Cette mise en page est simple avec CSS flexbox. Aucun changement de HTML.

    CSS:

    .grid {
  display: flex;                       /* establish flex container */
  flex-wrap: wrap;                     /* enable flex items to wrap */
  justify-content: space-around;
  
}
.cell {
  flex: 0 0 32%;                       /* don't grow, don't shrink, width */
  height: 50px;
  margin-bottom: 5px;
  background-color: #999;
}
.cell:nth-child(3n) {
  background-color: #F00;
}

    HTML:

    <div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

    Avantages de flexbox:

    1. un minimum de code, très efficace
    2. centrage, à la fois verticalement et horizontalement, est simple et facile
    3. l'égalité de la hauteur des colonnes sont simples et faciles
    4. de multiples options pour l'alignement des éléments flex
    5. il est sensible
    6. à la différence des flotteurs et des tables, qui offre limitée de mise en page de la capacité, parce qu'ils n'ont jamais été destiné à la réalisation de mises en page, flexbox est un moderne (CSS3) technique avec un large éventail d'options.

    Pour en savoir plus sur flexbox visite:

    Prise en charge du navigateur:

    Flexbox est pris en charge par tous les navigateurs principaux, sauf IE < 10. Certaines des dernières versions de navigateur comme Safari 8 et IE10, exiger fournisseur de préfixes. Un moyen rapide pour ajouter des préfixes utilisation Autoprefixer. Plus de détails dans cette réponse.

    • Salut Anubhav - Merci pour le modifier. J'ai roulé en arrière seulement parce qu'il n'a pas de travail. Si vous voulez une largeur de pixel pour chaque cellule, vous devez spécifier une largeur sur le conteneur. Sinon, ils ne sont pas automatiquement, à moins que l'écran est très étroite. C'est pourquoi j'ai utilisé les pourcentages pour la démo. Quelle est la largeur du conteneur?
    • R. Que voulez-vous dire qu'il ne fonctionne pas? B. je ne suis pas la fixation width, je suis réglage de limite supérieure à elle. C. Il a enveloppé sur mon 2000px de large moniteur de l'amende juste. D. Avez-vous même exécuter le code?
    • J'ai fait l'exécuter. Il a montré une seule rangée d'éléments, tout le chemin à travers. C'est pourquoi j'ai roulé la modifier.
    • C'est ce que vous avez posté: jsfiddle.net/pr6ha5yo
    • Quel navigateur utilisez-vous? version, système d'exploitation, etc.?
    • Testé sur actuelle de Chrome et FF. Comme je l'ai dit dans mon premier commentaire, ils se terminera par la suite, quand l'écran est étroite. Sur l'écran plus large, c'est une seule ligne. Mais si c'est ce que vous voulez, vous êtes tous ensemble.
    • i.imgur.com/4rKuX9u.png et i.imgur.com/Fl9Z81U.png
    • Ok. Méfiez-vous cependant de compatibilité du navigateur. Voici Chrome et Firefox.
    • Notez également que calc ne fonctionnera pas avec flex-basis composant de flex abréviation de la propriété sur IE11. Vous aurez besoin d'utiliser flex-basis directement.
    • La bonne réponse. Comme une note de côté, étant donné les problèmes avec le calc expression, et aussi par goût personnel, je voudrais supprimer la marge horizontale et il suffit de régler le flex de base-à-dire 30%. Étant donné la bonne justifier-le contenu, la séparation entre les éléments seront réceptifs.

    InformationsquelleAutor Michael_B
  2. 9

    Maintenant que Grille CSS est assez très bien pris en charge, je pensais compléter la réponse à une solution plus moderne.

    CSS:

    .grid {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(3, 1fr);
}

div > div {
  padding: 10px;
  background-color: #ccc;
}

    HTML:

    <div class="grid">
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>  
</div>

    InformationsquelleAutor Andy Hoffman
  3. 7

    En plus de l'Excellente réponse de @Michael_B à utiliser flexbox, vous pouvez utiliser

    • CSS tables

      ou

    • float:left

      à la fois pour soutenir les anciens navigateurs tels que IE 8/9 , qui flexbox ne le supportent pas.

    Note IE8 ne prend pas en charge nth-child mais prend en charge first/last-child

    Option1 CSS (Tables) : avec les changements de HTML, enveloppant chaque 3 cellules dans une ligne.

    CSS:

    .grid {
  display: table;
  border-spacing: 5px
}
.row {
  display: table-row
}
.cell {
  width: 50px;
  height: 50px;
  background: grey;
  display: table-cell;
}
.row div:last-child {
  background: red
}

    HTML:

    <div class="grid">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

    Mise à jour

    Option2 (float:left): SANS modification du HTML, à l'aide clear:left à chaque (4e)n élément.

    CSS:

    .cell {
  width: 50px;
  height: 50px;
  background: grey;
  float: left;
  margin: 5px
}
.cell:first-child + div+ div,
.cell:first-child + div+ div + div + div + div,
.cell:first-child + div+ div + div + div + div + div + div + div {
  background: red
}
.cell:first-child + div+ div + div,
.cell:first-child + div+ div + div + div + div + div,
.cell:first-child + div+ div + div + div + div + div + div + div + div {
  clear: left
}

    HTML:

    <div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

    • Euh, je pense que IE 8 ne prend pas en charge flexbox. IE 9 n'est, en partie. Accidents sur background ou certains liés à la propriété.
    • IE9 ne prend pas en charge, vous pouvez voir ici caniuse.com/#feat=flexbox, je vous ai juste donné une autre solution 🙂
    • Désolé de mon erreur. Dans mon esprit, je pensais à calc.
    • Pas de problème ;), Comme je l'ai dit juste vous a donné une solution de navigateur.
    • Il utilise HTML de restructuration.
    • il est été un temps long, mais j'ai mis à jour la réponse à une option, si vous voulez prendre un coup d'oeil

    InformationsquelleAutor dippas
  4. 3

    Juste pour ajouter un autre vous pouvez également faire une grille 3x3 en utilisant seulement un seul <div>. Plunker

    HTML:

    <div class="grid"></div>

    CSS:

    .grid {
  width: 50px; height: 50px;
  background-color: red;
  border-top: 50px solid red;
  border-bottom: 50px solid red;
  margin: 0 50px;
  position: relative;
  box-shadow: inset 0 4px 0 -2px white,
              inset 0 -4px 0 -2px white;
}
.grid::before {
  content: '';
  width: 50px; height: 50px;
  background-color: red;
  border-top: 50px solid red;
  border-bottom: 50px solid red;
  margin: 0;
  position: absolute; left: -52px; top: -50px;
  box-shadow: inset 0 4px 0 -2px white,
              inset 0 -4px 0 -2px white;
}
.grid::after {
  content: '';
  width: 50px; height: 50px;
  background-color: red;
  border-top: 50px solid red;
  border-bottom: 50px solid red;
  margin: 0;
  position: absolute; right: -52px; top: -50px;
  box-shadow: inset 0 4px 0 -2px white,
              inset 0 -4px 0 -2px white;
}
    InformationsquelleAutor C14L
  5. 0

    Je sais que la question est de demander un non-float solution claire, mais après avoir essayé la flexbox solution que j'ai trouvé qu'il n'a pas de conserver la largeur de mes éléments (lecture suggère j'ai peut-être nécessaire de définir la largeur de l'élément conteneur). Dans le cas spécifique d'une grille 3x3 cependant (contrairement à une grille avec n lignes de trois) que d'un flotteur de solution claire, plus concise et fonctionne très bien. Ici, il est dans le cas où les autres à trouver cette réponse lors de la recherche d'une solution comme je l'ai fait:

    .cell {
  float: left;
  height: 100px;
  width: 100px;
  margin: 5px;
}
.cell:nth-child(4) {
  clear: left;
}
.cell:nth-child(7) {
  clear: left;
}
    InformationsquelleAutor Bjornicus