Вивчення неявної сітки та можливостей автоматичного розміщення CSS Grid

При роботі з CSS Grid перше, що потрібно зробити, це встановити display: grid на елементі, який ми хочемо стати контейнером сітки. Потім ми явно визначаємо сітку за допомогою комбінації grid-template-columns, grid-template-rows та grid-template-areas. А потім наступним кроком є ​​розміщення елементів усередині сітки.

Це класичний підхід, який слід використовувати, і я також рекомендую його. Однак існує інший підхід для створення сіток без будь-якого чіткого визначення. Ми називаємо це неявна сітка.

«Явний, неявний? Що тут коїться?»

Дивні терміни, правда? Мануель Матузович уже має гарне пояснення того, що ми можемо назвати «неявним» і «явним» у CSS Grid, але давайте відразу розберемося, що specification каже:

Команда grid-template-rows, grid-template-columns та grid-template-areas властивості визначають фіксовану кількість доріжок, які формуються явна сітка. Коли елементи сітки розташовані за межами цих меж, контейнер сітки створює неявні доріжки сітки, додаючи до сітки неявні лінії сітки. Ці лінії разом із явною сіткою утворюють неявна сітка.

Отже, кажучи простою англійською мовою, браузер автоматично генерує додаткові рядки та стовпці у випадку, якщо будь-які елементи розміщені за межами визначеної сітки.

А як щодо автоматичного розміщення?

Подібно до концепції неявної сітки, авторозміщення це здатність браузера автоматично розміщувати елементи всередині сітки. Нам не завжди потрібно вказувати позицію кожного елемента.

За допомогою різних випадків використання ми побачимо, як такі функції можуть допомогти нам створити складну та динамічну сітку за допомогою кількох рядків коду.

Динамічна бічна панель

Тут у нас є три різні макети, але у нас є лише одна конфігурація сітки, яка працює для всіх них.

main {
  display: grid;
  grid-template-columns: 1fr;
}

Лише одна колонка займає весь вільний простір. Це наша «явна» сітка. Він налаштований на розміщення одного елемента сітки в main сітковий контейнер. Це все. Один стовпець і один рядок:

Але що, якби ми вирішили додати туди інший елемент, скажімо an aside (наша динамічна бічна панель). Як це зараз (і явно) визначено, нашій сітці доведеться автоматично налаштовуватися, щоб знайти місце для цього елемента. І якщо ми більше нічого не робимо з нашим CSS, ось що нам повідомляє DevTools.

Ми можемо перемістити <aside> до колонки поруч із <section>:

aside {
  grid-column-start: 2;
}

І ось що DevTools говорить нам зараз:

Ми розміщуємо наш елемент у другому стовпці, але... другого стовпця у нас немає. Дивно, правда? Ми ніколи не оголошували другу колонку на <main> сітковий контейнер, але браузер створив його для нас! Це ключова частина специфікації, яку ми розглянули:

Коли елементи сітки розташовані за межами цих меж, контейнер сітки створює неявні доріжки сітки, додаючи до сітки неявні лінії сітки.

Ця потужна функція дозволяє нам мати динамічні макети. Якщо ми тільки маємо <section> елемент, ми отримуємо лише один стовпець. Але якщо ми додамо <aside> елемента до суміші, створюється додатковий стовпець, який містить його.

Ми могли б розмістити <aside> перед <section> замість цього так:

aside {
  grid-column-end: -2;
} 

Це створює неявний стовпець на початку сітки, на відміну від попереднього коду, який розміщує неявний стовпець у кінці.

Ми можемо зробити те саме легше, використовуючи grid-auto-flow властивість для встановлення будь-яких і всіх неявних доріжок для потоку в a column напрямок:

Тепер немає потреби уточнювати grid-column-start розмістити <aside> елемент праворуч від <section>! Фактично, будь-який інший елемент сітки, який ми вирішимо додати туди в будь-який час, тепер буде текти в напрямку стовпця, кожен з яких розміщуватиметься на власних неявних доріжках сітки. Ідеально підходить для ситуацій, коли кількість елементів у сітці невідома заздалегідь!

Тим не менш, нам все ще потрібно grid-column-end якщо ми хочемо розмістити його в стовпці ліворуч від нього, оскільки, інакше, <aside> буде займати явний стовпець, який, у свою чергу, штовхає <section> за межами явної сітки та змушує його приймати неявний стовпець.

Я знаю, я знаю. Це трохи заплутано. Ось ще один приклад, який ми можемо використати, щоб краще зрозуміти цю маленьку примху:

У першому прикладі ми не вказали жодного місця розташування. У цьому випадку браузер спочатку розмістить <aside> у явному стовпці, оскільки він стоїть першим у DOM. The <section>, тим часом автоматично розміщується в стовпці сітки, який браузер автоматично (або неявно) створює для нас.

У другому прикладі ми встановили <aside> елемент за межами явної сітки:

aside {
  grid-column-end: -2;
}

Тепер це не має значення <aside> стоїть першим у HTML. Шляхом перепризначення <aside> десь ще, ми зробили <section> елемент, доступний для отримання явного стовпця.

Сітка зображення

Давайте спробуємо щось інше з сіткою зображень, де у нас є велике зображення та кілька мініатюр поруч із ним (або під ним).

У нас є дві конфігурації сітки. Але вгадайте що? Я взагалі не визначаю жодної сітки! Все, що я роблю, це:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Дивно, що нам потрібен лише один рядок коду, щоб створити щось подібне, тому давайте розберемо, що відбувається, і ви побачите, що це простіше, ніж ви думаєте. Поперше, grid-area — це скорочена властивість, яка об’єднує наступні властивості в одне оголошення:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

Почекай! не є grid-area властивість, яку ми використовуємо для визначення названі області замість того, де елементи починаються і закінчуються на сітці?

Так, але він також робить більше. Ми могли б написати ще багато про що grid-area, але в цьому конкретному випадку:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

Ми бачимо те саме, коли відкриваємо DevTools для розширення скороченої версії:

Це означає, що перший елемент зображення в сітці має охоплювати три колонки та три ряди. Але оскільки ми не визначили жодних стовпців чи рядків, браузер робить це за нас.

По суті, ми розмістили перше зображення в HTML, яке займає сітку 3⨉3. Це означає, що будь-які інші зображення будуть автоматично розміщені в тих самих трьох стовпцях без необхідності вказувати щось нове.

Підводячи підсумок, ми сказали браузеру, що перше зображення має займати простір у три стовпці та три рядки, які ми ніколи не визначали явно під час налаштування контейнера сітки. Браузер встановив для нас ці стовпці та рядки. Як результат, решта зображень у HTML розміщуються на своїх місцях, використовуючи ті самі три стовпці та рядки. І оскільки перше зображення займає всі три стовпці в першому рядку, решта зображень перетікають у додаткові рядки, кожен з яких містить по три стовпці, де кожне зображення займає один стовпець.

Все це з одного рядка CSS! Це сила «неявної» сітки» та автоматичного розміщення.

Для другої конфігурації сітки в цій демонстрації все, що я зробив, це змінив автоматичний напрямок потоку за допомогою grid-auto-flow: column так само, як ми робили раніше, розміщуючи an <aside> елемент поруч із a <section>. Це змушує браузер створити a четвертий стовпець, який він може використовувати для розміщення решти зображень. І оскільки ми маємо три рядки, решта зображень розміщуються в одному вертикальному стовпці.

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

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

І, звичайно, ми можемо легко оновити сітку, щоб врахувати більше зображень, налаштувавши одне значення. Це було б 3 в стилях для великого зображення. У нас це:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Але ми могли б додати четвертий стовпець, просто змінивши його на 4 натомість:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

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

Динамічні макети

Першим випадком використання бічної панелі був наш перший динамічний макет. Тепер ми розглянемо більш складні макети, де кількість елементів буде диктувати конфігурацію сітки.

У цьому прикладі ми можемо мати від одного до чотирьох елементів, де сітка регулюється таким чином, щоб добре відповідати кількості елементів, не залишаючи ніяких незручних прогалин або пропусків.

Коли у нас є один елемент, ми нічого не робимо. Елемент розтягнеться, щоб заповнити єдиний рядок і стовпець, автоматично створені сіткою.

Коли ми додаємо другий елемент, ми створюємо інший (неявний) стовпець за допомогою grid-column-start: 2.

Коли ми додаємо третій елемент, він має займати ширину двох стовпців — ось чому ми використали grid-column-start: span 2, але тільки якщо це :last-child тому що якщо (і коли) ми додамо четвертий елемент, він повинен займати лише один стовпець.

Додавши це, ми маємо чотири конфігурації сітки тільки дві декларації і магія неявної сітки:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

Давайте спробуємо інший:

Ми нічого не робимо для першого та другого випадків, коли у нас є лише один або два елементи. Однак, коли ми додаємо третій елемент, ми повідомляємо браузеру про це — якщо це :last-child — він має займати два стовпці. Коли ми додаємо четвертий елемент, ми повідомляємо браузеру, що цей елемент потрібно розмістити у другому стовпці.

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

Ви починаєте розуміти трюк? Ми надаємо браузеру конкретні інструкції на основі кількості елементів (за допомогою :nth-child) і іноді одна інструкція може повністю змінити макет.

Слід зазначити, що розмір не буде однаковим, коли ми працюємо з різним вмістом:

Оскільки ми не визначили жодних розмірів для наших елементів, браузер автоматично визначає їх для нас на основі їхнього вмісту, і ми можемо отримати інший розмір, ніж той, який ми щойно бачили. Щоб подолати це, ми повинні явно вкажіть, що всі стовпці та рядки мають однаковий розмір:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

Гей, ми ще не грали з цими властивостями! grid-auto-rows та grid-auto-columns встановити розмір неявних рядків і стовпців відповідно в контейнері сітки. Або, як специфікація пояснює це:

Команда grid-auto-columns та grid-auto-rows властивості визначають розмір доріжок, яким не призначено розмір grid-template-rows or grid-template-columns.

Ось ще один приклад, коли ми можемо досягти шести елементів. Цього разу я дозволю вам розібрати код. Не хвилюйтеся, селектори можуть виглядати складними, але логіка досить проста.

Навіть із шістьма елементами нам потрібно було лише дві декларації. Уявіть собі всі складні та динамічні макети, які ми можемо створити за допомогою кількох рядків коду!

Що з цим відбувається grid-auto-rows і чому він приймає три значення? Ми визначаємо три ряди?

Ні, ми не визначаємо три ряди. Але ми він має визначення трьох значень як шаблону для наших неявних рядків. Логіка така:

• Якщо у нас є один рядок, він отримає розмір із першим значенням.
• Якщо у нас два рядки, перший отримує перше значення, а другий – друге значення.
• Якщо у нас є три рядки, використовуватимуться три значення.
• Якщо у нас є чотири рядки (і тут настає найцікавіша частина), ми використовуємо три значення для перших трьох рядків і знову використовуємо перше значення для четвертого рядка. Ось чому це свого роду шаблон, який ми повторюємо, щоб визначити розмір усіх неявних рядків.
• Якщо у нас є 100 рядків, вони будуть мати розмір три на три 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, І т.д.

на відміну від grid-template-rows який визначає кількість рядків і їх розміри, grid-auto-rows лише рядки розмірів, які можуть бути створені на шляху.

Якщо ми повернемося до нашого прикладу, логіка полягає в тому, щоб мати однаковий розмір, коли створено два рядки (ми будемо використовувати 2fr 2fr), але якщо створюється третій рядок, ми робимо його трохи меншим.

Візерунки сітки

Для останнього ми поговоримо про візерунки. Ви, мабуть, бачили ті два макети стовпців, де один стовпець ширший за інший, і кожен рядок змінює розташування цих стовпців.

Такий макет сортування може бути дуже складно створити, не знаючи точно, з якою кількістю вмісту ми маємо справу, але приховані повноваження CSS Grid щодо автоматичного розміщення роблять це відносно легким.

Подивіться на код. Це може виглядати складно, але давайте розберемо це, оскільки воно виявляється досить простим.

Перше, що потрібно зробити, це визначити шаблон. Запитайте себе: «Після скількох елементів шаблон має повторюватися?» У цьому випадку це після кожних чотирьох елементів. Отже, давайте зараз розглянемо використання лише чотирьох елементів:

Тепер давайте визначимо сітку та створимо загальний шаблон за допомогою :nth-child селектор для перемикання елементів:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

Ми сказали, що наш візерунок повторюється кожні чотири елементи, тому будемо логічно використовувати 4n + x де x коливається від 1 до 4. Трохи простіше пояснити шаблон таким чином:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

Ідеально, правда? У нас є чотири елементи, і повторюємо візерунок на п'ятому елементі, дев'ятому елементі і так далі.

Ті :nth-child селектори можуть бути складними! У Кріса є суперкорисний пояснення того, як це все працює, У тому числі рецепти створення різних візерунків.

Тепер ми налаштовуємо кожен елемент так, щоб:

1. Перший елемент має займати два стовпці та починатися з першого стовпця (grid-column: 1/span 2).
2. Другий елемент розміщується в третьому стовпці (grid-column-start: 3).
3. Третій елемент розміщується в першому стовпці: (grid-column-start: 1).
4. Четвертий елемент займає два стовпці і починається з другого стовпця: (grid-column: 2/span 2).

Ось це в CSS:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Ми могли б зупинитися тут і закінчити… але ми можемо зробити краще! Зокрема, ми можемо видалити деякі декларації та покластися на повноваження grid щодо автоматичного розміщення, щоб виконати роботу за нас. Це найскладніша частина обробки, яка вимагає багато практики, щоб визначити, що можна видалити.

Перше, що ми можемо зробити, це оновити grid-column: 1 /span 2 і використовувати тільки grid-column: span 2 оскільки за замовчуванням браузер розмістить перший елемент у першому стовпці. Ми також можемо видалити це:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

Розміщуючи перший, другий і четвертий елементи, сітка автоматично розміщує третій елемент у правильному місці. Це означає, що нам залишилося ось що:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Але давай, ми можемо краще прогулятися! Ми також можемо видалити це:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

чому Якщо ми розмістимо четвертий елемент у другому стовпці, дозволивши йому зайняти два повних стовпця, ми змусимо сітку створити третій неявний стовпець, даючи нам загалом три стовпці без явного вказівки. Четвертий елемент не може перейти до першого рядка, оскільки перший елемент також займає два стовпці, тому він переходить до наступного рядка. Ця конфігурація залишає нам порожній стовпець у першому рядку та порожній у другому рядку.

Я думаю, ви знаєте кінець історії. Браузер автоматично розмістить другий і третій елементи на цих порожніх місцях. Тому наш код стає ще простішим:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Щоб створити дуже крутий і дуже гнучкий шаблон, потрібно лише п’ять декларацій. Частина оптимізації може бути складною, але ви звикнете до неї та отримаєте деякі хитрощі з практикою.

Чому б не використовувати grid-template-columns визначити явні стовпці, оскільки ми знаємо кількість стовпців?

Ми можемо це зробити! Ось його код:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

Як бачите, код безперечно більш інтуїтивно зрозумілий. Ми визначаємо три явні стовпці сітки та повідомляємо браузеру, що перший і четвертий елементи мають займати два стовпці. Дуже рекомендую цей підхід! Але мета цієї статті — вивчити нові ідеї та хитрощі, які ми отримуємо від неявних можливостей CSS Grid і автоматичного розміщення.

Явний підхід більш простий, тоді як неявна сітка вимагає від вас — вибачте за каламбур — заповнення прогалин, де CSS виконує додаткову роботу за лаштунками. Зрештою, я вважаю, що глибоке розуміння неявних сіток допоможе вам краще зрозуміти алгоритм CSS Grid. Зрештою, ми тут не для того, щоб вивчати те, що очевидно — ми тут, щоб досліджувати дикі території!

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

Наш візерунок повторюється кожні шість елементів. Третій і четвертий елементи повинні займати по два повних ряди. Якщо ми розмістимо третій і четвертий елементи, здається, що нам не потрібно чіпати інші, тому спробуємо наступне:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

Хм, погано. Нам потрібно помістити другий елемент у першу колонку. В іншому випадку сітка автоматично помістить його у другий стовпець.

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

Краще, але ще більше роботи, Треба перенести третій елемент наверх. Спокусливо спробувати розмістити його в першому рядку таким чином:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

Але це не працює, тому що змушує всіх 6n + 3 елементи, які потрібно розмістити в одній області, що створює переплутаний макет. Справжнім рішенням є збереження початкового визначення третього елемента та додавання grid-auto-flow: dense щоб заповнити прогалини. Від MDN:

[] Алгоритм «щільного» пакування намагається заповнити в отворах раніше в сітці, якщо менші предмети з’являться пізніше. Це може призвести до того, що елементи виглядатимуть не в порядку, коли це заповнить діри, залишені більшими предметами. Якщо його опустити, використовується «розріджений» алгоритм, де алгоритм розміщення завжди рухається «вперед» у сітці під час розміщення елементів, ніколи не повертаючись назад, щоб заповнити отвори. Це гарантує, що всі автоматично розміщені елементи відображатимуться «в порядку», навіть якщо це залишає діри, які могли бути заповнені пізнішими елементами.

Я знаю, що ця властивість не дуже інтуїтивно зрозуміла, але ніколи не забувайте про неї, коли стикаєтеся з проблемою розміщення. Перш ніж марно пробувати різні конфігурації, додайте його, оскільки це може виправити ваш макет без додаткових зусиль.

Чому б не завжди додавати цю властивість за замовчуванням?

Я не рекомендую цього, тому що в деяких випадках ми не хочемо такої поведінки. Зверніть увагу на те, як у поясненні MDN згадується, що це спричиняє перетікання елементів «не за порядком», щоб заповнити діри, залишені більшими предметами. Візуальний порядок зазвичай так само важливий, як і вихідний порядок, особливо коли йдеться про доступні інтерфейси grid-auto-flow: dense іноді може спричинити невідповідність між візуальним і вихідним порядком.

Тоді наш остаточний код:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

Інший? Ходімо!

Для цього я не буду говорити занадто багато, а замість цього покажу вам ілюстрацію коду, який я використав. Спробуйте побачити, чи ви розумієте, як я отримав цей код:

Елементи чорного кольору неявно розміщені в сітці. Слід зазначити, що ми можемо отримати той самий макет різними способами, ніж я. Чи можете ви їх також зрозуміти? Що щодо використання grid-template-columns? Поділіться своїми роботами в коментарях.

Я залишу вас із останнім зразком:

Я роблю мати рішення для цього, але ваша черга потренуватися. Візьміть усе, що ми дізналися, і спробуйте закодувати це самостійно, а потім порівняйте це з моїм рішенням. Не хвилюйтеся, якщо ви закінчите щось багатослівне — найважливіше знайти робоче рішення.

Хочу більше?

Перш ніж ми закінчимо, я хочу поділитися кількома запитаннями про Stack Overflow, пов’язаними з CSS Grid, на які я вскочив із відповідями, які використовували багато технік, які ми разом розглянули тут. Це хороший список, який показує, скільки реальних випадків використання та реальних ситуацій трапляється, коли ці речі стають у нагоді:

Підводячи підсумок

CSS Grid існує вже багато років, але все ще є багато маловідомих і використовуваних трюків, які широко не обговорюються. Неявна сітка та функції автоматичного розміщення — дві з них!

І так, це може стати складним завданням! Мені знадобилося багато часу, щоб розгадати логіку неявних сіток, і я все ще борюся з автоматичним розміщенням. Якщо ви хочете більше часу розглядати явні та неявні сітки, ось кілька додаткових пояснень і прикладів, які варто переглянути:

Так само ви можете прочитати про grid-auto-columns в альманаху CSS-Tricks, тому що Mojtaba Seyedi детально описує та містить неймовірно корисні візуальні елементи, які допомагають пояснити поведінку.

Як я вже сказав, коли ми починали, методи, які ми тут розглянули, не призначені для заміни звичайних способів, які ви вже знаєте для побудови мереж. Я просто досліджую різні способи, які можуть бути корисними в деяких випадках.