При создании веб-приложения первое, что необходимо, — это способ размещения содержимого вашего приложения.
Многие дизайнеры используют воображаемые сетки для размещения контента, будь то сайт или приложение. Группа CSS усердно работала над упрощением макетов и в рамках этой работы создала модуль CSS Grid Layout , который сейчас появляется в браузерах.
Эту функцию можно опробовать в Chrome под экспериментальным флагом. Он также реализован в IE начиная с версии 10 и, вероятно, скоро появится в большинстве браузеров.
Управляющее резюме
- CSS Grid Layout позволяет определять строки и столбцы для вашего макета.
- Сетки могут адаптироваться к использованию доступного пространства.
- Порядок контента может быть независимым от порядка отображения контейнера сетки.
- Макеты могут меняться в зависимости от медиа-запросов, что упрощает адаптивный дизайн.
- Содержимое может перекрываться (что невозможно при использовании других методов).
- Сетка-макет работает быстро
Вот обзорное видео, которое многое объясняет о том, как работает CSS Grid Layout ( слайды здесь :
Попробуйте это
Использовать CSS Grid Layout в Chrome теперь стало проще. Первое, что вам нужно сделать, это включить экспериментальный флаг, чтобы включить эту функцию.
Сначала загрузите URL-адрес chrome://flags и прокрутите вниз до параметра « Включить экспериментальные функции веб-платформы» , как показано ниже:
Просто нажмите «Включить» , чтобы включить флаг, и вы увидите приглашение перезапустить браузер, которое выглядит следующим образом:
Теперь просто нажмите кнопку «Перезапустить сейчас» , чтобы перезапустить браузер, и все готово к использованию CSS Grid Layout.
Поделитесь с нами вашими мыслями
CSS Grid Layout — отличный новый примитив для веб-контента, но, как обычно, нам всем интересно услышать, что о нем думают разработчики. Есть много способов оставить отзыв — оставьте комментарий здесь, отправьте письмо в список рабочей группы W3C CSS с «[css-grid]» в строке темы, зарегистрируйте ошибки или напишите в блоге, что вы об этом думаете. Мы с нетерпением ждем возможности увидеть великолепные макеты, которые вы создадите с помощью этой очень полезной новой функции.
,При создании веб-приложения первое, что необходимо, — это способ размещения содержимого вашего приложения.
Многие дизайнеры используют воображаемые сетки для размещения контента, будь то сайт или приложение. Группа CSS усердно работала над упрощением макетов и в рамках этой работы создала модуль CSS Grid Layout , который сейчас появляется в браузерах.
Эту функцию можно опробовать в Chrome под экспериментальным флагом. Он также реализован в IE начиная с версии 10 и, вероятно, скоро появится в большинстве браузеров.
Управляющее резюме
- CSS Grid Layout позволяет определять строки и столбцы для вашего макета.
- Сетки могут адаптироваться к использованию доступного пространства.
- Порядок контента может быть независимым от порядка отображения контейнера сетки.
- Макеты могут меняться в зависимости от медиа-запросов, что упрощает адаптивный дизайн.
- Содержимое может перекрываться (что невозможно при использовании других методов).
- Сетка-макет работает быстро
Вот обзорное видео, которое многое объясняет о том, как работает CSS Grid Layout ( слайды здесь :
Попробуйте это
Использовать CSS Grid Layout в Chrome теперь стало проще. Первое, что вам нужно сделать, это включить экспериментальный флаг, чтобы включить эту функцию.
Сначала загрузите URL-адрес chrome://flags и прокрутите вниз до параметра « Включить экспериментальные функции веб-платформы» , как показано ниже:
Просто нажмите «Включить» , чтобы включить флаг, и вы увидите приглашение перезапустить браузер, которое выглядит следующим образом:
Теперь просто нажмите кнопку «Перезапустить сейчас» , чтобы перезапустить браузер, и все готово к использованию CSS Grid Layout.
Поделитесь с нами вашими мыслями
CSS Grid Layout — отличный новый примитив для веб-контента, но, как обычно, нам всем интересно услышать, что о нем думают разработчики. Есть много способов оставить отзыв — оставьте комментарий здесь, отправьте письмо в список рабочей группы W3C CSS с «[css-grid]» в строке темы, зарегистрируйте ошибки или напишите в блоге, что вы об этом думаете. Мы с нетерпением ждем возможности увидеть великолепные макеты, которые вы создадите с помощью этой очень полезной новой функции.