Automatyczne rozmieszczanie

5.1 Właściwość grid-auto-rows

CSS Grid Layout oferuje świetne narzędzia do automatycznego rozmieszczania elementów w siatce. Właściwości grid-auto-rows, grid-auto-columns i grid-auto-flow pomagają zarządzać zachowaniem elementów, które nie są jednoznacznie ustalone w siatce. Zobaczmy te właściwości bardziej szczegółowo.

Właściwość grid-auto-rows określa wysokość wierszy, które są dodawane automatycznie, kiedy elementy wychodzą poza określone wiersze.

Składnia:

    
      .grid-container {
        grid-auto-rows: value;
      }
    
  

Gdzie:

• value: wysokość automatycznie dodawanych wierszy. Może być określona w różnych jednostkach miary (px, %, fr, auto itd.)

Przykład 1: Stała wysokość wierszy

W tym przykładzie wszystkie automatycznie dodane wiersze będą miały stałą wysokość 100px:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Trzy kolumny tej samej szerokości */
        grid-auto-rows: 100px; /* Automatycznie dodawane wiersze będą mieć wysokość 100px */
      }
    
  

Przykład 2: Elastyczna wysokość wierszy

W tym przykładzie automatycznie dodane wiersze będą miały minimalną wysokość 100px, ale mogą się zwiększać w razie potrzeby:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100px, auto); /* Minimalna wysokość wierszy 100px, może się zwiększać automatycznie */
      }
    
  

5.2 Właściwość grid-auto-columns

Właściwość grid-auto-columns określa szerokość kolumn, które są dodawane automatycznie, kiedy elementy wychodzą poza określone kolumny.

Składnia:

    
      .grid-container {
        grid-auto-columns: value;
      }
    
  

Gdzie:

• value: szerokość automatycznie dodawanych kolumn. Może być określona w różnych jednostkach miary (px, %, fr, auto itd.)

Przykład 1: Stała szerokość kolumn

W tym przykładzie wszystkie automatycznie dodane kolumny będą miały stałą szerokość 100px:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px); /* Trzy wiersze o stałej wysokości */
        grid-auto-columns: 100px; /* Automatycznie dodawane kolumny będą mieć szerokość 100px */
      }
    
  

Przykład 2: Elastyczna szerokość kolumn

W tym przykładzie automatycznie dodane kolumny będą miały minimalną szerokość 100px, ale mogą zwiększać się do jednej części wolnej przestrzeni:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        grid-auto-columns: minmax(100px, 1fr); /* Minimalna szerokość kolumn 100px, może zwiększać się do jednej części wolnej przestrzeni */
      }
    
  

5.3 Właściwość grid-auto-flow

Właściwość grid-auto-flow określa, jak automatycznie rozmieszczać elementy w siatce, które nie są jednoznacznie ustawione za pomocą właściwości grid-row i grid-column.

Składnia:

    
      .grid-container {
        grid-auto-flow: value;
      }
    
  

Gdzie:

value: wartość określająca kolejność rozmieszczania elementów. Możliwe wartości:

• row (domyślnie): elementy rozmieszczane są w wierszach
• column: elementy rozmieszczane są w kolumnach
• dense: elementy rozmieszczane są z gęstym wypełnieniem, bez pustych komórek (używane razem z row lub column)

Przykład 1: Rozmieszczanie w wierszach

W tym przykładzie elementy będą rozmieszczane w wierszach, wypełniając wiersze jeden po drugim:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: row; /* Elementy rozmieszczane są w wierszach */
      }
    
  

Przykład 2: Rozmieszczanie w kolumnach

W tym przykładzie elementy będą rozmieszczane w kolumnach, wypełniając kolumny jeden po drugim:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: column; /* Elementy rozmieszczane są w kolumnach */
      }
    
  

Przykład 3: Gęste wypełnienie

W tym przykładzie elementy będą rozmieszczane w wierszach z gęstym wypełnieniem, co minimalizuje ilość pustych komórek:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: row dense; /* Elementy rozmieszczane są w wierszach z gęstym wypełnieniem */
      }
    
  

5.4 Przykład pełnej realizacji

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Trzy kolumny tej samej szerokości */
        grid-auto-rows: 100px; /* Automatycznie dodawane wiersze będą mieć wysokość 100px */
        grid-auto-flow: row dense; /* Elementy rozmieszczane są w wierszach z gęstym wypełnieniem */
        gap: 10px;
      }

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

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

Wyjaśnienie kodu:

• .grid-container: tworzy kontener Grid z trzema kolumnami tej samej szerokości i automatycznymi wierszami o wysokości 100px. Elementy rozmieszczane są w wierszach z gęstym wypełnieniem
• .grid-item: definiuje podstawowe style dla elementów siatki, takie jak kolor tła, kolor tekstu, odstępy, centrowanie tekstu i granica

1

Опрос

Podstawy CSS Grid,  27 уровень,  4 лекция

недоступен

Podstawy CSS Grid

Podstawy CSS Grid

Открыть