Lekcje
Rozpocznij
Rozpocznij naukę
CodeGym /Kurs Javy /Frontend SELF PL /Grid Areas

Grid Areas

Frontend SELF PL
Poziom 28 , Lekcja 3
Dostępny

9.1 Właściwość grid-template-areas

CSS Grid Layout daje niezłe możliwości do tworzenia skomplikowanych layoutów dzięki nazwanym obszarom (grid areas). Właściwość grid-template-areas pozwala ustawić obszary siatki, które można wykorzystać do prostszego rozmieszczania elementów. To narzędzie pozwala deweloperom wizualnie organizować layout i ułatwia jego utrzymanie.

Podstawowe koncepcje grid-template-areas

  1. Definiowanie obszarów:
    • Właściwość grid-template-areas pozwala przypisać nazwy do różnych obszarów siatki
    • Każda nazwa obszaru to prostokątna grupa komórek
  2. Użycie nazwanych obszarów:
    • Zdefiniowane obszary można używać do rozmieszczania elementów, ustawiając właściwość grid-area dla każdego z nich

Składnia grid-template-areas:

    
      .container {
        display: grid;
        grid-template-areas:
          "header header header"
          "sidebar main main"
          "footer footer footer"
      }

Składnia dla elementów Grid:

    
      .header {
        grid-area: header;
      }

      .sidebar {
        grid-area: sidebar;
      }

      .main {
        grid-area: main;
      }

      .footer {
        grid-area: footer;
      }
Java university

Wyjaśnienie:

  • Każdy wiersz w wartości grid-template-areas reprezentuje wiersz w siatce
  • Każde słowo w wierszu to komórka lub grupa komórek
  • Kropki (.) można używać dla pustych komórek

9.2 Przykład użycia grid-template-areas

Przykład pełnej implementacji:

CSS
    
      .grid-container {
        display: grid;
        grid-template-areas:
          "header header header"
          "sidebar main main"
          "footer footer footer";
        grid-gap: 10px;
      }

      .header {
        grid-area: header;
        background-color: #2ecc71;
        padding: 20px;
        text-align: center;
      }

      .sidebar {
        grid-area: sidebar;
        background-color: #3498db;
        padding: 20px;
        text-align: center;
      }

      .main {
        grid-area: main;
        background-color: #9b59b6;
        padding: 20px;
        text-align: center;
      }

      .footer {
        grid-area: footer;
        background-color: #e74c3c;
        padding: 20px;
        text-align: center;
      }
HTML
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Przykład Grid Areas</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="header">Header</div>
            <div class="sidebar">Sidebar</div>
            <div class="main">Main Content</div>
            <div class="footer">Footer</div>
          </div>
        </body>
      </html>

Wyjaśnienie kodu:

  • .grid-container: definiuje kontener Grid za pomocą display: grid i ustala layout siatki przy użyciu grid-template-areas. W tym przypadku layout składa się z trzech wierszy: pierwszy to nagłówek, drugi składa się z paska bocznego i głównej treści, trzeci to stopka
  • .header, .sidebar, .main, .footer: definiują style dla różnych obszarów siatki i łączą te obszary z nazwami w grid-template-areas za pomocą właściwości grid-area

9.3 Zarządzanie pustymi obszarami

Właściwość grid-template-areas pozwala zostawiać obszary puste, używając kropki (.) do oznaczenia pustego miejsca.

Przykład pełnej implementacji:

CSS
    
      .grid-container {
        display: grid;
        grid-template-areas:
          "header header header"
          ". main ."
          "footer footer footer";
        grid-gap: 10px;
      }

      .header {
        grid-area: header;
        background-color: #2ecc71;
        padding: 20px;
        text-align: center;
      }

      .main {
        grid-area: main;
        background-color: #9b59b6;
        padding: 20px;
        text-align: center;
      }

      .footer {
        grid-area: footer;
        background-color: #e74c3c;
        padding: 20px;
        text-align: center;
      }
HTML
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Puste obszary Grid Areas</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="header">Header</div>
            <div class="main">Main Content</div>
            <div class="footer">Footer</div>
          </div>
        </body>
      </html>

Wyjaśnienie kodu:

  • .grid-container: tworzy kontener Grid z trzema obszarami: nagłówek, główna treść i stopka. Środkowy wiersz zawiera puste obszary po lewej i prawej stronie głównej treści
  • .header, .main, .footer: definiują style dla obszarów i łączą je z nazwami obszarów w grid-template-areas
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION