Автор этой статьи: Лю Гуаньюй, старший фронтенд-инженер и технический менеджер 360 Qi Dance Troupe, участвовал во многих крупномасштабных фронтенд-проектах, таких как 360 Navigation, 360 Film and Television, 360 Finance и 360 Games. . Следите за последними разработками в области стандартов W3C, Интернета вещей, искусственного интеллекта и машинного обучения, член рабочей группы W3C CSS.
После десяти лет заточки меча Frostblade так и не попробовал его. Покажите королю сегодня, кто не прав. - Дон Цзя Дао, "Мечник"
Обзор игры
Grid Garden1это кодип2Создал занимательную онлайн-игру с 28 уровнями. Игроки могут освоить CSS Grid, последний стандарт CSS, пройдя уровень.
Сеттинг игры представляет собой сцену выращивания моркови в саду.Игроки выполняют такие задачи, как прополка и полив, вводя соответствующие коды CSS Grid в области кода. Благодаря упорному труду игроков они смогут есть чистую натуральную морковь, не загрязняющую окружающую среду.
Открыв игру, мы обнаружили, что игра существует на нескольких языках. Вы можете переключаться между языками в левом нижнем углу. На самом деле, автор очень уверен в своем уровне английского, поэтому я без колебаний перешел на упрощенную китайскую версию.
В дополнение к области кода и области задач игроки могут выбрать любой из 28 уровней для испытания в области выбора; когда игрок вводит код в области кода, в области отображения задач и результатов справа отобразится результаты по коду в режиме реального времени. Если код выполняет задачу, нажмите кнопку отправки, чтобы перейти на следующий уровень.Если игрок проходит уровень, будет отображаться эффект очистки; если код не может выполнить задачу, кнопка отправки будет недоступна. Если игрок настаивает, в области кода появится эффект ошибки, которым игрок может наслаждаться :-(
Помимо самой игры, целью игры является углубление понимания игроком CSS Grid. Говоря о CSS Grid, это мощный способ компоновки веб-страниц. Правильное использование CSS Grid может решить многие распространенные проблемы макета эффективно, элегантно и лаконично. Полный справочник свойств CSS Grid можно найти здесь.3. Поскольку стандарт CSS Grid все еще находится на стадии CR (CR, кандидат в рекомендации), если вы являетесь поклонником последних стандартов, вы также можете следить за последним прогрессом CSS Grid рабочей группой CSS.4.
Несмотря на это, основные браузеры теперь имеют разную степень поддержки, как показано на следующем рисунке:
Кстати говоря, вам не терпится попробовать свои силы в игре, так что без лишних слов, вперед.
Запись о клиренсе
играть с элементами сетки
Возможно, у вас, игроков, вообще нет опыта работы с CSS Grid, и вы можете быть немного ошеломлены, когда только войдете. Мы предварительно думаем, что первые несколько препятствий — это обучающие препятствия. На уровне обучения обычных игр персонаж будет прыгать по экрану и бормотать, популяризируя различные концепции и операции. Так что теперь я буду играть этого персонажа.
- Элементы CSS Grid в основном делятся на две категории:
网格容器и网格项.网格容器является родительским элементом,网格项является дочерним элементом. - за
网格容器и网格项Каждый имеет различную модификацию атрибута. - Объявите макет сетки, который нужно сделать, находится в
网格容器указывается в коде CSSdisplay: grid;,display: inline-grid;илиdisplay: subgrid; -
网格线Линии границ, образующие структуру сетки, служат ориентиром для поиска элементов сетки. На картинке ниже линияrowи колонкаcolumnПоложение первой линии сетки . Другими словами, для сетки с 5 столбцами в строке всего 6 столбцов в строке.网格线. Если это неясно, возможно, пришло время пересмотреть посадку деревьев :-(
网格轨道означает смежный网格线Часть между ними, на которую указывает стрелка на рисунке ниже, представляет собой дорожку сетки.Вооружившись этими знаниями, мы можем начать наше путешествие через границу.
Настройки от уровня 1 до уровня 11 в основном предназначены для网格项Атрибутыgrid-column-startиgrid-column-endРазвертывание довольно простое, и я верю, что игроки смогут пройти его очень быстро.
Вот краткий обзор уровней 1-11:
-
grid-column-startиgrid-column-endДействующий на网格项. - Приведенные выше значения можно использовать вместе для решения проблем с перекрестными строками и столбцами.
-
grid-column-startиgrid-column-end, начало не обязательно меньше конца, разрешено обратное. - Можно установить отрицательные значения.Отрицательные значения означают, что с последнего
网格线расчетное значение. - Помимо получения значений, вы также можете использовать
spanключевые слова. Форматspan <number>означает, сколько网格轨道 - можно использовать
grid-column: <start>/<end>сокращать,spanЭта аббревиатура относится к ключевым словам.
Возможная ошибка в вышеизложенном заключается в том, что при установке значения определяется, что网格线заказ вместо网格轨道порядок , особенно для отрицательных чисел, в то время какspanЦифры, которые следуют,网格轨道количество. Это легко помнить.
Уровни 12 и 13, в основном показывают сеть CSS в линииrowНа возможность установить, настройка двухмерного пространства - это коэффициент макета сетки.flexАспект расширения макета.
Эти два уровня также относительно просты.
Начиная с 14 уровня мы начинаем комбинировать свойства строк и столбцов. Для прохождения 14 и 15 уровней нужно гибко использовать вышеуказанные ключевые слова. В спецификации также можно назвать гусеницу, здесь мы с этим не сталкивались, инструмент "наименование" использовать не будем.
Уровень 16 означает, что можно использовать сокращенный вариант строки и столбца.grid-areaсвойства снова упрощены,grid-areaполучить 4 по/Отдельные значения в порядке:grid-row-start, grid-column-start, grid-row-end, grid-column-end.
Уровень 17 говорит нам, что перекрывающееся покрытие не влияет на механизм расчета.
Еще и очень просто.
Для перекрытия уровня 17 уровни 18-19 вводят ключевые слова атрибута:order,orderпохожий наz-index, указывающий порядок наложения, чем больше значение, тем выше вершина. Допускаются отрицательные числа.
Просто не правда ли.
играть с грид-контейнерами
выше у нас есть网格项"Волна операций свирепа, как тигр", давайте посмотрим на нее еще раз, ибо网格容器Возможна ли операция «зачисти армию, и я командую».
Уровни с 20 по 22 в основном предназначены для网格容器свойстваgrid-template-columnsиgrid-template-rowsрасширен.
Вот краткий обзор уровней 20-22:
-
grid-template-columnsиgrid-template-rowsВ строках и столбцах, используемых для установки макета сетки网格轨道размер - Функция повтора может упростить несколько одинаковых значений, формат
repeat(N, value), где N — число, а значение — значение. Repeat можно смешивать с другими значениями, такими как:grid-template-columns: repeat(N-1, value) value - При определении вышеуказанных свойств допускается сочетание единиц длины.
Уровни 23-25, в основном объясняют ключевые словаfrиспользование.
Вот сводка уровней 23-25:
-
frАнглийское слово для «оценки»fractionсокращение для . -
frИспользуется для равного разделения оставшегося пространства контейнера сетки. ТакfrКак распределяется пространство? Например: есть три A, B и C网格轨道,Ихgrid-template-columnsНастройки в порядке1fr,2frи3fr. Затем они совместно делят ряд на 6 равных частей, тогда пространство А, В и С получает по очереди 1/6, 2/6 и 3/6 этого ряда. -
frможно смешивать с другими единицами, такими какgrid-template-columns: 1fr 50px 1fr 1fr;. При расчете приоритетов следует помнить следующее:auto, сначала вычислите все фиксированные значения (включая проценты), а затем вычислите оставшееся местоfr.
Уровень 26 Введениеgrid-template-rowsс предыдущимgrid-template-columnsСинтаксис аналогичен. Игроку остается попробовать.
Уровень 27 вводитgrid-template-columnsиgrid-template-rowsсокращение дляgrid-template, записывается как:grid-template-rows / grid-template-columns
Пройдя сотни поворотов, мы наконец подошли к дну, давайте взглянем на уважение большого БОССА:
ВТФ? Можно написать только одну строчку кода?
хорошо подумай:grid-templateСамый лаконичный формат/Отдельные первый и последний столбцы.
Сначала решите линию: вам нужно сначала разделить 50 пикселей, а затем отдать 100% цветам и растениям. Затем решите столбец, сценарий столбца типиченfrИспользуя сцену, сорняки занимают 1/5 места, а морковь — 4/5.
Итак, код:grid-template: 1fr 50px/1fr 4fr;
Бинго!Поздравляем, растаможка прошла успешно!
Эпилог
Да, мы быстрее всех освоили CSS Grid. Тем не менее, для всей CSS Grid мы сделали только наиболее часто используемое отображение, а более интересные методы еще ждут каждого, чтобы открыть для себя и эволюцию стандарта.
Ссылка в тексте
Статьи по Теме
- Макет CSS Grid, о котором вы не знали
- Итоги полугодия 2017 г. – Обзор предварительных событий
- Приближаются дни написания вложенных CSS напрямую без предварительной компиляции.
Спасибо
Спасибо г-ну Ли Сунфэну, Гао Фэну и Лю Боуэну за их уместные комментарии по поводу пересмотра этой статьи. Дизайнер Ван Сюаньмей помог разработать красивую титульную карту. Искреннее спасибо здесь.
О Еженедельнике Циву
«Qiwu Weekly» — это сообщество передовых технологий, управляемое профессиональной командой «Qiwu Troupe» компании 360. Подписавшись на официальный аккаунт, вы можете отправить нам статью, отправив ссылку прямо на фон.