Вирівнювання контейнера Grid

8.1 Властивість justify-content

CSS Grid Layout надає круті інструменти для управління вирівнюванням всього контейнера сітки всередині доступного простору. Властивості justify-content, align-content і place-content дозволяють контролювати вирівнювання рядків і колонок всередині контейнера, забезпечуючи гнучкість і точність при створенні макетів.

Властивість justify-content керує горизонтальним вирівнюванням всієї сітки всередині контейнера. Це властивість корисне, коли розмір контейнера більший, ніж потрібна ширина самої сітки.

Синтаксис:

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

Де: value може приймати такі значення:

• start: вирівняти сітку за початком контейнера
• end: вирівняти сітку за кінцем контейнера
• center: вирівняти сітку по центру контейнера
• stretch: розтягнути сітку, щоб вона заповнила весь контейнер
• space-around: розмістити однаковий простір навколо кожного елемента
• space-between: розмістити однаковий простір між елементами
• space-evenly: розмістити однаковий простір між елементами і краями контейнера

Приклад 1: Вирівнювання за початком контейнера

У цьому прикладі весь вміст буде вирівнаний за лівим краєм контейнера:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: start; /* Вирівнює вміст за лівим краєм контейнера */
      }
    
  

Приклад 2: Центрування вмісту

У цьому прикладі весь вміст буде центрований всередині контейнера:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: center; /* Центрує вміст всередині контейнера */
      }
    
  

8.2 Властивість align-content

Властивість align-content визначає, як вміст сітки вирівнюється по вертикальній осі всередині grid-контейнера. Воно корисне, коли сітка не заповнює весь доступний вертикальний простір.

Синтаксис:

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

Де: value — значення, що визначає вертикальне вирівнювання вмісту. Можливі значення:

• start: вирівнює вміст за початком контейнера
• end: вирівнює вміст за кінцем контейнера
• center: центрує вміст всередині контейнера
• space-between: розміщує вміст з однаковим відстанню між елементами
• space-around: розміщує вміст з однаковим відстанню навколо кожного елемента
• space-evenly: розміщує вміст з однаковим відстанню між елементами і краями контейнера
• stretch (за замовчуванням): розтягує вміст, щоб заповнити весь доступний простір

Приклад 1: Вирівнювання за початком контейнера

У цьому прикладі весь вміст буде вирівнаний за верхнім краєм контейнера:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: start; /* Вирівнює вміст за верхнім краєм контейнера */
      }
    
  

Приклад 2: Центрування вмісту

У цьому прикладі весь вміст буде центрований всередині контейнера:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: center; /* Центрує вміст всередині контейнера */
      }
    
  

8.3 Властивість place-content

Властивість place-content є скороченим записом для одночасного завдання значень justify-content і align-content.

Синтаксис:

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

Де:

• justify-value: значення для горизонтального вирівнювання (justify-content)
• align-value: значення для вертикального вирівнювання (align-content)

Приклад 1: Центрування вмісту по горизонталі і вертикалі

У цьому прикладі весь вміст буде центрований всередині контейнера як по горизонталі, так і по вертикалі:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: center center; /* Центрує вміст як по горизонталі, так і по вертикалі */
      }
    
  

Приклад 2: Розтягнення вмісту по ширині і вирівнювання за верхнім краєм

У цьому прикладі вміст буде розтягнутий по ширині контейнера і вирівняний за верхнім краєм:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: stretch start; /* Розтягує вміст по ширині та вирівнює за верхнім краєм */
      }
    
  

8.4 Приклад повної реалізації

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px); /* Три стовпці фіксованої ширини */
        grid-template-rows: repeat(3, 100px); /* Три рядки фіксованої висоти */
        gap: 10px;
        place-content: center center; /* Центрування вмісту по горизонталі і вертикалі */
      }

      .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</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item item1">Елемент 1</div>
            <div class="grid-item item2">Елемент 2</div>
            <div class="grid-item item3">Елемент 3</div>
            <div class="grid-item item4">Елемент 4</div>
            <div class="grid-item item5">Елемент 5</div>
            <div class="grid-item item6">Елемент 6</div>
          </div>
        </body>
      </html>
    
  

Пояснення коду:

• .grid-container: створює контейнер Grid з трьома стовпцями фіксованої ширини і трьома рядками фіксованої висоти. Використовує властивість place-content для центрування вмісту по горизонталі і вертикалі
• .grid-item: визначає базові стилі для елементів сітки, такі як фоновий колір, колір тексту, відступи, центрування тексту і межа