Sətir və sütunların təyini

3.1 grid-template-columns xüsusiyyəti

CSS Grid Layout sətirlər və sütunlardan istifadə edərək veb-səhifələrin mürəkkəb sxemlərini yaratmağa imkan verir. Şəbəkənin strukturunu müəyyənləşdirmək üçün iki əsas xüsusiyyət — grid-template-rows və grid-template-columns. Bu xüsusiyyətlər Grid konteynerində sətir və sütunların sayını və ölçülərini təyin etməyə imkan verir, bu da tərtibatçılara elementlərin tərtibatına tam nəzarət verir.

grid-template-columns xüsusiyyəti şəbəkədə sütunların sayını və ölçülərini təyin edir. Bu xüsusiyyət piksellər (px), faizlər (%), elastiklik vahidləri (fr) və digər ölçü vahidlərində bir və ya bir neçə qiyməti qəbul edir.

Nümunə 1: Sütunların sabit ölçülərinin təyin edilməsi

Bu nümunədə şəbəkə üç sütundan ibarət olacaq. Birinci sütun 100px genişliyində, ikinci sütun 200px genişliyində, üçüncü sütun isə 100px genişliyindədir:

    
      .grid-container {
        display: grid;
        grid-template-columns: 100px 200px 100px; /* Sabit ölçülü üç sütun */
      }
    
  

Nümunə 2: Elastiklik vahidlərindən (fr) istifadə

Bu nümunədə şəbəkə üç sütundan ibarət olacaq. Birinci və üçüncü sütunlar bərabər miqdarda sahə tutacaq, ikinci sütun isə hər birinin iki qat genişliyində olacaq:

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr; /* Elastik ölçülərə malik üç sütun */
      }
    
  

Nümunə 3: Təkrarlama funksiyasından (repeat) istifadə

Bu nümunədə repeat funksiyası istifadə olunur, bu da yazını sadələşdirir. Şəbəkə bərabər enli üç sütundan ibarət olacaq:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Üç bərabər sütun */
      }
    
  

Nümunə 4: Minimum və maksimum ölçülərin təyin edilməsi (minmax)

Bu nümunədə hər üç sütun minimum 100px genişliyinə malikdir və mövcud sahəyə əsasən 1fr-ə qədər genişlənə bilər:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Minimum 100px genişliyə və elastik ölçülərə malik üç sütun */
      }
    
  

3.2 grid-template-rows xüsusiyyəti

grid-template-rows xüsusiyyəti grid-template-columns ilə oxşardır, lakin o, grid-dəki sətirlərin sayını və ölçülərini müəyyən edir. Bu xüsusiyyət müxtəlif ölçü vahidlərində bir və ya bir neçə dəyər qəbul edə bilər.

Nümunə 1: Sabit ölçülü sətirlərin təyin edilməsi

Bu nümunədə grid üç sətirdən ibarət olacaq. Birinci sətirin hündürlüyü 50px, ikinci sətirin hündürlüyü 100px, üçüncü sətirin isə hündürlüyü 50px olacaq:

    
      .grid-container {
        display: grid;
        grid-template-rows: 50px 100px 50px; /* Sabit ölçülü üç sətir */
      }
    
  

Nümunə 2: Elastik ölçü vahidlərindən (fr) istifadə

Bu nümunədə grid üç sətirdən ibarət olacaq. Birinci və üçüncü sətirlər bərabər ölçüdə olacaq, ikinci sətir isə onların hər birindən iki dəfə böyük olacaq:

    
      .grid-container {
        display: grid;
        grid-template-rows: 1fr 2fr 1fr; /* Elastik ölçülü üç sətir */
      }
    
  

Nümunə 3: Təkrar istifadə (repeat)

Bu nümunədə repeat funksiyasından istifadə edilmişdir ki, bu da yazını sadələşdirir. Grid eyni hündürlükdə olan üç sətirdən ibarət olacaq:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 1fr); /* Üç bərabər sətir */
      }
    
  

Nümunə 4: Minimum və maksimum ölçülərin təyin edilməsi (minmax)

Bu nümunədə üç sətirin hər biri minimum 50px hündürlüyə malik olacaq və mövcud yerə uyğun olaraq 1fr-ə qədər elastik ölçüyə malik olacaq:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, minmax(50px, 1fr)); /* Minimum 50px hündürlükdə və elastik ölçülü üç sətir */
      }
    
  

3.3 Xüsusiyyətlərin birləşdirilməsi

grid-template-rows və grid-template-columns xüsusiyyətlərinin birləşdirilməsi

Bu xüsusiyyətlər müxtəlif sətir və sütun ölçüləri ilə mürəkkəb cədvəllər yaratmaq üçün birlikdə istifadə edilə bilər.

Bu nümunədə cədvəl iki sütundan ibarət olacaq: ilk sütun mövcud sahənin 1 hissəsini, ikinci sütun isə 2 hissəsini tutacaq. Cədvəl həmçinin iki sətirdən ibarət olacaq: ilk sətirin hündürlüyü 100px, ikinci sətirin hündürlüyü isə 200px.

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
      }
    
  

Tam realizasiya nümunəsi:

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
        gap: 10px;
      }

      .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>CSS Grid Nümunəsi</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>
        </body>
      </html>
    
  

Kodun izahı:

• .grid-container: iki sütun və iki sətir olan grid-container-i təyin edir. Elementlər arasındakı boşluqlar gap xüsusiyyəti ilə təyin olunur
• .grid-item: grid elementləri üçün əsas üslubları təyin edir, məsələn, fon rəngi, mətn rəngi, kənar boşluğı, mətni mərkəzləşdirmək və çərçivə