Главная » Архив меток: CSS Grid (страница 3)

Архив меток: CSS Grid

Создание сложных макетов с использованием CSS Grid

От автора: это руководство предназначено для людей, которые слышали о css-grid и хотят узнать, что она может, или, возможно, не уверены, как ввести ее в свой рабочий процесс. Также статья будет вам интересна, если вы оттачиваете навыки верстки, не прибегая к фреймворкам, таким как Bootstrap. Базовые знания о css — это хорошо, но вы должны следить за новинками. После прочтения ...

Читать далее »

Некоторые стратегии CSS Grid для создания согласованных макетов дизайна

От автора: в мире веб-разработки всегда наблюдался разрыв при переходоме от дизайна к разработке. Амбициозные дизайнеры хотят, чтобы конечный результат их усилий выглядел уникальным и красивым (и соответствовал их первоначальному видению), тогда как многие разработчики находят большую ценность в результате, который является последовательным, надежным и стабильным (и легко кодируемым). Эта динамика может привести к напряженности между двумя сторонами, при этом ...

Читать далее »

Используйте CSS Grid в производстве — сегодня

От автора: каждый хочет использовать CSS Grid. Речь идет о новом методе верстки, который существенно изменит способ разработки контента в Вебе. С помощью CSS Grid у вас есть возможность размещать контент на веб-сайте в беспрецедентной форме и динамически сортировать его по областям просмотра. Этот метод появился, поскольку многие авторы веб-сайтов имели слишком ограниченные возможности работы с сеткой. Что касается разнообразия ...

Читать далее »

Создание макета настенного альбома с помощью CSS Grid

От автора: недавно моему сыну было поручено в течение недели присматривать за своим плюшевым мишкой на уроках дошкольного образования, и он должен был придумывать для него приключения и добавить свои воспоминания в альбом. Мне очень понравилось создавать этот макет альбома, и это заставило меня задуматься о том, как бы я создал что-то подобное с помощью CSS Grid! Составные сетки Энди ...

Читать далее »

CSS Grid: Введение с примерами

От автора: я помню, как впервые изучал CSS, и как я был рад узнать о display float и inline, которые позволяют размещать элементы, как нам нужно. Интересно, как бы я отреагировал, если бы в то время была доступна система двумерного макета? На самом деле, даже сейчас я взволнован этим, потому что это меняет все: как способ написания CSS, так и ...

Читать далее »

CSS Grid Level 2 — subgrid вводится в Firefox

От автора: функция подсетки subgrid спецификации CSS Grid еще не реализована ни в одном браузере, но теперь она доступна для тестирования в Firefox Nightly. Это функция, которая, если вы использовали CSS Grid для макета любой сложности, скорее всего, вас очень порадует. В этой статье я собираюсь представить функцию и некоторые варианты ее использования. Так что же такое подсетка? С точки ...

Читать далее »

Использование метода Grid Shepherd для упорядочивания данных с CSS

От автора: при работе с данными программисты часто не знают, правильно ли они отфильтрованы или отсортированы. Это особенно болезненно, когда вы перебираете массив, затем отображает данные на сайте, не зная местоположений каждого элемента, получающего их. Grid Shepherd — это метод, который помогает позиционировать и сортировать элементы там, где вы хотите, использовать CSS Grid вместо JavaScript. Об этом мы и расскажем ...

Читать далее »

Создание адаптивного макета сетки CSS Grid без медиа-запросов

От автора: использование гибкой природы Интернета предоставляет нам мощные решения для интерфейса, где вместо использования определенных размеров мы задаем элементам разумные границы и позволяем им автоматически заполнять пространство, где это возможно. Я максимально применяю этот подход в своей работе и создаю утилиты, наподобие этой: Это полностью адаптивный макет сетки CSS Grid, в котором не используются медиа-запросы. Как это работает Прежде ...

Читать далее »

CSS Grid — обязательный инструмент для современной верстки

От автора: привет, друзья! В данной статье поговорим про последнее глобальное новшество в верстке — CSS Grid Layout. Оно обладает действительно фантастическими возможностями и позволяет делать то, что раньше в таблице каскадных стилей сделать было просто невозможно. Давайте сегодня разберем, что такое CSS Grid, рассмотрим его основные преимущества и функционал. Основная информация Grid Layout — это новая модель макета, которая ...

Читать далее »

Новости и демо-версии CSS Subgrid

От автора: пару недель назад я выступал на Frontend NE в Ньюкасле, большая часть моего выступления была посвящена тому, что будет содержать функция Subgrid CSS из Grid Level 2. Не имея готовой реализации для этого выступления, я смоделировал кучу демо-версий, используя DevTools. По пути в Сан-Франциско на Smashing Conf, где я проводил семинар по CSS Layout, мне был предоставлен доступ ...

Читать далее »