Rahmen um die cols in einer row, auch bei Umbruch

ny_unity · 16. März 2021

die Entwicklertools kenne ich ja, danke, damit arbeite ich auch. Ich wäre aber jetzt nicht darauf gekommen, wie ich die Zeilen kleiner machen kann, außer mit height.

Kannst du mir einen Tipp => keinen Lösungsvorschlag => nennen, wie ich jetzt das hinbekomme, dass die erste Spalte und erste Zeile in allen grids anders farbig ist?

Muss ich mit Klassen arbeiten, oder gibts einen Trick?

Sempervivum · 16. März 2021

Das wird hier besprochen:

https://stackoverflow.com/ques…or-row-in-css-grid-layout

chipit24 stellt dort eine sehr elegante Lösung mit display: contents; vor, aber die Browserunterstützung lässt leider noch zu wünschen übrig. Was die erste Zeile betrifft, ist es wahrscheinlich am einfachsten, mit Klassen zu arbeiten. Die erste Spalte kannst Du jedoch sehr einfach im CSS mit nth-child ansprechen.

ny_unity · 16. März 2021

danke, ich habe es jetzt mal so gelöst, da sich alles immer wiederholt, sieht das ganz gut aus und ist logisch, also für mich. aber ich schau mir das mit dem dispaly:contents aber mal an, aber für die Vervollständigung im Thread:

CSS:

Code

/* ==== GENERELLES === */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
/* ==== GLOBAL === */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: 'Exo2', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 16px;
  background-color: #E4E8F1;
  color: #000000;
}


.grid-header, .grid-summe-first, .grid-summe {
  background-color: #9FA2A9;
  border-color: #000000;
  border-style: solid;
  border-width: 1px 1px 0px 0px;
  text-align: center;
  font-weight: bold;
}


.row_first {
  font-weight: bold;
  color: #ffffff;
  text-align: right;
  background-color: #004088;
  border-color: #000000;
  border-style: solid;
  border-width: 1px 1px 0px 1px;
}


.row_gerade {
  background-color: #ffffff;
  text-align: right;
  border-color: #000000;
  border-style: solid;
  border-width: 1px 1px 0px 0px;
}


.row_ungerade {
  background-color: #6E92BB;
  text-align: right;
  border-color: #000000;
  border-style: solid;
  border-width: 1px 1px 0px 0px;
}


.grid-summe {
  text-align: right;
  border-color: #000000;
  border-style: solid;
  border-width: 1px 1px 1px 0px;
}


.grid-summe-first {
  border-color: #000000;
  border-style: solid;
  border-width: 0px 1px 1px 1px;
}


.grid-header:first-child, .grid-summe-first:first-child, .grid-summe:first-child {
  border-width: 1px 1px 0px 1px;
}
/*
Farben
Hintergrund: #E4E8F1;
Font-Color: #000000;
Blau: #004088;
Orange: #ef7900;
hellblau: #6E92BB
aktiv(orange): #fcbe00;
hintergrund tabellenüberschrift: #9FA2A9;
*/


/* === Navigationsleiste === */
.navbar {
  background-color: black;
}


.dropdown-menu {
  background-color: black;
}


a.dropdown-item {
  color: #ef7900;
}


.navbar-light .navbar-nav .nav-link {
    color: #ef7900;
}


.navbar-light .navbar-nav .nav-link:hover {
  color: white;
}


.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active {
    color: #ef7900;
}


.navbar-toggler {
  background-color: white;
}


.dropdown-submenu {
  position: relative;
}


.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}


.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}


/* === Dashboard für fehlende Unterlagen === */
#dashboard-start-first {
  margin: 2rem;
  display: grid;
  grid-template-columns: repeat(4, auto);
  column-gap: 2.5rem;
  align-items: start;
  width: 95%;
}


@media (max-width: 1400px) {
  #dashboard-start-first {
    display: grid;
    grid-template-columns: repeat(3, auto);
  }
}


@media (max-width: 1200px) {
  #dashboard-start-first {
    display: grid;
    grid-template-columns: repeat(2, auto);
  }
}


@media (max-width: 900px) {
  #dashboard-start-first {
    display: grid;
    grid-template-columns: repeat(1, auto);
  }
}


#fehlende-unterlagen {
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: repeat(9, auto);
  width: 100%;
}


#auftragsstatus-kurz {
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, auto);
  width: 100%;
}


#geburtstag-intern {
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, auto);
  width: 100%;
}


#wichtige-links {
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: repeat(1, auto);
  width: 100%;
}

Alles anzeigen

html

Code

<main id="startseite">
			<div class="container-fluid" id="dashboard-start-first">
				<div id="fehlende-unterlagen">
					<div class="grid-header">Team/Disponent</div>
					<div class="grid-header">Jahresunt.</div>
					<div class="grid-header">Vorsorge</div>
					<div class="grid-header">APBP</div>
					<div class="grid-header">Checkliste</div>
					<div class="grid-header">HWK</div>
					<div class="grid-header">ausl. AÜV</div>
					<div class="grid-header">fehl. AÜV</div>
					<div class="grid-header">&sum;</div>
					<div class="row_first">BF</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_first">BF</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_first">BF</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_first">BF</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_first">BF</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_first">BF</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_ungerade">0</div>
					<div class="row_first">BF</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="row_gerade">0</div>
					<div class="grid-summe-first">Gesamt</div>
					<div class="grid-summe">0</div>
					<div class="grid-summe">0</div>
					<div class="grid-summe">0</div>
					<div class="grid-summe">0</div>
					<div class="grid-summe">0</div>
					<div class="grid-summe">0</div>
					<div class="grid-summe">0</div>
					<div class="grid-summe">0</div>
				</div>
				<div id="auftragsstatus-kurz">
					<div class="grid-header">Anwesenheit</div>
					<div class="grid-header">Anzahl</div>
					<div class="grid-header">Anteil</div>
					<div class="row_gerade">Krank</div>
					<div class="row_gerade">5</div>
					<div class="row_gerade">3%</div>
					<div class="row_ungerade">Produktiv</div>
					<div class="row_ungerade">100</div>
					<div class="row_ungerade">97%</div>
					<div class="grid-summe-first">Gesamt</div>
					<div class="grid-summe">103</div>
					<div class="grid-summe">100%</div>
				</div>
				<div id="geburtstag-intern">
					<div class="grid-header">Mitarbeiter</div>
					<div class="grid-header">am</div>
					<div class="grid-header">wird</div>
					<div class="row_gerade">Max Mustermann</div>
					<div class="row_gerade">29.03.</div>
					<div class="row_gerade">33</div>
					<div class="row_ungerade">Marlene Musterfrau</div>
					<div class="row_ungerade">10.04.</div>
					<div class="row_ungerade">29</div>
				</div>
				<div id="wichtige-links">
					<div class="grid-header">Links</div>
					<div class="row_gerade">Google</div>
					<div class="row_ungerade">Website</div>
					<div class="row_gerade">Wetter</div>
					<div class="row_ungerade">YouTube</div>
				</div>
			</div>
		</main>

Alles anzeigen

Sempervivum · 16. März 2021

Ja, diese Zeilen in unterschiedlichen Farben sehen gut aus und machen das Ganze übersichtlicher. Schade, dass das von Grid nicht unterstützt wird, bei einer Tabelle kann man es sehr einfach mit nth-child machen.

Rahmen um die cols in einer row, auch bei Umbruch

Jetzt mitmachen!

Teilen