Dərslər
Başlamaq
Öyrənməyə başlayın
CodeGym /Kurslar /Frontend SELF AZ /Grid Sahələri

Grid Sahələri

Frontend SELF AZ
Səviyyə , Dərs
Mövcuddur

9.1 grid-template-areas xüsusiyyəti

CSS Grid Layout adlı texnologiya adlandırılmış sahələr (grid areas) vasitəsilə mürəkkəb layoutlar yaratmaq üçün geniş imkanlar təqdim edir. grid-template-areas xüsusiyyəti griddəki sahələri müəyyən etməyə imkan verir, bu da elementlərin yerləşdirilməsini asanlaşdırmaq üçündür. Bu xüsusiyyət tərtibatçılara layoutu vizual olaraq təşkil etməyə və onun dəstəyini sadələşdirməyə şərait yaradır.

grid-template-areas xüsusiyyətinin əsas konsepsiyaları

  1. Sahələrin təyin edilməsi:
    • grid-template-areas xüsusiyyəti ilə gridin müxtəlif sahələri üçün adlar təyin etmək mümkündür
    • Hər bir sahə adı düzbucaqlı şəkildə olan hüceyrələr qrupunu təmsil edir
  2. Adlandırılmış sahələrdən istifadə:
    • Müəyyən edilmiş sahələr elementləri yerləşdirmək üçün istifadə oluna bilər, hər bir element üçün grid-area xüsusiyyəti təyin edilir

grid-template-areas üçün sintaksis:

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

Grid elementləri üçün sintaksis:

    
      .header {
        grid-area: header;
      }

      .sidebar {
        grid-area: sidebar;
      }

      .main {
        grid-area: main;
      }

      .footer {
        grid-area: footer;
      }

İzah:

  • grid-template-areas xüsusiyyətindəki hər bir sətir griddə bir sətiri təmsil edir
  • Hər bir sətirdəki söz bir hüceyrəni və ya hüceyrə qrupunu təmsil edir
  • Boş hüceyrələr üçün nöqtələr (.) istifadə oluna bilər

9.2 grid-template-areas istifadəsinə nümunə

Tam realizasiya nümunəsi:

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>Grid Areas nümunəsi</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="header">Başlıq</div>
            <div class="sidebar">Yan panel</div>
            <div class="main">Əsas Kontent</div>
            <div class="footer">Altbilgi</div>
          </div>
        </body>
      </html>

Kodun izahı:

  • .grid-container: display: grid vasitəsilə Grid konteynerini müəyyənləşdirir və grid-template-areas istifadə edərək şəbəkəni təşkil edir. Bu halda, şəbəkə üç sətirdən ibarətdir: birinci sətir - başlıqdır, ikinci sətir yan panel və əsas kontentdən ibarətdir, üçüncü sətir isə altbilgidir.
  • .header, .sidebar, .main, .footer: şəbəkənin müxtəlif sahələri üçün üslubları müəyyən edir və grid-template-areas-dəki adlarla grid-area xüsusiyyəti vasitəsilə bu sahələri əlaqələndirir.

9.3 Boş Sahələrin İdarə Edilməsi

grid-template-areas xüsusiyyəti nöqtə (.) simvolundan istifadə edərək sahələri boş buraxmağa imkan verir.

Tam implementasiya nümunəsi:

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>Grid Areas-də Boş Sahələr</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="header">Başlıq</div>
            <div class="main">Əsas Kontent</div>
            <div class="footer">Altlıq</div>
          </div>
        </body>
      </html>

Kodun izahı:

  • .grid-container: üç sahə ilə Grid konteyner yaradır: başlıq, əsas kontent və altlıq. Ortadakı sətir əsas kontentin solunda və sağında boş sahələr saxlayır.
  • .header, .main, .footer: sahələr üçün stillər müəyyən edir və onları grid-template-areas-dəki adlarla əlaqələndirir.
Şərhlər
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION