Sofia Emelianova
Chrome DevTools делает отладку макетов сетки CSS интуитивно понятной благодаря множеству вариантов визуализации.
Посмотрите видео, чтобы узнать, как переключать наложение сетки на панели «Элементы» и использовать его для:
- Визуализируйте и проверяйте макеты сетки.
- См. номера строк и столбцов, на которые следует обратить внимание при размещении элементов сетки.
- Используйте имена линий и областей и смотрите их на наложении, если у вас много элементов сетки и числа сбивают с толку.
- Проверьте размеры дорожек.
Кроме того, с помощью редактора сеток на панели «Элементы» > «Стили» вы можете выравнивать элементы и их содержимое в виде сетки одним нажатием кнопки вместо ввода правил CSS.
Для получения более практического опыта ознакомьтесь с руководством по проверке CSS Grid .