Ergebnis 1 bis 2 von 2

Thema: CSS Grid Layout mit 2 farbigen Reihen

  1. #1
    HTML Newbie
    Registriert seit
    01.11.2018
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS Grid Layout mit 2 farbigen Reihen

    Hallo,
    ich bin neu im Forum und hoffe deshalb mit nachsicht

    ich hab ein problem mit dem Grid in CSS bzw mit der farbigen Darstellung.

    Mein Grid besteht auf 4 Spalten und 10 Reihen.
    Wegen der besseren lesbarkeit möchte ich eine farbliche abweichung mit hell und dunkelgrau.

    Jedoch habe ich im Internet nichts gefunden, wie das funktionieren sollen.

    Mein html code sieht wiefolgt aus:

    R1S1= Reihe 1 Spalte 1

    HTML-Code:
      <div class="grid-1">
          <div id="1" >R1S1</div>
        <div id="2" >R1S2</div>
        <div id="3" >R1S3</div>
        <div id="4" >R1S4</div>
        <div id="5" >R2S1</div>
        <div id="6" >R2S2</div>
        <div id="7" >R2S3</div>
        <div id="8" >R2S4</div>
        <div id="9" >R3S1</div>
        <div id="10" >R3S2</div>
        <div id="11" >R3S3</div>
        <div id="12" >R3S4</div>
        <div id="13" >R4S1</div>
        <div id="14" >R4S2</div>
        <div id="15" >R4S3</div>
        <div id="16" >R4S4</div>
        ...
      </div>
    folgenden CSS-Code habe ich:

    Code:
    .grid-1 {
      display: grid;
      grid-template-columns: auto auto auto auto;
      text-align: center;
      grid-gap: 10px;
      padding: 10px;
      background-color: #F1F1F1;
    }
    
    .grid-1 :nth-child(2n+1) {background-color: #FFFFFF;}
    Das bringt mir aber leider nicht den gewünschten effekt.

    hoffe ich habe mich einigermassen verständlich ausgedrückt und hoffe ihr könnt mir weiterhelfen


    mfg Marco


    --edit--

    ich hab mir jetzt mit dem Beholfen.

    Code:
    .grid-1 :nth-child(8n+1) {background-color: #FFFFFF;}
    .grid-1 :nth-child(8n+2) {background-color: #FFFFFF;}
    .grid-1 :nth-child(8n+3) {background-color: #FFFFFF;}
    .grid-1 :nth-child(8n+4) {background-color: #FFFFFF;}
    aber ob das nicht noch schöner geht?

    für Tipps bin ich offen
    Geändert von KevSchechner (01.11.2018 um 11:20 Uhr)

  2. #2
    Fortgeschrittene/r
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    187
    Danke
    0
    Bekam 28 mal "Danke" in 28 Postings

    Standard AW: CSS Grid Layout mit 2 farbigen Reihen

    Du könntest dein Code noch etwas verkürzen
    Code:
    .grid-1 :nth-child(8n+1),.grid-1 :nth-child(8n+2),.grid-1 :nth-child(8n+3),.grid-1 :nth-child(8n+4) {
    background-color:#FFFFFF;
    }

    doch eine andere Lösung finde ich so gerade auch nicht.
    Du könntest höchstens noch mit class arbeiten und den containern dann die background farbe geben
    Geändert von basti1012 (01.11.2018 um 14:21 Uhr)
    Mein soforthilfe Forum und Chat

Ähnliche Themen

  1. CSS Grid - merkwürdiges Verhalten
    Von Sysmatic im Forum HTML & CSS Forum
    Antworten: 15
    Letzter Beitrag: 05.10.2018, 23:26
  2. Wie lautet der code für den farbigen Tabellenrand?
    Von retnüg im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 29.11.2017, 09:19
  3. css grid und z-index
    Von kagan1416 im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 28.08.2017, 19:04
  4. 960 Grid aktuell?
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 10.11.2012, 12:29
  5. 2 Farbigen Hintergrund?!
    Von Bianca im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 5
    Letzter Beitrag: 26.06.2005, 12:45

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •