Приложение grids как работает
Приложение Grids позволяет быстро и легко создать уникальный профиль в Instagram. Большая коллекция профессиональных шаблонов для ленты, постов и историй поможет преобразить вашу страницу в Instagram за считаные минуты.
ШАБЛОНЫ ДЛЯ ПОСТОВ И ИСТОРИЙ
Каждый шаблон в приложении можно изменять: добавляйте свои фотографии, текст и стикеры, чтобы создать уникальный дизайн. Более того, все шаблоны позволяют оформить бесконечную ленту, т. е. вы можете использовать их снова и снова, чтобы впечатлить своих подписчиков профилем в едином стиле. Благодаря такому дизайну вся страница в Instagram будет выглядеть гармонично и целостно.
РАЗНООБРАЗНЫЕ ИНСТРУМЕНТЫ ДИЗАЙНА
Если вам не нравятся готовые шаблоны, проявите креативность и создайте свой собственный вариант в редакторе. Выберите, что вы хотите оформить: всю ленту в Instagram, отдельный пост или историю, и воплотите все свои идеи в жизнь! Удобный редактор и огромный выбор стикеров, фонов и шрифтов вдохновят вас создать красивые и стильные шаблоны.
СОЗДАВАЙТЕ СЕТКИ ДЛЯ INSTAGRAM
Grids позволяет разделить фотографии и панорамы на одинаковые квадратные части и загрузить их в Instagram так, чтобы при просмотре профиля они составляли одно целое. Произведите неизгладимое впечатление на посетителей своей страницы! Выберите размер сетки, добавьте фотографию или создайте коллаж. Будь-то обычный кадр, городской или природный пейзаж, с Grids они будут выглядеть потрясающе на странице профиля в Instagram!
ПУБЛИКУЙТЕ ФОТО В INSTAGRAM В 1 КЛИК
Вам не придется больше “сжимать” фотографию или обрезать свои творения! Все, что нужно сделать, - это переместить полученные фотографии в свой Instagram в указанном порядке. Вам даже не обязательно сохранять составляющие части изображения на устройство, их можно отправлять в Instagram напрямую из приложения!
СОЗДАВАЙТЕ ИКОНКИ ДЛЯ ИСТОРИЙ
Добавляйте иконки для историй, которые вы хотите сохранить. Используйте готовый дизайн или создавайте свои собственные обложки, изменяя картинки и текст. Преобразите свои актуальные истории с Grids!
ПРЕОБРАЗИТЕ СВОЙ ПРОФИЛЬ В INSTAGRAM
Grids предлагает совершенно новый способ использования Instagram, обладая при этом простым и красивым дизайном. Не упустите шанс выразить себя, преобразить страницу профиля в Instagram, публикуя масштабные изображения во всей их красоте!
Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые макеты веб-страниц. Я постараюсь кратко, но полно объяснить, как работает каждое свойство.
Что такое CSS Grid ?
Грид — это макет для сайта (его схема, проект).
Грид-модель позволяет размещать контент сайта (располагать его определенным образом, позиционировать). Она позволяет создавать структуры, необходимые для обеспечения отзывчивости сайтов на различных устройствах. Это означает, что сайт будет одинаково хорошо смотреться на компьютере, телефоне и планшете.
Вот простой пример макета сайта, созданного с помощью Грида.
Компьютер
Телефон
Архитектура CSS Grid
Как же Грид работает? Элементы Грида (grid items) располагаются вдоль главной или основной (main) и поперечной (cross) оси (axis). При помощи различных свойств мы можем манипулировать элементами для создания макетов.
Помимо прочего, у нас имеется возможность объединять строки и колонки подобно тому, как мы это делаем в Excel , что предоставляет нам большую гибкость, чем Флекс ( Flexbox ).
К слову, если вас интересует Флекс, вот соответствующая статья.
Схема CSS Grid
Схема содержит все возможные свойства, предоставляемые Гридом. Эти свойства делятся на:
- родительские (свойства грид-контейнера) и
- дочерние (свойства грид-элементов)
Обратите внимание: красным цветом отмечены сокращения для свойств:
К концу настоящей статьи у вас будет полное понимание того, как работает каждое из них.
Настройка проекта
Для данного проекта требуются начальные знания HTML , CSS и умение работать с VSCode (или другим редактором по вашему вкусу). Делаем следующее:
- Создаем директорию для проекта, например, Project1 и открываем ее в редакторе ( cd Project1 , code . )
- Создаем файлы index.html и style.css
- Устанавливаем в VSCode сервер для разработки ( Live Server , расширение) и запускаем его
Или вы можете просто открыть Codepen (или любую другую песочницу) и начать писать код.
Все готово, можно приступать к делу.
Создаем 3 контейнера внутри body :
Шаг 1
Шаг 2
Немного стилизуем body :
Шаг 3
Стилизуем все контейнеры:
Не волнуйтесь, мы рассмотрим каждое из указанных свойств Грида.
Шаг 4
Добавим небольшой отступ между контейнерами:
Погодите-ка
Давайте разберемся с отношениями между родительским и дочерними элементами.
Свойства родительского элемента определяются в .container , а свойства дочерних элементов — в .box-* .
Свойства грид-контейнера
Начнем со свойств родительского элемента.
grid-template-columns
Данное свойство используется для определения количества и ширины колонок. При этом, можно определять как свойства для каждой колонки в отдельности, так и устанавливать ширину всех колонок с помощью функции repeat() .
Добавим строку в style.css :
- значения в пикселях будут точными. Ключевое слово auto означает заполнение элементом всего доступного пространства
- использование единицы fr (фракция) в repeat() означает, что все контейнеры будут иметь одинаковую ширину
grid-template-rows
Данное свойство используется для определения количества и высоты строк. При этом, можно определять как высоту каждой колонки в отдельности, так и устанавливать высоту всех строк с помощью функции repeat() .
Изменим строку в style.css :
grid-template-areas
Данное свойство используется для определения количества пространства, занимаемого ячейкой Грида (grid cell), в терминах колонок и строк, в родительском контейнере.
Это можно считать схемой макета:
Для получения результата требуется не только родительское, но и хотя бы одно дочернее свойство:
- grid-template-areas : родительское свойство, создающее схему
- grid-area : дочернее свойство, которое использует схему
Создаем схему
Применяем схему
Обратите внимание: мы вернемся к свойству grid-area , когда будем говорить о дочерних свойствах.
column-gap
Данное свойство используется для добавления отступа между колонками.
Обратите внимание: свойство column-gap используется совместно со свойством grid-template-columns .
row-gap
Данное свойство используется для добавления отступов между строками.
Обратите внимание: свойство row-gap используется совместно со свойством grid-template-rows .
justify-items
Данное свойство используется для позиционирования грид-элементов внутри грид-контейнера вдоль главной оси. Оно принимает 4 возможных значения:
Добавим еще один контейнер в HTML :
И немного изменим CSS :
align-items
Данное свойство используется для позиционирования грид-элементов внутри грид-контейера вдоль поперечной оси. Оно принимает 4 возможных значения:
justify-content
Данное свойство используется для позиционирования самого грида внутри грид-контейнера вдоль основной оси. Оно принимает 7 возможных значений:
align-content
Данное свойство используется для позиционирования самого грида внутри грид-контейнера вдоль поперечной оси. Оно принимает 7 возможных значений:
Свойства грид-элементов
Шкала CSS Grid
Данная шкала показывает, как вычисляются строки и колонки при их объединении. Для этого используется два вида единиц:
На представленной ниже иллюстрации показаны начальные и конечные точки строк и колонок в одной ячейке:
При использовании функции repeat() мы может установить одинаковую ширину/высоту для колонок/строк. Пример с колонками:
Это аналогично следующему:
Небольшая заметка
При использовании единицы измерения fr , доступное пространство делится на равные части.
В данном случае доступное пространство делится на 4 равные части.
grid-columns: start/end
Данное свойство позволяет объединять колонки. Оно является сокращением для:
Мы разделили доступное пространство на 12 равных частей как по ширине, так и по высоте. 1 контейнер занимает 1 часть или фракцию. В данном случае 8 фракций остались невостребованными.
Поскольку мы говорим о свойствах дочерних элементов, имеет смысл разделить их стили:
Вернемся к шкале. Мы разбираемся с колонками — поэтому пока не обращайте внимания на строки.
Каждый класс .box-* по умолчанию имеет такой масштаб (scale):
Это можно переписать с помощью ключевого слова span :
Давайте "присвоим" 8 фракций .box-1 :
Небольшая заметка
Как мы производим вычисления? box-1 занимает 1 часть. Кроме этого, к ней добавляется еще 8 частей. И еще 1 в конце. Получается: 8 + 1 + 1 = 10.
Как использовать ключевое слово span
Считается, что использование span делает код более читаемым.
В этом случае нам просто нужно добавить к box-1 8 частей:
Это даст такой же результат.
grid-row: start/end
Данное свойство позволяет объединять строки. Оно является сокращением для:
Теперь сосредоточимся на строках:
Давайте добавим к box-1 9 частей:
Расчет выглядит так: box-1 занимает 1 часть + 9 частей + 1 часть в конце, получается 9 + 1 + 1 = 11.
Вот вариант со span :
grid-area
Сначала нам нужно настроить grid-temlate-areas , о чем мы говорили выше. После этого в дочерних классах определяются названия областей, которые используются в родительском классе:
Определяем grid-template-areas в родительском классе:
Затем определяем grid-area в дочерних классах:
justify-self
Данное свойство используется для позиционирования отдельного грид-элемента вдоль основной оси. Оно принимает 4 возможных значения:
align-self
Данное свойство используется для позиционирования отдельного грид-элемента вдоль поперечной оси. Оно принимает 4 возможных значения:
Сокращения для свойств CSS Grid
- place-content
- place-items
- place-self
- grid-template
- gap / grid-gap
place-content
Данное свойство является сокращением для:
place-items
Данное свойство является сокращением для:
place-self
Данное свойство является сокращением для:
grid-template
Данное свойство является сокращением для:
- grid-template-rows
- grid-template-columns
gap/grid-gap
Данное свойство является сокращением для:
Заключение
Теперь в ваших руках имеется мощное средство для создания адаптивных макетов веб-страниц.
VPS-хостинг с быстрыми NVMе-дисками и посуточной оплатой. Загрузка своего ISO.
Бот или торговый робот — это программа для автоматической торговли на бирже. За последние 10 лет такие программы наторговали 50% объема американского фондового рынка.
Боты превосходят живых трейдеров по трем параметрам: они не испытывают эмоций, не отступают от торговой стратегии и не спят. Благодаря этому даже простые роботы зарабатывают на бирже больше, чем многие люди.
Рассказываем об одном из самых простых способов заработать на автоматизированном трейдинге — торговом боте биржи KuCoin.
Торговые боты KuCoin
KuCoin — криптовалютная биржа с поддержкой спотовой, маржинальной и фьючерсной торговли. На ней представлено 440 криптовалют в 830 парах.
Пользователи KuCoin могут торговать с помощью четырех ботов: DCA, Smart Rebalance, Spot Grid и Futures Grid. Боты работают со всеми парами спотового и фьючерсного рынков:
- DCA и Smart Rebalance покупают криптовалюту во время роста и закрывают позиции по достижению торговых целей. Их можно использовать, чтобы выгодно купить актив или собрать сбалансированный портфель.
- Spot Grid и Futures Grid продают актив во время роста и покупают на откатах. Они зарабатывают в коридорах, когда цена актива регулярно отскакивает от уровней поддержки и сопротивления.
Сумма минимального депозита зависит от бота, торговой пары и настроек. Например, для запуска Spot Grid на XMR/USDT с ручными настройками нужно 40 USDT, а для запуска DCA на любой паре — от 1 USDT. Для запуска Grid-ботов с автоматическими настройками в среднем нужно 200 USDT.
Spot Grid можно настроить и запустить в браузере, остальных ботов — только в мобильном приложении KuCoin.
Для запуска ботов понадобится двухфакторная аутентификация. Проходить KYC необязательно: она нужна для вывода от 5 BTC в сутки.
DCA-бот для усреднения цены покупки
Стратегия DCA (dollar-cost averaging) заключается в постепенном наборе позиции. Пользователь задает интервал и объем покупок, передает боту средства, а тот покупает актив.
Запуск DCA бота:
- Переведите средства на торговый баланс.
- Выберите криптовалюту для покупки.
- Настройте сумму, период регулярных инвестиций и дату первой покупки.
- Укажите торговую цель и действия бота при ее достижении: продолжить покупки или закрыть позицию.
Пример: Алиса покупает 1 LTC за $180. Через месяц цена Litecoin падает до $120, а еще через три месяца — растет до $200. Прибыль Алисы составляет $20.
В то же время Боб настраивает бота DCA на покупку по 0,1 LTC каждую неделю. Через три месяца бот покупает 1 LTC по средней цене $150. Прибыль Боба — $50.
Smart Rebalance для управления портфелем
Порой рост крипторынка начинается с резкого подорожания одной монеты. Например, цена биткоина вырастает на 10% и упирается в уровень сопротивления, а через несколько часов вслед за ним растут остальные криптовалюты. В такой ситуации можно увеличить прибыль, если продать часть биткоина и докупить других монет.
Бот Smart Rebalance использует этот принцип для управления инвестиционным портфелем. Пользователь задает пропорции портфеля и условия ребаланса: при изменении пропорций или по таймеру.
Запуск бота Smart Rebalance:
- Выберите один из готовых портфелей или нажмите на кнопку Customize, чтобы создать новый.
- Добавьте в портфель криптовалюты и настройте пропорции.
- Введите сумму, которую хотите передать боту.
Пример: трейдер настраивает бота Smart Rebalance с портфелем 50% BTC, 40% ETH, 10% DOGE и ребалансом при отклонении на 5%. Через неделю биткоин растет, и соотношение активов меняется на 56% BTC, 32% ETH и 12% DOGE.
Бот продает биткоины и покупает Ethereum, чтобы привести портфель к 50% BTC, 40% ETH и 10% DOGE. На следующий день Ethereum и DOGE растут вслед за биткоином, и трейдер получает дополнительную прибыль за счет покупки ETH.
Боты для заработка на волатильности
Grid Trading или торговля сеткой ордеров — это стратегия для торговли на волатильном рынке без явного тренда. Трейдер выставляет отложенные ордера на покупку и продажу. Когда цена актива сильно колеблется, ордеры исполняются и трейдер получает прибыль.
Боты Spot Grid и Futures Grid на KuCoin автоматически создают сетку из десятков ордеров на основе исторических данных актива. Опытные трейдеры могут указать диапазон цен для торговли.
Spot Grid работает на спотовых парах без плеча, а Futures Grid — на фьючерсных контрактах с плечом.
Пример: трейдер запускает бота Spot Grid на паре XRPUSD. Бот покупает немного XRP, а затем выставляет несколько отложенных ордеров на покупку и продажу XRP по разным ценам:
- SELL по $1,6;
- SELL по $1,4;
- BUY по $1,1;
- BUY по $1.
Цена XRP падает до $0,9, а затем растет до $1,7. Бот закрывает позицию с прибылью и выставляет новую сетку ордеров.
Spot Grid
Spot Grid покупает криптовалюту на откатах и продает во время роста. Трейдер может установить стоп-лосс, чтобы автоматически выключить бота при медвежьем тренде.
Настройка Spot Grid:
- Выберите криптовалюту для торговли.
- Воспользуйтесь автоматическими параметрами или перейдите во вкладку Customize, чтобы задать торговый диапазон и количество ордеров в сетке.
- Передайте боту средства для торговли.
Futures Grid
Бот Futures Grid может зарабатывать на росте или падении цены актива. При создании бота инвестор выбирает направление торговли:
- Long — бот покупает контракты на откате и закрывает позиции во время роста цены;
- Short — бот продает контракты при росте и закрывает позиции во время падения цены.
Настройка Futures Grid:
- Выберите торговую пару.
- Воспользуйтесь автоматическими параметрами или перейдите во вкладку Customize, чтобы задать торговый диапазон, количество ордеров и размер плеча.
- Выберите направление операций: Short для заработка на падении, Long — для заработка на росте.
- Передайте боту средства для торговли.
Сколько зарабатывают боты Spot Grid и Futures Grid
Приложение KuCoin показывает таблицы лидеров по результатам работы ботов. Согласно этим данным, доходность Grid-ботов достигает 25 000% APR или 68% от депозита в день.
Тестируем ботов KuCoin
Мы решили проверить, какой доход принесет торговля ботами KuCoin в течение одного дня.
DCA и Smart Rebalance покажут результаты через несколько недель, поэтому мы запустили Grid-ботов для случайных торговых пар:
- Spot Grid: WILD/USDT с депозитом 42 USDT;
- Futures Grid: Long для SHIBPERP/USDT с депозитом 50 USDT.
За сутки Futures Grid провел 42 сделки и потерял $0,07. Spot Grid показал себя лучше и за 67 сделок заработал $3,13. Его APR составил 1330% или 7% от депозита в день.
Выводы
Современные торговые боты работают по алгоритму «покупай дешево, продавай дорого». Они зарабатывают, потому что торгуют без эмоций и не упускают возможностей для входа в рынок.
На KuCoin есть боты для любого состояния рынка:
- DCA для постепенного набора позиции во время криптозимы;
- Smart Rebalance для управления портфелем во время бычьего тренда;
- Spot Grid и Futures Grid для заработка на волатильных активах.
Помните, что ни одна торговая стратегия не гарантирует прибыль. Не вкладывайте больше, чем готовы потерять.
Эта статья показывает как работает эта сравнительно новая технология, именно работает, а не имеет только описание свойств с поверхностными примерами.
Сама статья является адаптивным дополненным переводом CSS Grid Tutorial
Gri d модуль для CSS был разработан рабочей группой CSS для того, чтобы сделать создание шаблонов в CSS максимально удобным. Он попал в рекомендации по официальному внедрению в феврале 2017 года, а основные бразуеры начали его поддержку уже в марте 2017 года.
CSS Grid скоро станет неотъемлемой частью набора инструментов любого фронт-энд разработчика. И если вы один из них, то вам придется учить CSS Grid — который уже точно станет неоспоримым умением для любой позиции в фронтэнд разработке.
С этим мощным функционалом и интуитивно понятным синтаксисом, шаблоны на grid несомненно будут менять представление о создании веба как такового.
Введение
CSS Grid это новая модель для создания шаблонов, оптимизированная для создания двумерных макетов. Она идеально подходит для: шаблонов сайтов, форм, галерей и всего, что требует точного и отзывчивого позиционирования.
С развитием веба, в последние годы, разработка шаблонов веб-сайтов стала всё более затруднительной. В ранние годы веба, HTML таблицы зачастую использовались для многоколоночных шаблонов, форм и т.д. Но у этого метода есть свои недостатки. Это означает то, что представление шаблона, как такового должно было быть сделано на уровне разметки, таким образом стирая различие между представлением и контентом. По факту, таблицы были созданы для того, чтобы содержать табличные данные и только для этого. И уже даже не касаясь семантических проблем, табличные шаблоны совершенно не созданы для адаптивного дизайна.
Флоаты в конечном итоге заменили таблицы как всеобще приемлемый и рекомендованный метод создания разметки шаблона, так как он позволяет нам позиционировать элементы вне зависимости от изначальной разметки. Тем не менее, пока этот метод считался значительным улучшением на фоне табличной верстки, у него тоже были свои ограничения. Флоаты в основном были разработаны для создания шаблонов документов и они не совсем были подходящими для создания сложных шаблонов приложений, которые сейчас распространены в сети и которые мы привыкли видеть в своих браузерах. Флоат элементы сложно контролировать, особенно на девайсах и viewport’ах разных размеров. Это привело к различным гридободобным хакам, которые уже стали нормой, большинству из них требовалась дополнительная разметка, которая отвлекала от общей концепции разделения контента. Таким образом рабочая группа CSS находилась в поиске наилучшего решения для всех задач.
CSS Grid модель рассматривает все эти проблемы и даже более. Она позволяет нам создавать продвинутые шаблоны за малую долю времени от того, которое бы вы потратили на них с флотами и с гораздо меньшим количеством кода.
Хотя flexbox уже позволил разработчикам начать уходить от флоат элементов, но он работает только в одном измерении. Grid CSS же это делает в двух, таким образом лучше подходя для создания сложных, комплексных шаблонов.
Как это работает?
Grid шаблон работает по системе сеток. Grid это набор пересекающихся горизонтальных и вертикальных линий, которые создают размерность и позиционируют систему координат для контента в самом grid -контейнере.
Чтобы создать Grid разметку, вам просто нужно выставить элементу display: grid . Этот шаг автоматически сделает всех прямых потомков этого элемента — grid элементами. После этого вы можете смело использовать разнообразные grid свойства для выравнивания размеров и позиционирования элементов должным образом. Обычно первым шагом является определение того, сколько колонок и рядов есть в гриде. Но даже это опциональный момент — как вы увидите далее.
Это пример грида с четырьмя рядами и тремя колонками. Он состоит из 12 grid элементов. Каждый из этих элементов отмечен зеленым и между ними есть небольшое расстояние.
Все эти grid элементы одного размера, но они могли бы быть совершенно любого размера, такого, какого мы захотим. Мы могли бы сделать их совершенно разными по размерам, если бы захотели. Некоторые из них могли бы охватывать несколько столбцов и рядов, другие могли бы оставаться размеров с одну ячейку. Далее в этой статье вы узнаете об этих и других функциях в grid, некоторые из которых вполне смогут вас удивить.
Создаем Grid
Вот пример простого 3x3 грида с небольшими отступами между элементами.
Давайте внимательнее вглядимся в код. HTML разметка для CSS Grid выглядит вот так:
Таким образом мы видим обычный HTML, состоящий из элементов, вложенных в свой внешний элемент. Но именно для наших целей, внешний <div> это контейнер гридов. Соотвественно, все элементы вложенные в него будут являться грид элементами.
Но по факту, это не будет полноценными гридом, пока мы не применим кое-какой CSS для него. Вот код, который создаёт его:
Вот объяснение того, что написано в этом CSS:
Превращает элемент в grid контейнер. Это все, что нужно для того, что создать грид. Теперь у нас есть грид-контейнер и грид-элементы. Значения гридов создают блочный контейнер. Вы так же можете использовать display: inline-grid , что создать строчный грид-контейнер. Или же вы можете использовать display: subgrid , чтобы создать подсетку, это значение используется на самих grid элементах.
grid-template-rows: 1fr 1fr 1fr
Выстраивает ряды в гриде. Каждое значение представляет размер ряда. В этом случае все значения равны 1fr. Очень подробно и понятно про (fr) можно почитать тут.
Но конечно же, для этого можно было бы использовать разные значения, такие как 100px , 7em , 30% и так далее. Вы также можете назначать имена строкам вместе с их размерами.
grid-template-columns: 1fr 1fr 1fr
Тоже самое, что и выше, только определяет колонки в гридах.
Выставляет разрыв. То есть пробелы между грид элементами. Тут мы используем vw единицу, которая относительна ширине viewport, но также мы можем использовать 10px , 1em и т. д. Grid-gap свойство это сокращение для grid-row-gap и grid-column-gap свойств.
Ну, а другая часть кода просто назначает разные стили грид элементам.
Функция repeat()
Вы можете использовать функцию repeat() для повторяющихся объявлений значения размера элемента. Для примера, вместо того, чтобы делать это:
Мы можем сделать так:
Что значительно сократит количество кода, которое вам нужно написать, особенно, если вы работаете с большими и часто повторяющимися элементами в гридах.
Создаем шаблон сайта с CSS Grid
Гриды включают в себя интуитивный «ASCII-графический» синтаксис, в котором вы можете виртуально «видеть» шаблон в коде, поэтому становится очень легко создавать и изменять сам шаблон. Даже значительные изменения могут быть сделаны за несколько секунд. Этот интуитивный синтаксис также помогает с адаптивным веб-дизайном. Создание разных шаблонов для разных устройств становится довольно пустяковым делом при использовании грид разметки.
Давайте теперь создадим шаблон сайта, который выглядит таким образом:
А вот код этого шаблона:
Давайте ближе посмотрим на наш код. HTML разметка выглядит таким образом:
Итак, мы сделаем <body> грид-контейнером, таким образом все другие элементы станут грид-элементами.
А теперь давайте посмотрим на ASCII-графику, о которой мы говорили прежде.
Подробнее про grid-template-areas вы можете прочитать в статье Поразительный CSS Grid Area
Этот кусок определяет наш шаблон. Просто смотря на код, мы можем видеть, что это 3х3 грид (три ряда и три колонки). Таким образом у нас получается пять грид областей на девяти грид ячейках, так как некоторые наши грид-области занимают несколько ячеек.
Мы так же видим, что шапка занимает весь первый ряд в три ячейки, а подвал занимает весь нижний ряд, также забирая три ячейки. Навигационная, контентная и рекламная секции, все вместе делят место во втором ряду, где каждому из этих элементов достается по одной ячейке.
Теперь мы можем назначить каждую из этих грид-областей каждому элементу:
Свойство grid-area это сокращение свойства, которое позволяет вам размещать грид-элементы в гриде. В нашем случае, мы просто отсылаемся к названиям, которые мы уже предварительно указали в grid-template-areas .
Большая часть шаблона уже завершена. Остаток кода просто будет относиться к размерам, пробелам и высотам, в общем скорее к декоративной области.
Следующий код выдает размеры строкам и колонкам:
Первая и третья строки — обе в 60px высотой, а вторая строка забирает все оставшееся место.
Первый столбец равен 20% , а третий 15% . Второй же забирает все оставшееся место.
Изменяем шаблон
Вы можете изменить шаблон просто перераспределив грид-области в grid-template-areas .
Таким образом, если мы сменим на это:
То в результате получим такой шаблон:
Тем не менее, вам может понадобиться регулировка размеров, если вы двигаете грид поменьше в место побольше.
Для примера, чтобы сделать так:
Навигация теперь занимает место где был контент, следовательно, размеры были отрегулированы. В противном случае у нас был бы узкий контент и широкая навигация. Таким образом, код сейчас выглядит таким образом.
Создаем адаптивный Grid
В шаблоне созданном на гридах есть такие значения, как auto-fill и auto-fit , которые позволяют вам создавать грид с множеством треков определенного размера, которые будут помещаться в указанном контейнере. Это говорит о том, что грид является адаптивным, то есть в нем элементы меняют свои позиции с тем, как вы меняете размер окна браузера.
Пример использования Auto-fill :
Измените размер браузера, чтобы увидеть, что происходит. Если вы смотрите с мобильного устройства, то попробуйте посмотреть с десктопа. Посмотрите разницу.
Код отвечающий именно за это:
В нем колонкам выдается минимальный размер в 150px и максимум по оставшемуся месту. Такие треки будут повторяться столько раз, сколько нужно для того, чтобы уложиться в заданный контейнер.
Repeat() функция повторяет определение трека количество раз, заданное первым параметром. Использование auto-fill заставит треки повторяться такое количество раз, пока они не заполнят контейнер.
Размер этих треков указан во втором параметре. В нашем случае, мы используем minmax(150px, 1fr) , чтобы указать то, что минимальный размер столбца равен 150px , а максимальный 1fr .
Пример с Auto-fit
auto-fit работает практически также, как и auto-fill . Разница тут только в том, что auto-fit стягивает все пустые треки в конце размещения, в то время как auto-fill нет. Лучший способ тут, это демонстрация со сравнением.
Использование двух маленьких грид элементов тут поможет показать всю концепцию работы. Auto-fill оставляет пустые треки в конце по указанным размерам, а auto-fit растягивает пустой трек, что ведёт к заполнению треков растянутыми элементами для заполнения пространства.
Гриды с медиа запросами
Одной из сильных сторон гридов является то, что вы можете создать уже совершенно другой шаблон за секунды.
Это делает CSS Grid идеальным для медиа запросов. Мы можем просто переназначить значения в ASCII-графике и обернуть результат в конечный медиа запрос.
Это трехколоночный шаблон на большом viewport и он сжимается в одноколоночный на маленьких устройствах. Таким образом, этот пример будет выглядеть уже по-другому в зависимости от размера экрана. В любом случае, вот релевантный код для трехколоночного шаблона, для широких вьюпоротов.
А вот соответствующий код для мобильной версии:
Таким образом, все дело состоит в переназначении значений в свойстве grid-template-areas .
В нашем случае мы обернули мобильную версию в медиа запрос, как тут:
Обратите внимание, что мы также подкорректировали значения в grid-template-rows и в grid-template-columns , чтобы они подходили под новый шаблон. В частности, тут должна быть только одна колонка и она должна занимать все свободное место. А так как все грид элементы будут в одну кучу, мы назначим 5 строк и определим их высоты.
Совмещаем grid c block
В зависимости от требований к вашему шаблону, нет ничего, что остановит вас изменить мобильную версию на display: block . Как тут:
Это будет работать также как и в примере выше, но по-дефолту, элементы встанут по своему исходному порядку. В примере выше, мобильная версия имеет nav под ads , но если бы мы использовали display: block , то nav был бы выше ads .
Также используя этот метод вам также может понадобится добавление несколькоих внешних отступов для компенсации отсутствия разрывов, которые были включены в версию с гридами.
Явные и неявные гриды
CSS Grid использует концепцию явного грида и неявного. Это, в принципе, ключевая концепция, которой вам нужно понимать при создании гридов, в противном случае вы можете увидеть кучу колонок и строк, о существовании которых вы даже и не подозревали.
Явный грид — это грид, который вы определяете в grid-template-rows , grid-template-colums и в grid-template-areas .
Тем не менее, вы все еще можете иметь элементы, которые не умещаются в вашу «явно» указанную сетку. Для примера, вы определили грид который может уместить только шесть элементов, но сам контейнер на самом деле состоит из девяти элементов. Только шесть элементов будут умещаться в явный грид и три останутся. И вот уже начинаются неявные гриды.
Неявные гриды автоматически генерируются самим грид-контейнером всякий раз когда грид-элементы располагаются за пределами явного грида. Контейнер генерирует неявные грид треки, добавляя неявные строки в грид. Эти строки вместе с явными гридами и формируют как таковые неявные. Вот пример:
В этом примере мы явно определяем две строки и две колонки, что уместит в себя четыре грид элемента. Тем не менее, тут присутствует шесть грид элементов, таким образом был создан неявный грид, для того, чтобы уместить два дополнительный элемента.
И это очень хорошо. Если бы не был создан неявный грид, то два дополнительных элемента создали бы полный беспорядок в сетке.
Выставляем размер трека для неявных гридов
Возможно вы заметили, что дополнительный ряд не такой в высоту как предыдущие два. Это потому, что мы выставили высоту строки в grid-template-rows свойстве, но применяется она только для явных гридов. Высота строки на неявных гридах должна выставляться с помощью свойства grid-auto-rows . Но так как мы этого не сделали, выходит, что неявный ряд использует размер трека auto , который основывается на контенте. Вот так располагаются свойства выставления размера трека:
В общем выходит так:
Явный грид использует grid-template-rows и grid-template-columns
Неявный грид использует grid-auto-rows и grid-auto-columns
В следующем примере мы сделаем явные и неявные строки одной высоты ( 60px ).
Auto-flow — строки или колонки
Пока что мы создавали только дополнительные строки, чтобы уложить дополнительные грид-элементы. Но что, если мы хотим использоваться дополнительные колонки?
Для этого у нас есть свойство grid-auto-flow
Это свойство позволяет указывать, что нужно использовать для авто-размещения элементов, строки или колонки. Другими словами, вы можете указать как будет расти неявный грид — в виде строк или колонок. Изначальное значение тут — row , что объясняет то, почему на примере выше были добавлены дополнительные строки, вместо колонок. Но если вы предпочитаете использовать колонки, то вы можете использовать это:
Вот что случится, если мы применим это к первому примеру.
Само собой, вы можете попробовать пойти дальше в этом примере и использовать grid-auto-columns свойство, чтобы изменить ширину автоматически сгенерированной колонки. Так что если вы хотите, чтобы все колонки выше, были одинаковой ширины, вам надо использовать grid-auto-columns: 1fr .
Имейте ввиду, что выставляя column для grid-auto-flow вы изменяете поток грид элементов. Вы уже могли заметить, что грид элементы в примере выше размещаются вдоль каждой колонки, вместо каждой строки.
Опциональное значение dense
У grid-auto-flow также есть опциональное значение dense , которое может помочь в создании компактного грида и предостеречь от больших пробелов между грид-элементами в случае непоследовательных размеров всех грид-элементов в контейнере. К примеру, у вас есть вот такой грид:
Читайте также: