Grid-də elementlərin hizalanması

7.1 justify-items xüsusiyyəti

CSS Grid Layout, grid içində elementlərin hizalanmasını idarə etmək üçün effektiv vasitələr təqdim edir. justify-items, align-items və place-items xüsusiyyətləri, grid elementlərin öz hüceyrələrində üfüqi və şaquli olaraq necə yerləşəcəyini dəqiq tənzimləməyə imkan verir. Bu xüsusiyyətləri daha ətraflı nəzərdən keçirək.

justify-items xüsusiyyəti, bütün grid elementlərinin öz hüceyrələrində üfüqi hizalanmasını müəyyən edir.

Syntax:

    
      .grid-container {
        justify-items: value;
      }
    
  

Burada:

• value: elementlərin üfüqi hizalanmasını təyin edən dəyər. Mümkün dəyərlər:
  • start: elementləri hüceyrənin başlanğıcına hizalayır
  • end: elementləri hüceyrənin sonuna hizalayır
  • center: elementləri hüceyrənin mərkəzində yerləşdirir
  • stretch (default olaraq): elementləri bütün hüceyrə genişliyini əhatə edəcək şəkildə genişləndirir

Nümunə 1: Hüceyrənin başlanğıcına hizalanma

Bu nümunədə bütün elementlər öz hüceyrələrinin sol kənarına hizalanacaq:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: start; /* Bütün elementlər hüceyrənin başlanğıcına hizalanır */
      }
    
  

Nümunə 2: Elementlərin mərkəzləşdirilməsi

Bu nümunədə bütün elementlər öz hüceyrələrinin içində mərkəzləşdiriləcək:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center; /* Bütün elementlər hüceyrənin içində mərkəzləşir */
      }
    
  

7.2 align-items xassəsi

align-items xassəsi bütün grid-elementlərin öz hücrələri daxilində şaquli hizalanmasını müəyyən edir.

Sintaksis:

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

Burada:

• value: elementlərin şaquli hizalanmasını müəyyən edən dəyər. Mümkün dəyərlər:
  • start: elementləri hücrənin yuxarı hissəsinə hizalayır
  • end: elementləri hücrənin aşağı hissəsinə hizalayır
  • center: elementləri şaquli olaraq hücrənin ortasında mərkəzləşdirir
  • stretch (default): elementləri hücrənin bütün hündürlüyünü dolduracaq şəkildə uzadır

Məsələn 1: Hücrənin yuxarı hissəsinə hizalanma

Bu nümunədə bütün elementlər hücrələrinin yuxarı kənarına hizalanacaq:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: start; /* Bütün elementlər hücrənin yuxarı hissəsinə hizalanır */
      }
    
  

Məsələn 2: Elementlərin şaquli olaraq mərkəzləşdirilməsi

Bu nümunədə bütün elementlər öz hücrələrinin daxilində şaquli olaraq mərkəzləşdiriləcək:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: center; /* Bütün elementlər hücrənin daxilində şaquli olaraq mərkəzləşdirilir */
      }
    
  

7.3 place-items xüsusiyyəti

place-items xüsusiyyəti align-items və justify-items üçün dəyərləri eyni zamanda təyin etmək üçün qısaldılmış yazılışdır.

Sintaksis:

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

Harada:

• align-value: hücrə daxilində şaquli hizalanma üçün dəyər (align-items)
• justify-value: hücrə daxilində üfüqi hizalanma üçün dəyər (justify-items)

place-items xüsusiyyəti üçün bir dəyər təyin edilərsə, məsələn, place-items: stretch, elementlər hər iki istiqamətdə hizalanacaq.

Nümunə 1: Elementləri şaquli və üfüqi mərkəzləndirmək

Bu nümunədə bütün elementlər həm üfüqi, həm də şaquli olaraq öz hücrələrində mərkəzləşdiriləcək:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: center; /* Elementlər həm üfüqi, həm də şaquli olaraq mərkəzləşdirilir */
      }
    
  

Nümunə 2: Elementləri hündürlük üzrə genişləndirmək və sol yuxarı küncə hizalamaq

Bu nümunədə bütün elementlər hündürlük üzrə genişləndiriləcək və hücrələrində sol yuxarı küncə hizalanacaq:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: stretch start; /* Elementlər hücrənin tam hündürlüyünə genişlənir və sol yuxarı küncə hizalanır */
      }
    
  

7.4 Tam tətbiq nümunəsi

Tam tətbiq nümunəsi:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Eyni enə malik üç sütun */
        grid-template-rows: repeat(3, 100px); /* Sabit hündürlükdə olan üç sətir */
        gap: 10px;
        place-items: center center; /* Elementlərin həm üfüqi, həm də şaquli mərkəzləşdirilməsi */
      }

      .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-də elementlərin hizalanma nümunəsi</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>
    
  

Kodun izahı:

• .grid-container: Eyni enə malik üç sütun və sabit hündürlükdə üç sətir olan Grid konteynerini yaradır. Elementləri həm üfüqi, həm də şaquli mərkəzləşdirmək üçün place-items xüsusiyyətindən istifadə edir
• .grid-item: Şəbəkə elementləri üçün fon rəngi, mətn rəngi, boşluqlar, mətnin mərkəzləşdirilməsi və sərhəd kimi əsas üslubları müəyyən edir