Wyrównywanie elementów w Grid

7.1 Właściwość justify-items

CSS Grid Layout daje fajne narzędzia do zarządzania wyrównywaniem elementów w siatce. Właściwości justify-items, align-items i place-items pozwalają dokładnie ustawić, jak grid-elementy są rozmieszczone w swoich komórkach w poziomie i pionie. Przyjrzyjmy się tym właściwościom bliżej.

Właściwość justify-items określa poziome wyrównanie wszystkich grid-elementów wewnątrz ich komórek w całej siatce.

Składnia:

    
      .grid-container {
        justify-items: value;
      }
    
  

Gdzie:

• value: wartość określająca poziome wyrównanie elementów. Możliwe wartości:
  • start: wyrównuje elementy do początku komórki
  • end: wyrównuje elementy do końca komórki
  • center: centruje elementy wewnątrz komórki
  • stretch (domyślnie): rozciąga elementy, aby wypełniły całą szerokość komórki

Przykład 1: Wyrównanie do początku komórki

W tym przykładzie wszystkie elementy będą wyrównane do lewego brzegu swoich komórek:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: start; /* Wszystkie elementy są wyrównane do początku komórki */
      }
    
  

Przykład 2: Centrowanie elementów

W tym przykładzie wszystkie elementy będą wycentrowane wewnątrz swoich komórek:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center; /* Wszystkie elementy są wycentrowane wewnątrz komórki */
      }
    
  

7.2 Właściwość align-items

Właściwość align-items określa pionowe wyrównanie wszystkich grid-elementów wewnątrz ich komórek w całej siatce.

Składnia:

    
      .grid-container {
        align-items: value;
      }
    
  

Gdzie:

• value: wartość określająca pionowe wyrównanie elementów. Możliwe wartości:
  • start: wyrównuje elementy do początku komórki
  • end: wyrównuje elementy do końca komórki
  • center: centruje elementy wewnątrz komórki w pionie
  • stretch (domyślnie): rozciąga elementy, aby wypełniły całą wysokość komórki

Przykład 1: Wyrównanie do początku komórki

W tym przykładzie wszystkie elementy będą wyrównane do górnego brzegu swoich komórek:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: start; /* Wszystkie elementy są wyrównane do góry komórki */
      }
    
  

Przykład 2: Centrowanie elementów w pionie

W tym przykładzie wszystkie elementy będą wycentrowane w pionie wewnątrz swoich komórek:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: center; /* Wszystkie elementy są wycentrowane w pionie wewnątrz komórki */
      }
    
  

7.3 Właściwość place-items

Właściwość place-items jest skróconym zapisem dla jednoczesnego ustawienia wartości align-items i justify-items.

Składnia:

    
      .grid-container {
        place-items: align-value justify-value;
      }
    
  

Gdzie:

• align-value: wartość dla pionowego wyrównania wewnątrz komórki (align-items)
• justify-value: wartość dla poziomego wyrównania wewnątrz komórki (justify-items)

W przypadku podania jednej wartości dla właściwości place-items, np. place-items: stretch, elementy będą wyrównane w obu kierunkach.

Przykład 1: Centrowanie elementów w pionie i poziomie

W tym przykładzie wszystkie elementy będą wycentrowane wewnątrz swoich komórek zarówno w poziomie, jak i pionie:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: center; /* Elementy są wycentrowane zarówno w poziomie, jak i pionie */
      }
    
  

Przykład 2: Rozciąganie elementów na wysokość i wyrównanie do lewego górnego rogu

W tym przykładzie wszystkie elementy będą rozciągnięte na wysokość i wyrównane do lewego górnego rogu swoich komórek:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: stretch start; /* Elementy są rozciągnięte na całą wysokość komórki i wyrównane do lewego górnego rogu */
      }
    
  

7.4 Pełna implementacja

Przykład pełnej implementacji:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Trzy kolumny o tej samej szerokości */
        grid-template-rows: repeat(3, 100px); /* Trzy wiersze o stałej wysokości */
        gap: 10px;
        place-items: center center; /* Centrowanie elementów zarówno w poziomie, jak i pionie */
      }

      .grid-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
        text-align: center;
        border: 1px solid #fff;
      }
    
  

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Przykład wyrównania elementów w CSS Grid</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item item1">Element 1</div>
            <div class="grid-item item2">Element 2</div>
            <div class="grid-item item3">Element 3</div>
            <div class="grid-item item4">Element 4</div>
            <div class="grid-item item5">Element 5</div>
            <div class="grid-item item6">Element 6</div>
          </div>
        </body>
      </html>
    
  

Wyjaśnienie kodu:

• .grid-container: tworzy kontener Grid z trzema kolumnami o tej samej szerokości i trzema wierszami o stałej wysokości. Używa właściwości place-items do centrowania elementów zarówno w poziomie, jak i pionie
• .grid-item: definiuje podstawowe style dla elementów siatki, takie jak kolor tła, kolor tekstu, padding, centrowanie tekstu i obramowanie