Позиціонування за направляючими лініями Grid, grid-area, grid span
ITVDN: курси програмування
Відеокурси з
програмування

Вибери свою IT спеціальність

Підписка

×

Ви відкрили доступ до тесту! Пройти тест

Ви дійсно бажаєте відкрити доступ до тестування за курсом Верстка на Grid на 40 днів?

ВІДЕОУРОК № 5. Позиціонування за направляючими лініями Grid, grid-area, grid span

Для перегляду повної версії відеокурсу, онлайн тестування та отримання доступу до додаткових навчальних матеріалів придбайте курс Придбати курс
Для перегляду всіх відеокурсів ITVDN, представлених у Каталозі, а також для отримання доступу до навчальних матеріалів та онлайн тестування придбайте підписку Придбати підписку

Ціль уроку – познайомитися з описом курсу, дізнатися, що таке Grid в CSS, попрацювати з онлайн IDE Codeopen, налаштувати робоче оточення та розглянути приклади роботи з Grid container.

Читати далі...

Ціль уроку – ознайомитися з Grid Generator, розглянути властивість grid-template-columns, дізнатися про нову одиницю виміру fr (fraction - доля), на практиці засвоїти поєднання та змішування різних одиниць виміру, таких як гнучкі та фіксовані, а також навчитись задавати треки за допомогою repeat.

Читати далі...

Ціль уроку – зрозуміти різницю між явним і неявним Grid, дізнатися про Grid-клітинки, Grid-області, Gap (проміжки), вивчити властивості minmax, grid-auto-rows, grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-column.

Читати далі...

Ціль уроку – дізнатися про підгріди, навчитися керувати порядком відображення за допомогою z-index, зрозуміти різницю між двовимірним (Grid) та одновимірним позиціюванням (Flex), вивчити властивості auto-fill і auto-fit для автозаповнення треків, та знати про display сontents.

Читати далі...

Ціль уроку – зрозуміти як правильно позиціонувати елементи в сітці Grid за допомогою направляючих ліній, на практиці засвоїти grid-template-columns та grid-template-rows, grid-column та grid-row, grid-area та використання span в Grid.

Читати далі...

Ціль уроку – вивчити шаблони в Grid, навчитись позиціонувати елементи в сітці за допомогою імен (alias), перевизначати контент за допомогою медіавиразів чи додаткових класів, на практиці засвоїти такі властивості як: grid-template-areas, grid-template / grid.

Читати далі...

Ціль уроку – дізнатись про те, як правильно визначати назви ліній в Grid, а також як працювати з неявними областями сітки з іменованих ліній. На практиці засвоїти repeat при визначенні ліній Grid.

Читати далі...

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

Читати далі...

Ціль уроку – вивчити техніки вирівнювання блоків у CSS-розмітці Grid, зокрема осей Grid Layout, режимів запису в сіткових макетах, фізичних та логічних значень у вирівнюванні макета сітки, вирівнювання елементів на блоці або стовпці по осі, вирівнювання елементів на вбудованій або рядковій осі, центрування елементу у області Grid, вирівнювання доріжок сітки на осі блоку або стовпця, вирівнювання та auto margins.

Читати далі...

Ціль уроку – створення власного проєкту, на основі отриманих знань з курсу та деплой проєкту на github pages і хостинг Netlify.

Читати далі...
ПОКАЗАТИ ВСЕ

Купуй передплатуз доступом до всіх курсів та сервісів

Бібліотека сучасних IT знань у зручному форматі

Вибирай свій варіант підписки залежно від завдань, що стоять перед тобою. Але якщо потрібно пройти повне навчання з нуля до рівня фахівця, краще вибирати Базовий або Преміум. А для того, щоб вивчити 2-3 нові технології, або повторити знання, готуючись до співбесіди, підійде Пакет Стартовий.

Стартовий
  • Усі відеокурси на 3 місяці
  • Тестування з 10 курсів
  • Перевірка 5 домашніх завдань
  • Консультація з тренером 30 хв
59.99 $
Придбати
Преміум Plus
  • Усі відеокурси на 12 місяців
  • Тестування з 24 курсів
  • Перевірка 20 домашніх завдань
  • Консультація з тренером 120 хв
  • Завантаження відео уроків
199.99 $
Придбати
Базовий
  • Усі відеокурси на 6 місяців
  • Тестування з 16 курсів
  • Перевірка 10 домашніх завдань
  • Консультація з тренером 60 хв
89.99 $
Придбати
коментарі та обговорення
Notification success