Ostatnio rozwijam się we front-endzie, w szczególności kładę nacisk na techniki reponsive web design (choć więcej w tym pojęciu designu niż programowania). Podczas tworzenia CSS natrafiłem na pewną trudność.

TL;DR (streszczenie):

Jak wyśrodkować kontener grida w obszarze wyświetlania tak, żeby przy okazji jego elementy rozciągały się na całą jego szerokość?

Ustaliłem, że w aktualnie tworzonej przykładowej stronie będę używać grida (CSS Grid Layout). Postanowiłem, że kontenerem zrobię element <body>, żeby nie tworzyć bytów ponad potrzebę, to znaczy – zbyt wielu elemetów <div> w sobie (co prawda nie wiem, czy ustawienie akurat elementu <body> jako kontenera grida jest w porządku, ale przyjąłem, że wygląda w miarę sensownie).

I teraz: kiedy szerokość obszaru wyświetlania (tj. viewportu) jest średnia, powiedzmy, do 980px, to strona wygląda w porządku. Jednak potem elementy się tak rozchodzą, że zdecydowałem, że ustawię max-width dla <body> równą te 980px. Ale to powoduje kolejny problem: przy powiększaniu się obszaru wyświetlania cały element <body> zostaje mi po jego lewej stronie, a ja chciałbym, żeby był wyśrodkowany w obszarze wyświetlania. Próbowałem to zrobić przy pomocy właściwości justify-items, ale jeśli ustawię wartość center, to wtedy co prawda <body> zostaje wyśrodkowane, ale tracę domyślną wartość tej właściwości stretch – a przez to dzieci <body> nie mają jednakowej szerokości i wszystko wygląda, jakby wyszło z cyrku.

Moje pytanie: Jak zrobić tak, żeby nie tworzyć kolejnego kontenera w <body> (lub na zewnątrz), nie wykorzystywać też elementu <html> a żeby wyśrodkować treść strony przy obszarze wyświetlania większym niż max-width?

To jest mój kod (to tylko koncepcja, u mnie wygląda to trochę inaczej):
HTML:

<body>
  <div class="pierwszy">
    Pierwszy div
  </div>
  <div class="drugi">
    Drugi div
  </div>
  <div class="trzeci">
    Trzeci div
  </div>
</body>

CSS:

body {
  max-width: 300px;
  display: grid;
  grid-template-rows: auto 100px auto;
  grid-template-columns: auto;
}

.pierwszy {
  background: blue;
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
}

.drugi {
  background: green;
  grid-row: 2 / span 1;
  grid-column: 1 / span 1;
}

.trzeci {
  background: grey;
  grid-row: 3 / span 1;
  grid-column: 1 / span 1;
}

Gdyby ktoś potrzebował:
https://jsfiddle.net/zmyrhy1k/10/

Zdaję sobie sprawę, że rozwiązanie może być bardzo proste, jak również że nie istnieje (bo np. trzeba utworzyć dodatkowy kontener).