Советы DevTools: как проверить сетку CSS

Sofia Emelianova

Chrome DevTools делает отладку макетов сетки CSS интуитивно понятной благодаря множеству вариантов визуализации.

Посмотрите видео, чтобы узнать, как переключать наложение сетки на панели «Элементы» и использовать его для:

• Визуализируйте и проверяйте макеты сетки.
• См. номера строк и столбцов, на которые следует обратить внимание при размещении элементов сетки.
• Используйте имена линий и областей и смотрите их на наложении, если у вас много элементов сетки и числа сбивают с толку.
• Проверьте размеры дорожек.

Кроме того, с помощью редактора сеток на панели «Элементы» > «Стили» вы можете выравнивать элементы и их содержимое в виде сетки одним нажатием кнопки вместо ввода правил CSS.

Для получения более практического опыта ознакомьтесь с руководством по проверке CSS Grid .