it-swarm.com.de

Wie erstelle ich ein 3x3-Raster über CSS?

Nach 9 divs nacheinander möchte ich über CSS ein Raster 3X3 erstellen.

Wie mache ich das?

.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;
}
<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>


Hinweis: Ich möchte keine float/clear-Lösung. Der Fokus liegt auf CSS und nicht mit HTML-Restrukturierung.

Wenn ich content: '\A'; white-space: pre; zu ::after hinzufüge, wird die Ausgabe hässlich.

.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;
}
<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>

Wie kann ich alle div in einem 3X3-Zeilen-Spalten-Layout erhalten?

16
user900360

Dieses Layout ist mit der CSS-Flexbox einfach. Keine Änderungen an HTML.

.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;
}
<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>


Vorteile von flexbox:

  1. minimaler Code; sehr effizient
  2. vertikal und horizontal zentrieren ist einfach und leicht
  3. gleich hohe Spalten sind einfach und einfach
  4. mehrere Optionen zum Ausrichten von Flex-Elementen
  5. es ist ansprechend
  6. im Gegensatz zu Floats und Tischen, die eine begrenzte Layoutkapazität bieten, da sie nie für die Erstellung von Layouts gedacht waren, ist Flexbox eine moderne (CSS3) Technik mit einer breiten Palette von Optionen.

Weitere Informationen zum Flexbox-Besuch:


Browser-Unterstützung:

Flexbox wird von allen gängigen Browsern unterstützt, außer IE <10 . Für einige aktuelle Browserversionen wie Safari 8 und IE10 ist Herstellerpräfix erforderlich. Für eine schnelle Möglichkeit zum Hinzufügen von Präfixen verwenden Sie Autoprefixer . Weitere Details in diese Antwort .

14
Michael_B

Nun das CSS Grid ist ziemlichsehr gut unterstützt , ich dachte, ich würde die Antwort mit einer moderneren Lösung ergänzen.

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

div > div {
  padding: 10px;
  background-color: #ccc;
}
<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>

9
Andy Hoffman

Neben der ausgezeichneten Antwort von @Michael_B zur Verwendung von flexbox können Sie auch verwenden

  • CSS-Tabellen

    oder

  • Schwimmer: links  

    beide unterstützen alte Browser wie IE 8/9, die flexbox nicht unterstützt.

Hinweis IE8 unterstützt nth-child nicht, unterstützt jedoch first/last-child

Option1 (CSS-Tabellen): Mit Änderungen an HTML werden jeweils 3 Zellen in einer Zeile umbrochen.

.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
}
<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>


Aktualisieren

Option2 (float:left): Mit NEIN wird zu HTML geändert, wobei clear:left bei jedem (vierten) n Element verwendet wird.

.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
}
<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>

7
dippas

Um ein weiteres hinzuzufügen, können Sie auch ein 3x3-Gitter mit nur einem <div> erstellen. 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;
}
3
C14L

Ich weiß, dass die Frage nach einer Lösung ohne Float-Clearing gefragt ist, aber nachdem ich die Flexbox-Lösung ausprobiert hatte, stellte ich fest, dass die Breite meiner Elemente nicht beibehalten wurde (weitere Informationen deuten darauf hin, dass ich möglicherweise die Breite des Containerelements festlegen musste). Im konkreten Fall eines 3x3-Gitters jedoch (im Gegensatz zu einem Gitter mit n Dreierreihen) ist die Lösung klarer und prägnanter. Hier ist es für den Fall, dass andere diese Antwort finden, wenn ich wie ich nach einer Lösung suche:

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