Gitter in CSS

XodoX · #1 (**permalink**) 03.08.2023, 19:06

Hallo, ich habe ein Gitter in CSS gemacht, welches nur 3x3 groß ist. Das funktioniert auch. Aber die Erweiterung funktioniert nicht.

Gitter

Code:

<div class="board" id="board">
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
    </div>

Die Ränder werden entfernt mit:

Code:

.cell:first-child,
.cell:nth-child(2),
.cell:nth-child(3) {
    border-top: none;
}

.cell:nth-child(3n +1) {
    border-left: none;
}

.cell:nth-child(3n +3) {
    border-right: none;
}

.cell:last-child,
.cell:nth-child(8),
.cell:nth-child(7) {
    border-bottom: none;
}

Und da liegt auch das Problem (siehe Anhang). Egal, was ich probiere, ich bekomme es nicht richtig hin. Also das alle Ränder weg sind und alles dicke Linien sind. Verstehe offensichtlich das mit "nth-child" nicht ganz richtig.

Danke!

MrMurphy · #2 (**permalink**) 04.08.2023, 09:55

Mit

Code:

var(--cell-size)

kann ich nichts anfangen.

Deine Informationen sind noch recht mager. Deshalb kann ich dir nur allgemein helfen. Bei meinen Beispielen geht es deshalb nur um grundsätzliche Lösungsmöglichkeiten, die Größen musst du dann selbst anpassen. Zum Beispiel auch die Linienstärke.

Ich verstehe es so, dass du ein 3-spaltiges Gitter erstellen willst, das jeweils um 1 Zeile erweitert werden soll, ohne das CSS anpassen zu müssen.

Die "dicken Linien" resultieren wohl daraus, dass zwei border-Linien direkt nebeneinander liegen. Damit kann ich auch falsch liegen, das habe ich aber nicht weiter nachvollzogen. So ein Gitter zu erstellen ist eher kontraproduktiv, die Linienstärke sollte direkt bestimmt werden.

Du bist gedanklich viel zu kompliziert unterwegs. Du erstellst erst alle Linien mit border und willst dann überflüssige löschen. Dabei ist es viel einfacher nur die Linien zu erstellen, die auch benötigt werden.

Bei dem HTML

Code:

   <div class="gitter">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
   </div>

funktioniert folgendes CSS

Code:

      .gitter {
         display: grid;
         grid-template-columns: repeat(3, 50px);
      }
      .gitter div {
         width: 50px;
         height: 50px;
      }
      /* Alle div-Elemente außer jedem dritten durch das :not() */
      .gitter div:not(:nth-child(3n+3)) {
         border-right: 2px solid black;
      }
      /* Alle div-Elemente außer den letzten dreien */
      .gitter div:nth-last-child(1n+4) {
         border-bottom: 2px solid black;
      }

Es gibt natürlich noch viele andere Möglichkeiten. So könnte jedem zweiten div-Element ein linker und ein rechter Rand zugewiesen werden, anstatt dem jeweils ersten und zweiten div-Element einen rechen Rand zuzuweisen.

Eventuell ist auch eine Lösung mit der CSS-Anweisung "gap" sinnvoll. Dabei bekommt der umgebende Container als Hintergrundfarbe die Farbe der Linien (also schwarz) und die Zellen als Hintergrundfarbe weiß. Dabei muss darauf geachtet werden, dass der umgebende Container nicht breiter als die Fläche des Gitter ist. Zu dem oben genannten HTML ist dass dann folgendes CSS:

Code:

      .gitter {
         background-color: black;
         width: 152px;
         display: grid;
         grid-template-columns: repeat(3, 50px);
         gap: 2px;
      }
      .gitter div {
         background-color: white;
         width: 50px;
         height: 50px;
      }

Nachfolgend eine komplette Seite mit beiden Beispielen zum direkten ausprobieren und rumspielen:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Gitter</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

   /*.gitter-border*/
      .gitter-border {
         display: grid;
         grid-template-columns: repeat(3, 50px);
      }
      .gitter-border div {
         width: 50px;
         height: 50px;
      }
      /* Alle div-Elemente außer jedem dritten durch das :not() */
      .gitter-border div:not(:nth-child(3n+3)) {
         border-right: 2px solid black;
      }
      /* Alle div-Elemente außer den letzten dreien */
      .gitter-border div:nth-last-child(1n+4) {
         border-bottom: 2px solid black;
      }

   /*.gitter-gap*/
      .gitter-gap {
         background-color: black;
         width: 152px;
         display: grid;
         grid-template-columns: repeat(3, 50px);
         gap: 2px;
      }
      .gitter-gap div {
         background-color: white;
         width: 50px;
         height: 50px;
      }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1>Gitter</h1>
      <p>Es soll ein 3-spaltiges Gitter erstellt werden, dass zeilenweise erweitert werden kann, ohne das CSS anpassen zu müssen.</p>
   </header>
   <h1>Gitter mit border</h1>
   <h2>Gitter 3 x 3</h2>
   <div class="gitter-border">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
   </div>   
   <h2>Gitter 3 x 4</h2>
   <div class="gitter-border">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
   </div>   
   <h1>Gitter mit gap</h1>
   <h2>Gitter 3 x 3</h2>
   <div class="gitter-gap">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
   </div>   
   <h2>Gitter 3 x 4</h2>
   <div class="gitter-gap">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
   </div>   
   <footer id="pagefooter" class="pagefooter">
      <p>Originaldiskussion: <a href="https://xhtmlforum.de/74591-gitter-css.html">https://xhtmlforum.de/</a></p>
   </footer>
</body>
</html>

Statt der Klasse "gitter" habe ich zur Unterscheidung die Klassen "gitter-border" und "gitter-gap" verwendet.

MrMurphy · #3 (**permalink**) 04.08.2023, 13:44

Ich habe noch eine Lösung für dein bisheriges Vorgehen ertellt. Das CSS sieht dann folgendermaßen aus:

Code:

      /* Die ersten drei div-Elemente */
      .gitter-border div:nth-child(-1n+3) {
         border-top: none;
      }
      /* Jedes dritte div-Element */
      .gitter-border div:nth-child(3n+3) {
         border-right: none;
      }
      /* Die letzten 3 div-Elemente */
      .gitter-border div:nth-last-child(-1n+3) {
         border-bottom: none;
      }
      /* Jedes 1., 4., 7. u.s.w div-Element */
      .gitter-border div:nth-child(3n+1) {
         border-left: none;
      }

Eine gesamte Seite zum direkten Testen und Rumspielen:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Gitter3</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

   /*.gitter-border*/
      .gitter-border {
         display: grid;
         grid-template-columns: repeat(3, auto);
         justify-content: center;
      }
      .gitter-border div {
         width: 50px;
         height: 50px;
         border: 2px solid black;
      }
      /* Die ersten drei div-Elemente */
      .gitter-border div:nth-child(-1n+3) {
         border-top: none;
      }
      /* Jedes dritte div-Element */
      .gitter-border div:nth-child(3n+3) {
         border-right: none;
      }
      /* Die letzten 3 div-Elemente */
      .gitter-border div:nth-last-child(-1n+3) {
         border-bottom: none;
      }
      /* Jedes 1., 4., 7. u.s.w div-Element */
      .gitter-border div:nth-child(3n+1) {
         border-left: none;
      }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1>Gitter</h1>
      <p>Es soll ein 3-spaltiges Gitter erstellt werden, dass zeilenweise erweitert werden kann, ohne das CSS anpassen zu müssen.</p>
   </header>
   <h1>Gitter mit border</h1>
   <h2>Gitter 3 x 3</h2>
   <div class="gitter-border">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
   </div>   
   <h2>Gitter 3 x 4</h2>
   <div class="gitter-border">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
   </div>   
   <footer id="pagefooter" class="pagefooter">
      <p>Originaldiskussion: <a href="https://xhtmlforum.de/74591-gitter-css.html">https://xhtmlforum.de/</a></p>
   </footer>
</body>
</html>

XodoX · #4 (**permalink**) 09.08.2023, 15:35

Hallo, danke für die Antwort. Ich wollte nicht alles mit Code voll machen, da es dann unübersichtlich wird, dachte ich mir. Das cell-size ist nur für den Inhalt, was später in die Zellen soll.

Code:

  --cell-size: 100px;
  --mark-size: calc(var(--cell-size) * .9);

Zitat:

Du bist gedanklich viel zu kompliziert unterwegs. Du erstellst erst alle Linien mit border und willst dann überflüssige löschen. Dabei ist es viel einfacher nur die Linien zu erstellen, die auch benötigt werden.

Das weiß ich ehrlich gesagt nicht. Ich habe mehrer Videos bei youtube geguckt und da wurde das eigentlich überall so gemacht.
Das Gitter ist in der html und das zugehörige CSS in einer css Datei. Ich habe leider (noch) nicht viel Ahnung und kann daher deine Idee nicht übertragen. Ich muss es erstmal so machen, wie ich es bisher habe.
Was ich machen will, ist das bisherige Gitter zu vergrößern. Das funktioniert aber nicht, da ich dann natürlich auch die anderen Sachen anpassen muss, wo die Linien gelöscht werden etc. Was ich meine, habe ich nochmal als mit im Anhang. Einmal so, wie es jetzt aussieht und dann einmal so, wenn ich nochmal 3 div hinzufüge. Ich muss ja dann bei dem css die "child" anpassen und das funktioniert aber nicht, wie man sieht.
Ich habe es auch nochmal mit deiner Idee versucht (-1n+3) etc. ,aber das funktioniert natürlich auch nicht.

MrMurphy · #5 (**permalink**) 09.08.2023, 16:28

Hallo

Zitat:

Ich habe mehrer Videos bei youtube geguckt

Kannst du die mal hier verlinken.

Zitat:

auch die anderen Sachen anpassen

Es wäre schön wenn du mal einen gesamten Quelltext zeigen könntest. Wenn die Seite mehr Inhalt als das Gitter hat können wir nur helfen, wenn wir den kennen.

Zitat:

im Anhang

Der Anhang ist leider nicht hilfreich um dein Problem zu klären. Zum Testen muss man selbst eine Seite erstellen. Dazu wird zum einen der Inhalt benötigt, zum anderen werden User hier im Forum kaum den Quelltext aus einem Bild abtippen. Meinen Quelltext kannst du hingegen einfach kopieren.

XodoX · #6 (**permalink**) 10.08.2023, 16:05

Hallo, danke für die Antwort. Okay.

https://www.youtube.com/watch?v=Y-GkMjUZsmM&t=1852s

Index.html

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
  <title>Document</title>
</head>
<body>
  <div class="board" id="board">
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
  </div>
  <div class="winning-message" id="winningMessage">
    <div data-winning-message-text></div>
    <button id="restartButton">Restart</button>
  </div>
</body>
</html>

styles.css

Code:

*, *::after, *::before {
  box-sizing: border-box;
}

:root {
  --cell-size: 100px;
  --mark-size: calc(var(--cell-size) * .9);
}

body {
  margin: 0;
}

.board {
  width: 100vw;
  height: 100vh;
  display: grid;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-columns: repeat(3, auto)
}

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.cell:first-child,
.cell:nth-child(2),
.cell:nth-child(3) {
  border-top: none;
}

.cell:nth-child(3n + 1) {
  border-left: none;
}

.cell:nth-child(3n + 3) {
  border-right: none;
}

.cell:last-child,
.cell:nth-child(8),
.cell:nth-child(7) {
  border-bottom: none;
}

.cell.x,
.cell.circle {
  cursor: not-allowed;
}

.cell.x::before,
.cell.x::after,
.cell.circle::before {
  background-color: black;
}

.board.x .cell:not(.x):not(.circle):hover::before,
.board.x .cell:not(.x):not(.circle):hover::after,
.board.circle .cell:not(.x):not(.circle):hover::before {
  background-color: lightgrey;
}

.cell.x::before,
.cell.x::after,
.board.x .cell:not(.x):not(.circle):hover::before,
.board.x .cell:not(.x):not(.circle):hover::after {
  content: '';
  position: absolute;
  width: calc(var(--mark-size) * .15);
  height: var(--mark-size);
}

.cell.x::before,
.board.x .cell:not(.x):not(.circle):hover::before {
  transform: rotate(45deg);
}

.cell.x::after,
.board.x .cell:not(.x):not(.circle):hover::after {
  transform: rotate(-45deg);
}

.cell.circle::before,
.cell.circle::after,
.board.circle .cell:not(.x):not(.circle):hover::before,
.board.circle .cell:not(.x):not(.circle):hover::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.cell.circle::before,
.board.circle .cell:not(.x):not(.circle):hover::before {
  width: var(--mark-size);
  height: var(--mark-size);
}

.cell.circle::after,
.board.circle .cell:not(.x):not(.circle):hover::after {
  width: calc(var(--mark-size) * .7);
  height: calc(var(--mark-size) * .7);
  background-color: white;
}

.winning-message {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .9);
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 5rem;
  flex-direction: column;
}

.winning-message button {
  font-size: 3rem;
  background-color: white;
  border: 1px solid black;
  padding: .25em .5em;
  cursor: pointer;
}

.winning-message button:hover {
  background-color: black;
  color: white;
  border-color: white;
}

.winning-message.show {
  display: flex;
}

MrMurphy · #7 (**permalink**) 10.08.2023, 20:34

Jetzt wird mir einiges klarer (hoffe ich zumindest).

Du willst das Kreuz um eine Zeile mit 3 Zellen erweitern. Statt 9 Zellen hast du dann 12 Zellen.

Im CSS musst du dann

Code:

   .cell:last-child,
   .cell:nth-child(8),
   .cell:nth-child(7) {
      border-bottom: none;
   }

durch

Code:

   .cell:last-child,
   .cell:nth-child(11),
   .cell:nth-child(10) {
      border-bottom: none;
   }

ersetzen.

Es geht um den unteren Rand.

Im Original wird der bei den Zellen 7, 8 und 9 entfernt.

Nach der Erweiterung im HTML entfernt das Original-CSS den unteren Rand der Zellen 7, 8 und 12. Es muss jedoch der untere Rand der Zellen 10, 11 und 12 entfernt werden.

Wenn du die Zellen (oder auch noch mehr) hinzufügen willst (immer 3 Stück) ohne am CSS rumbasteln zu müssen kannst du auch meinen Vorschlag verwenden:

Code:

      .cell:nth-last-child(-1n+3) {
         border-bottom: none;
      }

top · #8 (**permalink**) 12.08.2023, 16:02

Ich würde das Problem mit einem negativem Margin der einzelnen Blöcke und ein overflow: hidden beim umschließenden Element lösen:

https://jsfiddle.net/u48j73pg/

XodoX · #9 (**permalink**) 14.08.2023, 10:09

Danke für die Vorschläge! Das hat jetzt gekklappt.

Ich habe es auch versucht mit:

Code:

    .cell:nth-last-child(-1n+3) {
         border-bottom: none;
      }

Und das ist natürlich besser. Da muss ich tatsächlich nichts manuell anpassen

Ich bin mir nicht ganz sicher, wie ich das Gitter nach rechts erweitere. Es erweitert sich immer nur nach unten. Ich habe jetzt nochmal 5 hinzugefügt, aber das ist zu lang. Ich habe "expandRight" und "expandLeft" gesehen.

Kann man das mit CSS auch hinkriegen, dass das Gitter dynamisch ist.. also damit der Schwierigkeitsgrad schwerer wird, dass sich dsas Gitter ggfs. von alleine erweitert, wenn z.B. alles voll ist und noch keiner gewonnen hat.

MrMurphy · #10 (**permalink**) 14.08.2023, 15:06

Zitat:

Kann man das mit CSS auch hinkriegen

Abhängig vom Spielstand? Also wenn alle 9 Felder belegt sind und es keinen Sieger gibt?

Nein.

Das Gitter selbst kannst du natürlich erweitern. Wenn es um das Spiel geht sind dabei aber verschiedene Überlegungen zu berücksichtigen.

Nur mal als Beispiel:

Wenn alle Felder voll sind und du sieben Felder anfügst (um auf 4 mal 4 gleich 16 zu kommen) sind in dem neuen Raster die ersten beiden Zeilen zu je 4 Feldern gefüllt und das erste Feld der dritten Zeile. Für die Spieler ist damit die Optik zerstört.

Die neuen Felder müssen also entweder an passenden Stellen eingefügt werden. Also an 4., 7. und 10. bis 14. Stelle.

Oder der vorhandene Spielstand muss mittels einer Programmiersprache in das neue Raster übertragen werden, damit die Spieler weiterspielen können.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 13:25
Einbindung von frei erhältlichen Scripten - CSS Problem	DonL	CSS	1	22.01.2011 17:09
MYspace mehr als nur CSS oder ?	Vinceone	CSS	0	12.07.2007 03:21
Eric Meyer's CSS	Petty	Ressourcen	0	21.11.2005 09:18
Mozilla ignoriert externes css	DarkWanderer	CSS	9	22.09.2005 12:39