Побудуйте блог з сіткою та Flexbox

Sep 13, 2025

Як

Останні два-три роки бачили макет рухатися вперед у стрибках і межі. Тепер, коли ці сучасні методи мають такий послідовний результат у сучасних браузерах, ви дійсно можете використовувати їх для вашого виробничого коду. Якщо вам цікаво Як почати блог Цей підручник покаже вам, наскільки просто буде створити стандартний макет у стилі блогу за допомогою CSS Grid та гнучкого модуля коробки, AKA Flexbox. Звук, як занадто багато важкої роботи для того, що ви хочете? Погляньте на наш гід Найкращі безкоштовні платформи для блогів або вибрати вершину Веб-будівельник . Робота з командою? Розгорнути найкраще хмара зберігання щоб утримати процес гладким.

Спочатку давайте швидко повторюємо основи HTML, і чому це добре, щоб спробувати написати семантичний код.

Більше, ніж настільний та мобільний

Ви помітили режим читача на Safari та Firefox? Це значок у адресному рядку, який виглядає трохи схожий на облицювальний папір. Це зробить ваш Макет веб-сайту в режимі відволікання, голі кістки, швидше, як і пристрої, такі як використання Apple. Детальніше та інші пристрої доступні та відображення веб-вмісту - можливо, великий удар Різдва був інтерактивними динаміками, як Amazon Echo.

З огляду на це, і, звичайно, необхідність вашого сайту працювати на екрані читачів тощо, структура вашої сторінки має вирішальне значення. Якщо ви просто використовуєте & lt; div & gt; Для всіх ваших контейнерів і навіть кнопок, то пристрої, що надають ваш код, не знають, що таке контекст, і тому не може використовувати будь-яку рідну функціональність або функції.

01. Запустіть базову макет сторінки

Ми збираємося створити основну веб-сторінку, щоб включити заголовок з навігацією, блок героя, основної статті, представлені блоки статті та нижній колонтитул. Ідея тут - побачити багато Реактивний веб-дизайн Методи, які ми можемо здійснити без використання засобів масової інформації або будь-якого допоміжного JavaScript. Ви можете побачити, що HTML сторінки розділена на різні розділи за допомогою тегів HTML5. Ми також додаємо їхні класи, оскільки старші браузери не будуть знати, що вони є і надають їх як DIV. Почнемо у верхній частині сторінки і працювати наш шлях. Однак основний або складний ваш сайт, це також час думати, який веб хостинг Сервіс підходить для вас.

02. Створіть заголовок сайту

Build a blog with Grid and flexbox: Site header — Вам не потрібні будь-які обгортки або контейнери для цього заголовка

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

 & lt; заголовок класу = "заголовок" & gt;

& lt; img src = "зображення / logo.png" / & gt;
& lt; nav & gt;
& lt; ul class = "nav" & gt;
& lt; li & gt; & lt; href = "#"
Class = "Активний" & gt; home & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; href = "#" & gt; про & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; собаки & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; href = "#" & gt; зв'язатися & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; / заголовок & gt;

03. Використовуйте одиниця FR

Ми встановили заголовок для відображення сітки, а потім використовувати 'get-template-columns' Щоб встановити дві стовпці в заголовку. Ми використовуємо пл Одиниця тут, яка є дробовою одиницею - 1FR дорівнює доступному простору в контейнері. У цьому випадку ми надаємо навігацію трохи меншу область для заповнення.

 заголовок {
Дисплей: сітка;
Сітки-шаблони-стовпці: 1.5FR 1FR;
Вирівнювання елементів: Центр;
}

04. Додайте навігацію сайту

Тепер ми націлюємо список елементів меню. Знову ми повертаємо & lt; uul & gt; В сітці та розкажіть елементи всередині до автозапуску у стовпці. Тут ми використовуємо мінмакс Щоб забезпечити, щоб стовпці ніколи не можуть бути меншими, ніж 100px, але якщо простір більший, то вони можуть поділитися пробілом як 1fr кожен.

 .nav {
Дисплей: сітка;
Grid-шаблони-стовпці: повторити (автоматичне підхоплення, minmax (100px, 1FR));
Grid-Gap: 10px;
Вирівнювання елементів: Центр;
}

05. Створити блок героя

Build a blog with Grid and flexbox: Hero block — Центрування героя текст набагато простіше з CSS Grid або Flex

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

 & lt; Стаття та GT;
& lt; section class = "hero" & gt;
& lt; h1 & gt; & lt; / h1 & gt;
& lt; p & gt; & lt; / p & gt;
& lt; href = "" & gt; & lt; / a & gt;
& lt; / розділ & gt;
& lt; / Стаття & GT;

06. Вирівняйте до центру

Вирівнювання на двох осей є частина хліба та масла CSS Grid. Тут ми можемо перетворити контейнер героя в сітковий контейнер, а потім використовувати вирівнювання-вміст (зліва направо) і виправданий вміст (зверху вниз) до положення в центрі. Ми використовуємо до Одиниця тут, яка зробить блок героя 50% висоти Viewport.

 .hero {
Мін-висота: 50вх;
Дисплей: сітка;
Обґрунтування-елементи: Центр;
Вирівнювання вмісту: Центр;
Обґрунтування-вміст: Центр;
}

07. Створіть розділ основного вмісту

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

 & lt; клас статті = "основний вміст" & gt;
& lt; розділ / & gt;
& lt; / розділ & gt;
& lt; в сторону / & gt;
& lt; / Стаття & GT;

08. Додайте вигляд двох стовпців

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

 Основний вміст {
Дисплей: Flex;
Flex-Wrap: Wrap;
Flex-Direction: Row;
Обґрунтування-вміст: пробіл-між;
Підкладка: 0 5vw 0 5VW;}

09. Зробіть його чуттю без запитів ЗМІ

Build a blog with Grid and flexbox: Responsive without media queries — Створіть відповідальний розділ, не використовуючи засоби Media Queries

Розділ використовує розумну суміш калькуляції та мінімальної та максимальної ширини, щоб дати нам, що ефективно є медіа-запитом, але на рівні контейнера. Коли є достатньо місця, розділ займе 70% від батьків, що дозволяючи вбік, щоб сидіти поруч з нею. Використовуючи Calc для ширини, ми можемо повернути будь-яку величезну або крихітну ширину.

 Розділ основного вмісту {
хв. Ширина: 70%;
Ширина: Calc ((48em - 100%) * 1000);
Max-ширина: 100%;
}

10. Визначте точку перерви

48EM прирівнює до 768px (48 * Базовий розмір шрифту (16px)), тому вище 768px Розділ буде його мінімальною шириною 70%, а нижче 768 буде використовуватися максимальна ширина. Ми робимо те ж саме для в сторону, тому в цьому випадку він буде або займати 25% на великих екранах або на 100% на малі. Ефект є чутливою точкою перерви чисто впливаючи на контейнер.

. Майн-вміст в сторону {
хв. Ширина: 25%;
Ширина: Calc ((48em - 100%) * 1000);
Max-ширина: 100%;
}

11. Побудувати чутливі блоки

Build a blog with Grid and flexbox: Responsive blocks — Використовуйте контейнерні Divs для побудови ваших чутливих блоків

Щоб створити популярні елементи, які запускаються через сторінку, ми, нарешті, використовуємо наші перші контейнери.

 & lt; розділ Class = "список карт" & gt;
& lt; div class = "карта" & gt;
& lt; img / & gt;
& lt; div class = "карткові деталі" & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / розділ & gt;

12. Повторіть і автофіт

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

. Card-список {
Дисплей: сітка;
Grid-Gap: 10px;
Grid-шаблони-стовпці: повторити (автоматично підходять,
minmax (300px, 1FR));
}

.card {
 Дисплей: сітка;
 Grid-шаблони-стовпці: 1FR;
}

13. Створіть макет картки

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

. Card-деталі {
Дисплей: Flex;
Напрямок Flex: колонка;
Обґрунтування-вміст: простір-рівномірно;
}

. card-подробиці a {
вирівнювання - самостійно: Flex-Start;
}

14. Стиль нижнього колонтитула

Ми вже до нижнього нижнього колонтитула, і просто використовуємо деякі стилі, які ми використовували раніше, щоб викласти його.

 & lt; нижній колонтитул = "нижній колонтитул" & gt;
& lt; p / gt;
& lt; nav & gt;
& lt; ul class = "nav" & gt;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; ul class = "соціальна" & gt;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / footer & gt;

15. Вирівняйте дитинству

У цьому нижньому колонтитулі є три області. Встановіть грунту сітки, щоб повторити три у одній дрібній частині кожного. Ви можете просто написати "Grid-шаблон-стовпці: 1FR 1FR 1FR;" Якщо ви віддаєте перевагу. Соціальні іконки збираються сидіти вирівняні праворуч - ви можете зробити це, розповідаючи сам товар, щоб вирівняти правильно за допомогою виправдовувати себе .

 .footer {
Дисплей: сітка;
Грид-шаблони-стовпці: повторити (3, 1FR);
Grid-Auto-Flow: колонка;
Вирівнювання елементів: Центр;
}

. Соціальна {
виправдати - самостійно: кінець;
}

16. Розглянемо сумісність

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

Ця стаття була опублікована у випуску 284 журналу Creative Web Design Веб-дизайнер . Купити проблему 284 тут або Підписатися на веб-дизайнер тут .

Пов'язані статті:

Комплексний довідник з використання CSS Grid
Використовуйте CSS Grid та FlexBox, щоб побудувати чуйний інтерфейс
5 прохолодних генераторів сітки CSS

Побудуйте блог з сіткою та Flexbox

Більше, ніж настільний та мобільний

01. Запустіть базову макет сторінки

02. Створіть заголовок сайту

03. Використовуйте одиниця FR

04. Додайте навігацію сайту

05. Створити блок героя

06. Вирівняйте до центру

07. Створіть розділ основного вмісту

08. Додайте вигляд двох стовпців

09. Зробіть його чуттю без запитів ЗМІ

10. Визначте точку перерви

11. Побудувати чутливі блоки

12. Повторіть і автофіт

13. Створіть макет картки

14. Стиль нижнього колонтитула

15. Вирівняйте дитинству

16. Розглянемо сумісність

Як - Найпопулярніші статті

Як спростити форму створення сумішей у майя

4 кроки до використання змінних шрифтів

Відновити мангу класику

Покращити свої концептуальні навички мистецтва в Photoshop

Намалюйте параметри гри в Photoshop

10 порад для моделювання твердого поверхні

6 способів прискорити моделювання

Побудувати складні макети з PostCSS-Flexbox

Категорії