MediaWiki:Zum grid.css: Unterschied zwischen den Versionen

Aus ZUM-Unterrichten
KKeine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
 
(13 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
@container (width > 30em) {
/*
* based on: https://gomakethings.com/how-to-create-a-responsive-grid-system-with-css-grid/
*/
 
@media (min-width:851px) {
   .zum-row {
   .zum-row {
     display: grid;
     display: grid;
Zeile 6: Zeile 10:
column-gap: 0.75rem;
column-gap: 0.75rem;
   }
   }
  .zum-row-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15em), 1fr));
  }
.zum-grid-1-6, .zum-grid-2-12 {
grid-column: auto / span 2;
}


   .zum-grid-1-4, .zum-grid-3-12 {
   .zum-grid-1-4, .zum-grid-3-12 {
Zeile 25: Zeile 38:
.zum-grid-3-4, .zum-grid-9-12 {
.zum-grid-3-4, .zum-grid-9-12 {
grid-column: auto / span 9;
grid-column: auto / span 9;
}
.zum-grid-5-6, .zum-grid-10-12 {
grid-column: auto / span 10;
}
[class*="zum-grid-start-"] {
grid-row-start: 1;
}
.zum-grid-start-first, .zum-grid-start-1-12 {
grid-column-start: 1;
}
.zum-grid-start-fourth, .zum-grid-start-1-4 {
grid-column-start: 4;
}
.zum-grid-start-third, .zum-grid-start-1-3 {
grid-column-start: 5;
}
.zum-grid-start-half, .zum-grid-start-1-2 {
grid-column-start: 7;
}
.zum-grid-start-2-3, .zum-grid-start-2-3 {
grid-column-start: 9;
}
.zum-grid-start-three-fourths, .zum-grid-start-3-4 {
grid-column-start: 10;
}
.zum-row-gap-large {
column-gap: 1.1875rem;
}
.zum-row-no-gap {
column-gap: 0;
}
}
}
}

Aktuelle Version vom 4. Mai 2024, 08:18 Uhr

/*
 * based on: https://gomakethings.com/how-to-create-a-responsive-grid-system-with-css-grid/
 */

@media (min-width:851px) {
  .zum-row {
    display: grid;
	grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr auto;
	column-gap: 0.75rem;
  }

  .zum-row-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15em), 1fr));
  }


.zum-grid-1-6, .zum-grid-2-12 {
	grid-column: auto / span 2;
}

  .zum-grid-1-4, .zum-grid-3-12 {
	grid-column: auto / span 3;
}

.zum-grid-1-3, .zum-grid-4-12 {
	grid-column: auto / span 4;
}

.zum-grid-2-3, .zum-grid-8-12 {
	grid-column: auto / span 8;
}

.zum-grid-1-2, .zum-grid-6-12 {
	grid-column: auto / span 6;
}

.zum-grid-3-4, .zum-grid-9-12 {
	grid-column: auto / span 9;
}
.zum-grid-5-6, .zum-grid-10-12 {
	grid-column: auto / span 10;
}
[class*="zum-grid-start-"] {
	grid-row-start: 1;
}
.zum-grid-start-first, .zum-grid-start-1-12 {
	grid-column-start: 1;
}

.zum-grid-start-fourth, .zum-grid-start-1-4 {
	grid-column-start: 4;
}

.zum-grid-start-third, .zum-grid-start-1-3 {
	grid-column-start: 5;
}

.zum-grid-start-half, .zum-grid-start-1-2 {
	grid-column-start: 7;
}

.zum-grid-start-2-3, .zum-grid-start-2-3 {
	grid-column-start: 9;
}

.zum-grid-start-three-fourths, .zum-grid-start-3-4 {
	grid-column-start: 10;
}
.zum-row-gap-large {
	column-gap: 1.1875rem;
}

.zum-row-no-gap {
	column-gap: 0;
}
}