Responsives CSS-Grid für mobile Geräte

[Mondgesang]

Meine Website ist derzeit nur für "normale" Desktopmonitore gebaut und sieht so aus:

/* GRID STRUCTURE */

.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
padding: 0;
gap: 15px;
}

header {
grid-column: 2 / span 10;
grid-row: 1;
float: left;
text-align: center;
}

nav {
grid-column: 2 / span 10;
grid-row: 2;
}

.bannerslider {
grid-column: 2 / span 10;
grid-row: 3;
}

main {
grid-column: 2 / span 8;
grid-row: 4 / span 2;
float: left;
}

.asidetop {
grid-column: 10 / span 2;
grid-row: 4;
float: left;
text-align: center;
}

.asidebottom {
grid-column: 10 / span 2;
grid-row: 5;
float: left;
}

footer {
grid-column: 2 / span 10;
grid-row: 6;
float: left;
}

Also eine sehr klassische Ansichtsweise. Header, darunter optionaler Bannerplatz, darunter Navi, darunter ein Block aus Artikelfeld und rechts die beiden Boxen für so News und Termine und darunter wiederum der Footer. Sieht auf dem Desktop perfekt aus. Genau wie ich das haben wollte.

Jetzt möchte ich, dass das auf Mobiltelefonen oder Tablets so aussieht, dass aus den 12 Säulen nur 1 Säule wird und alle Elemente nach einander kommen.

Header
Banner
Nav
Artikel
Box1 (News)
Box2 (Termine)
Footer

Ich habe bei gewissen Seiten wie W3 Schools oder SelfHTML gesehen, dass es im grid-template mit minmax(...px, ...px) gearbeitet wird aber schlau wurde ich nicht daraus und copy paste in meinen Code hat nicht funktioniert. Beim Zoomen in die Seite oder beim Test mit dem Handy blieb alles beim Alten.

 

[floq0r]

• Das float-rule ist auf den ersten Blick redundant wenn du mit Grids arbeitest
• Du hast für .grid Element die columns fix mit grid-template-columns definiert, damit das in Abhängigkeit der Bildschirmbreite wrapped bräuchtest du soetwas wie autofill

Ich würde die screen size über eine media query feststellen und dort für .grid ein anderes Layout definieren.

 

[wilk84]

Du solltest dich mal mit den Grundlagen von CSS und HTML beschäftigen, denn diese fehlen dir und durch copy/paste wirst du nichts lernen.

1. Für die gesamte HTML-Struktur "Grid" zu verwenden, ist nicht der Sinn von Grid.
2. Stichwort "CSS media queries"
3. Grid und Float ist Quatsch

 

[Mondgesang]

Jop, ich bin gerade dabei, händisch die @Media query zu testen. W3Schools hat hier folgendes:

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

Die haben sich das Leben bloß insofern einfach gemacht, dass die Klassen Col heißen. Ich versuch mal meine Klassen wie header nav etc bei min-width 768 eine width von 100% zu geben.

 

[tdbr]

Ich präferiere grids mit Namen für wenn du es als Layout benutzen willst. Spricht auch heute absolut nichts dagegen für simple Webseiten.
Media Queries: https://gridbyexample.com/examples/example13/

An Beispielen sehe ich es immer am einfachsten wenn ich mich mal wieder mit Frontend beschäftige.
https://gridbyexample.com/examples/

 

[netzgestaltung]

Ich baue das meistens andersrum also mobile first statt desktop first. bei dem kleinen beispiel kommt nicht viel rum aber das wäre so:

/* For mobile phones: every block element expands to 100% by default*/

@media only screen and (min-width: 769px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

PS: ich liebe es in CSS dinge zu löschen um es zu verbessern xD

 

[Mondgesang]

https://gridbyexample.com/examples/example13/

Das ist tatsächlich n ziemlich geiles Layout und sehr minimalistisch geschrieben... Hm... Mir gefällts sehr.

Ergänzung (21. August 2024)

Ich baue das meistens andersrum also mobile first statt desktop first

Jopp, das ist auch in den von @tdbr genannten Beispielen so. Es wird generell empfohlen von klein nach groß zu bauen. Da werde ich definitiv euren Rat befolgen.

 

[Mondgesang]

Nun sieht mein CSS so aus:

/* GRID STRUCTURE */

.grid {
  display: grid;
  padding: 20px;
  margin: 0;
  grid-gap: 15px;
  grid-template-areas:
    "header"
    "bannerslider"
    "nav"
    "main"
    "asidetop"
    "asidebottom"
    "footer"
}

@media only screen and (min-width: 1200px)  {
  .grid {

    grid-template-columns: 20% 20% 20% 20% auto;
    padding: 40px;
    margin: 0;
    grid-template-areas:
    "header header header header header"
    "bannerslider bannerslider bannerslider bannerslider bannerslider"
    "nav nav nav nav nav"
    "main main main main asidetop"
    "main main main main asidebottom" 
    "footer footer footer footer footer";
    }
}

header {
  grid-area: header;
}

.bannerslider {
  grid-area: bannerslider;
}

nav {
  grid-area: nav;
}

main {
  grid-area: main;
}

.asidetop {
  grid-area: asidetop;
}

.asidebottom {
  grid-area: asidebottom;
}

footer {
  grid-area: footer;
}

Die Umstellung zwischen den einzelnen Geräten klappt super. Ich musste bloß eine sehr hohe Mindestauflösung von 1200px einstellen, da bereits mein Google Pixel 3a 1080 hat.

Was jedoch nur noch stört ist: ihr seht, ich habe ein padding ins Grid eingefügt, einfach um die Boxen etwas vom Rand weg zu holen. Das Problem ist, dass mein Hintergrundbild dadurch um 40px von links und von oben mit versetzt wird. Rechts und unten füllt es den Monitor auf allen Geräten perfekt aus. Aber links und oben gibts einen 40px großen schwarzen Balken bis dann die Boxen beginnen.

Wie kann ich das ändern? Mein Hintergrundbild hat folgende CSS:

.bg {
  width: 100%;
  position: fixed;
  z-index: -1;
  opacity: 60%;
  filter: blur(3px) brightness(60%);
}

 

[tdbr]

Wir kennen dein HTML nicht.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image ?