Grid Konteynerinin Hizalanması

8.1 justify-content Əmlakı

CSS Grid Layout, şəbəkə konteynerinin mövcud sahə daxilində sıralanmasını idarə etmək üçün güclü alətlər təklif edir. justify-content, align-content və place-content əmlakları, konteyner daxilində sətir və sütunların sıralanmasını nəzarətdə saxlamaq üçün çeviklik və dəqiqlik təmin edir.

justify-content əmlakı, bütün şəbəkənin konteyner içində üfüqi sıralanmasını idarə edir. Bu əmlak, konteyner ölçüsünün şəbəkənin lazım olan eni ilə müqayisədə daha böyük olduğu hallarda faydalıdır.

Syntax:

    
      .grid-container {
        display: grid;
        justify-content: value;
      }
    
  

Burada: value aşağıdakı dəyərləri ala bilər:

• start: şəbəkəni konteynerin başlanğıcına sıralamaq
• end: şəbəkəni konteynerin sonuna sıralamaq
• center: şəbəkəni konteynerin mərkəzinə sıralamaq
• stretch: şəbəkəni konteynerin hamısını dolduracaq şəkildə genişləndirmək
• space-around: hər elementin ətrafında bərabər sahə qoymaq
• space-between: elementlər arasında bərabər sahə qoymaq
• space-evenly: elementlər və konteynerin kənarları arasında bərabər sahə qoymaq

Nümunə 1: Konteynerin başlanğıcına sıralama

Bu nümunədə, bütün kontent konteynerin sol kənarına sıralanacaq:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: start; /* Kontenti konteynerin sol kənarına sıralayır */
      }
    
  

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

Bu nümunədə, bütün kontent konteynerin daxilində mərkəzdə yerləşəcək:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: center; /* Kontenti konteynerin daxilində mərkəzləşdirir */
      }
    
  

8.2 align-content xassəsi

align-content xassəsi, grid-konteyneri daxilində şaquli ox üzrə məzmunun necə hizalanacağını təyin edir. Bu, grid bütün mövcud şaquli boşluğu doldurmadıqda faydalıdır.

Sintaksis:

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

Burada: value — məzmunun şaquli hizalanmasını təyin edən dəyərdir. Mümkün dəyərlər:

• start: məzmunu konteynerin başlanğıcına hizalayır
• end: məzmunu konteynerin sonuna hizalayır
• center: məzmunu konteynerin içində mərkəzləşdirir
• space-between: elementlər arasında bərabər məsafə ilə məzmunu yerləşdirir
• space-around: hər bir elementin ətrafında bərabər məsafə ilə məzmunu yerləşdirir
• space-evenly: elementlər və konteynerin kənarları arasında bərabər məsafə ilə məzmunu yerləşdirir
• stretch (default): məzmunu mövcud boşluğun hamısını dolduracaq şəkildə genişləndirir

Nümunə 1: Məzmunun konteynerin başlanğıcına hizalanması

Bu nümunədə bütün məzmun konteynerin yuxarı kənarına hizalanacaq:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: start; /* Məzmunu konteynerin yuxarı kənarına hizalayır */
      }
    
  

Nümunə 2: Məzmunun mərkəzləşdirilməsi

Bu nümunədə bütün məzmun konteyner daxilində mərkəzləşdiriləcək:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: center; /* Məzmunu konteyner daxilində mərkəzləşdirir */
      }
    
  

8.3 place-content Xüsusiyyəti

place-content xüsusiyyəti, eyni anda həm justify-content, həm də align-content üçün dəyərləri təyin etmək üçün qısa yazılışdır.

Sintaksis:

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

Burada:

• justify-value: üfüqi hizalama üçün dəyər (justify-content)
• align-value: şaquli hizalama üçün dəyər (align-content)

Nümunə 1: Məzmunun üfüqi və şaquli mərkəzləşdirilməsi

Bu nümunədə, bütün məzmun konteynerin daxilində həm üfüqi, həm də şaquli olaraq mərkəzləşdiriləcək:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: center center; /* Məzmunu həm üfüqi, həm də şaquli olaraq mərkəzləşdirir */
      }
    
  

Nümunə 2: Məzmunun eni üzrə uzadılması və yuxarı kənarda hizalanması

Bu nümunədə məzmun konteynerin eni üzrə uzadılacaq və yuxarı kənarda hizalanacaq:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: stretch start; /* Məzmunu eni üzrə uzadır və yuxarı kənarda hizalayır */
      }
    
  

8.4 Tam realizasiya nümunəsi

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px); /* Üç sabit eni olan sütun */
        grid-template-rows: repeat(3, 100px); /* Üç sabit hündürlüyü olan sətir */
        gap: 10px;
        place-content: center center; /* Məzmunu üfüqi və şaquli olaraq mərkəzləşdirir */
      }

      .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>Grid konteynerin 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: Üç sabit eni olan sütun və üç sabit hündürlüyü olan sətir ilə Grid konteyner yaradır. Məzmunu place-content xüsusiyyəti vasitəsilə üfüqi və şaquli olaraq mərkəzləşdirir.
• .grid-item: Şəbəkə elementləri üçün fon rəngi, mətn rəngi, kənar boşluqlar, mətni mərkəzləşdirmə və sərhəd kimi əsas üslubları təyin edir.