Wyrównanie kontenera Grid

8.1 Właściwość justify-content

CSS Grid Layout dostarcza potężnych narzędzi do zarządzania wyrównaniem całego kontenera siatki w dostępnej przestrzeni. Właściwości justify-content, align-content i place-content pozwalają kontrolować wyrównanie wierszy i kolumn w kontenerze, zapewniając elastyczność i precyzję podczas tworzenia layoutów.

Właściwość justify-content zarządza horyzontalnym wyrównaniem całej siatki w kontenerze. Ta właściwość jest przydatna, gdy rozmiar kontenera jest większy niż wymagana szerokość samej siatki.

Składnia:

    
      .grid-container {
        display: grid;
        justify-content: value;
      }
    
  

Gdzie: value może przyjąć następujące wartości:

• start: wyrównaj siatkę do początku kontenera
• end: wyrównaj siatkę do końca kontenera
• center: wyrównaj siatkę do środka kontenera
• stretch: rozciągnij siatkę, aby wypełnić cały kontener
• space-around: umieść równą przestrzeń wokół każdego elementu
• space-between: umieść równą przestrzeń między elementami
• space-evenly: umieść równą przestrzeń między elementami i krawędziami kontenera

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

W tym przykładzie cała zawartość zostanie wyrównana do lewego brzegu kontenera:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: start; /* Wyrównuje zawartość do lewego brzegu kontenera */
      }
    
  

Przykład 2: Centrowanie zawartości

W tym przykładzie cała zawartość zostanie wyśrodkowana w kontenerze:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: center; /* Centrumje zawartość w kontenerze */
      }
    
  

8.2 Właściwość align-content

Właściwość align-content określa, jak zawartość siatki jest wyrównana w osi pionowej w grid-kontenerze. Jest to przydatne, gdy siatka nie wypełnia całej dostępnej przestrzeni pionowej.

Składnia:

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

Gdzie: value — wartość określająca pionowe wyrównanie zawartości. Możliwe wartości:

• start: wyrównuje zawartość do początku kontenera
• end: wyrównuje zawartość do końca kontenera
• center: centrumje zawartość w kontenerze
• space-between: umieszcza zawartość z równymi odstępami między elementami
• space-around: umieszcza zawartość z równymi odstępami wokół każdego elementu
• space-evenly: umieszcza zawartość z równymi odstępami między elementami i krawędziami kontenera
• stretch (domyślnie): rozciąga zawartość, aby wypełnić całą dostępną przestrzeń

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

W tym przykładzie cała zawartość zostanie wyrównana do górnego brzegu kontenera:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: start; /* Wyrównuje zawartość do górnego brzegu kontenera */
      }
    
  

Przykład 2: Centrowanie zawartości

W tym przykładzie cała zawartość zostanie wyśrodkowana w kontenerze:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: center; /* Centrumje zawartość w kontenerze */
      }
    
  

8.3 Właściwość place-content

Właściwość place-content jest skróconą notacją do jednoczesnego ustawiania wartości justify-content i align-content.

Składnia:

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

Gdzie:

• justify-value: wartość dla horyzontalnego wyrównania (justify-content)
• align-value: wartość dla pionowego wyrównania (align-content)

Przykład 1: Centrowanie zawartości horyzontalnie i pionowo

W tym przykładzie cała zawartość będzie centrumwana w kontenerze zarówno horyzontalnie, jak i pionowo:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: center center; /* Centrumje zawartość zarówno horyzontalnie, jak i pionowo */
      }
    
  

Przykład 2: Rozciąganie zawartości na szerokość i wyrównanie do górnego brzegu

W tym przykładzie zawartość będzie rozciągnięta na szerokość kontenera i wyrównana do górnego brzegu:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: stretch start; /* Rozciąga zawartość na szerokość i wyrównuje do górnego brzegu */
      }
    
  

8.4 Przykład pełnej realizacji

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px); /* Trzy kolumny stałej szerokości */
        grid-template-rows: repeat(3, 100px); /* Trzy wiersze stałej wysokości */
        gap: 10px;
        place-content: center center; /* Centrumje zawartość horyzontalnie i pionowo */
      }

      .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 kontenera 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 stałej szerokości i trzema wierszami stałej wysokości. Używa właściwości place-content do centrumwania zawartości horyzontalnie i pionowo
• .grid-item: definiuje podstawowe style dla elementów siatki, takie jak kolor tła, kolor tekstu, wcięcia, centrumwanie tekstu i granica

1

Zadanie

Frontend SELF PL, poziom 28, lekcja 2

Niedostępne

Rozciąganie zawartości

Rozciąganie zawartości

Otwórz

1

Zadanie

Frontend SELF PL, poziom 28, lekcja 2

Niedostępne

Centrowanie zawartości

Centrowanie zawartości

Otwórz