Gunnar Bittersmann: Problem mit css-grid

Beitrag lesen

@@einsiedler

ganz einfache Seite

Dabei möchte ich article ein display: grid; mitgeben wobei die sections die einzelnen cards sind.

Was du article nennst sollte wohl kein article-Element sein, sondern das main-Element.

Die Navigation gehört durchaus mit in den header; das was du header nennst ist ein div oder p.

Grundstruktur:

<body>
	<header>
		<a href="#main">Zum Hauptinhalt</a>
		<p>Meine Website</p>
		<nav></nav>
	</header>

	<main id="main" tabindex="-1">
		<section></section></main>

	<footer></footer>
</body>

Bei mir wäre das so der Fall oder soll ich ganz auf Flexbox setzen?

Nein. Für main (article) ist Grid das Richtige.

Es ginge sicher auch alle mit einem Grid, aber man das durchaus trennen: Einteilung des Viewports (header/main/footer) mit Flexbox (oder Grid, da es aber nur in eine Richtung geht, ist Flexbox angebracht); Einteilung des Haupbereichs mit Grid.

body
{
	margin: 0;
	padding: 0;
	height: 100vh;
	display: flex;
	flex-flow: column nowrap;
}

main
{
	flex: 1;
	display: grid;
}

LLAP 🖖

--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
0 46

Problem mit css-grid

Pit
  • css
  • grid
  1. 0
    Gunnar Bittersmann
    1. 0
      Pit
  2. 0
    Regina Schaukrug
    1. 0
      Gunnar Bittersmann
      1. 0
        Regina Schaukrug
    2. 0
      Pit
  3. 0
    Tabellenkalk
  4. 0
    einsiedler
    1. 0
      Gunnar Bittersmann
      1. 0
        Gunnar Bittersmann
        1. 0
          einsiedler
          1. 0
            Gunnar Bittersmann
            1. 0
              einsiedler
              1. 0
                marctrix
              2. 0
                Gunnar Bittersmann
                1. 0
                  einsiedler
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      einsiedler
                  2. 0
                    einsiedler
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        einsiedler
      2. 0
        Felix Riesterer
        • html
        1. 0
          Gunnar Bittersmann
          1. 0
            marctrix
            1. 1
              Gunnar Bittersmann
              1. 0
                marctrix
            2. 0
              Matthias Apsel
              • markdown
              • zu diesem forum
              1. 0
                marctrix
      3. 0
        marctrix
    2. 0
      marctrix
  5. 0
    MrMurphy1
    1. 0
      einsiedler
      1. 0
        MrMurphy1
        1. 0
          einsiedler
          1. 0
            MrMurphy1
            1. 0
              Gunnar Bittersmann
              • css
              • html
          2. 0
            Gunnar Bittersmann
            1. 0
              einsiedler
              1. 0
                Gunnar Bittersmann
                1. 0
                  einsiedler
                  1. 1
                    Gunnar Bittersmann
                    1. 0
                      einsiedler
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          einsiedler
                          1. 1
                            MrMurphy1