Koddo
начать бесплатно

Flexbox и Grid: игра-тренажёр по CSS

Корабли садятся туда, куда их поставит CSS. Пишешь justify-content, align-items или grid-template-columns, и поле перестраивается на каждом символе. Уровень пройден, когда каждый корабль стоит на площадке своего цвета.

Главная ось
    ★ 0/150
    уровень 1 из 50 ★★★

    К правому краю

    Это космопорт, а ты диспетчер: корабли садятся туда, куда их поставит CSS. Порт .port уже стал flex-контейнером, и корабль встал в начало ряда. Отправь его на площадку у правого края через justify-content.

    Цветные скобки — площадки. Корабль садится на площадку своего цвета.

      
     
     
     
    На площадках 0 из 1.
     
         
      
     
     шпаргалка темы 
       
    • flex-startк началу оси, так по умолчанию
    • flex-endк концу оси
    • centerв середину
    • space-betweenкрайние у стен, свободное место между кораблями
    • space-aroundодинаковый отступ вокруг каждого корабля
    • space-evenlyвсе промежутки равны, у стен тоже
      •  
     
     
      
     
      
     
     
    Как играть
     
       
    1. Посмотри на поле. Цветные скобки — посадочные площадки. Каждому кораблю нужна площадка его цвета.
      2.  
    2. Допиши CSS в редактор. Правило уже открыто: вписываешь свойства, и корабли сразу едут на новые места. Кнопки «запустить» нет.
      3.  
    3. Посади все корабли. Уровень засчитан, когда они стоят на своих площадках. Три звезды — без подсказки и ответа, прогресс остаётся в браузере.
      4.  
     
     
     
    Темы и уровни
     
    Уровни идут от простого к сложному, но заперт ни один: знаешь Flexbox — сразу открывай Grid. Каждая тема вводит одно-два свойства, а финал мира собирает их вместе.
      
    Flexbox: 25 уровней
     
     
     
    Главная ось
     
    justify-content двигает корабли вдоль главной оси: в обычном ряду это горизонталь.
     
       
    1. 1 К правому краю
    2. 2 В середину ряда
    3. 3 Отступ вокруг каждого
    4. 4 По краям и между
    5. 5 Равные промежутки
      6.  
     
     
    Поперечная ось
     
    align-items выравнивает корабли поперёк главной оси: в ряду это вертикаль.
     
       
    1. 6 К нижнему краю
    2. 7 Точно в центр
    3. 8 Внизу, с отступами
      4.  
     
     
    Направление
     
    flex-direction поворачивает главную ось: ряд, колонка или обратный порядок.
     
       
    1. 9 Обратный порядок
    2. 10 В колонку
    3. 11 Обратный порядок у левого края
    4. 12 Колонка внизу
    5. 13 Снизу вверх, по краям
      6.  
     
     
    Один корабль
     
    Правило для одного корабля: order, align-self и margin двигают его отдельно от остальных.
     
       
    1. 14 Красный — в конец
    2. 15 Синий — первым
    3. 16 Жёлтый внизу
    4. 17 Кнопка справа
      5.  
     
     
    Перенос строк
     
    Кораблей больше, чем влезает в ряд: перенос, строки и зазоры.
     
       
    1. 18 Перенос на новую строку
    2. 19 Колонки с переносом
    3. 20 Строки по краям
    4. 21 Зазор 16 пикселей
      5.  
     
     
    Размеры
     
    flex-grow и flex-shrink решают, кто забирает свободное место и кто сжимается, когда места мало.
     
       
    1. 22 Синий растягивается
    2. 23 Втрое больше
    3. 24 Красные не сжимаются
      4.  
     
     
    Финал Flexbox
     
    Всё сразу: направление, перенос и выравнивание строк.
     
       
    1. 25 Строй в обратном порядке
      2.  
     
     
      
    Grid: 25 уровней
     
     
     
    Колонки и строки
     
    В Grid сначала чертят сетку, а корабли занимают ячейки по порядку.
     
       
    1. 26 Три колонки
    2. 27 Четыре колонки через repeat
    3. 28 Сайдбар 120 пикселей
    4. 29 Шапка и подвал
    5. 30 Зазор между ячейками
      6.  
     
     
    Линии сетки
     
    Сетка нумерует линии между колонками и строками. Корабль ставится от линии до линии.
     
       
    1. 31 Третья колонка
    2. 32 Через три колонки
    3. 33 Во всю ширину
    4. 34 Прямоугольник 2 × 3
    5. 35 Вниз на четыре клетки
    6. 36 Квадрат в центре
      7.  
     
     
    Области
     
    Сетку можно нарисовать словами: у области есть имя, у корабля — адрес.
     
       
    1. 37 Шапка, сайдбар, контент
    2. 38 Сайдбар справа
    3. 39 Пустые ячейки
      4.  
     
     
    Выравнивание в ячейках
     
    Корабль стоит в ячейке где угодно: по центру, в углу, у края. А ещё можно сдвинуть всю сетку.
     
       
    1. 40 По центру ячеек
    2. 41 К низу ячеек
    3. 42 Точно в центр ячейки
    4. 43 Красный в углу
    5. 44 Сетка по краям
      6.  
     
     
    Автоматическая сетка
     
    Сетка сама решает, сколько колонок и строк ей нужно.
     
       
    1. 45 Сколько влезет
    2. 46 Главная карточка
    3. 47 Строки по 70 пикселей
    4. 48 По колонкам
    5. 49 Без дыр
      6.  
     
     
    Финал Grid
     
    Сетка с нуля: колонки, строки, зазор и положение всей сетки.
     
       
    1. 50 Сетка с нуля
      2.  
     
     
      
     
     
    Шпаргалка по Flexbox и Grid
     
    Все свойства, которые встречаются в игре, с частыми значениями. Свойства для одного элемента — order, align-self, flex-grow, grid-column — пишутся в правиле элемента, остальные в правиле контейнера.
     
    Flexbox
     
     
     
    СвойствоЧто делаетЧастые значения
      
     display: flex делает элемент flex-контейнером flex, inline-flex 
     flex-direction направление главной оси row, row-reverse, column, column-reverse 
     justify-content выравнивание вдоль главной оси flex-start, center, flex-end, space-between, space-around, space-evenly 
     align-items выравнивание поперёк главной оси stretch, flex-start, center, flex-end, baseline 
     flex-wrap перенос элементов на новую строку nowrap, wrap, wrap-reverse 
     align-content расстановка строк, когда их несколько flex-start, center, space-between, stretch 
     gap зазоры между элементами и строками 16px, 8px 16px 
     order место элемента в ряду 0, 1, -1 
     align-self выравнивание одного элемента поперёк оси flex-start, center, flex-end, stretch 
     flex-grow доля свободного места 0, 1, 2 
     flex-shrink сжатие, когда места не хватает 1, 0 
     flex-basis размер до раздачи свободного места auto, 200px, 0 
          
     
     
    Grid
     
     
     
    СвойствоЧто делаетЧастые значения
      
     display: grid делает элемент grid-контейнером grid, inline-grid 
     grid-template-columns колонки сетки 1fr 1fr, repeat(3, 1fr), 200px 1fr 
     grid-template-rows строки сетки 60px 1fr 40px, repeat(2, 100px) 
     grid-template-areas карта именованных областей "header header" "sidebar main" 
     gap зазоры между ячейками 12px, 8px 16px 
     grid-column, grid-row линии, от которой до которой стоит элемент 1 / 3, 2 / -1, span 2 
     grid-area имя области или четыре линии сразу main, 1 / 1 / 3 / 3 
     justify-items, align-items, place-items положение элементов внутри ячеек start, center, end, stretch 
     justify-self, align-self положение одного элемента в ячейке start, center, end, stretch 
     justify-content, align-content положение всей сетки в контейнере start, center, space-between 
     grid-auto-rows высота строк, которые сетка создаёт сама 100px, minmax(80px, auto) 
     grid-auto-flow порядок заполнения ячеек row, column, dense 
          
     
     
     
     
    Flexbox или Grid: что выбрать
     
    Flexbox раскладывает элементы по одной оси — в ряд или в колонку, и размеры элементов подстраиваются под содержимое. Grid чертит сетку сразу в двух измерениях: сначала колонки и строки, потом элементы по ячейкам.
     
    Шапка с логотипом и меню, ряд кнопок, карточка по центру — это Flexbox. Каркас страницы с сайдбаром, галерея карточек, дашборд — Grid. В реальной вёрстке они работают вместе: сетку страницы задаёт Grid, а содержимое ячеек выравнивает Flexbox.
     
    Если сомневаешься, спроси себя, что важнее. Выровнять элементы относительно друг друга — Flexbox. Поставить их по заранее заданной сетке — Grid.
     
     
     
    Частые вопросы
     
     
     
    Игра бесплатная? Нужна регистрация?
     
    Бесплатная и без регистрации. Звёзды и набранный CSS хранятся в браузере: вернёшься с того же устройства и продолжишь с того же уровня.
     
     
    С чего начать: с Flexbox или с Grid?
     
    С Flexbox. Его 25 уровней вводят главную и поперечную оси, а на тех же осях держится выравнивание в Grid. Если Flexbox уже знаком, открой карту уровней и начни с темы «Колонки и строки».
     
     
    Засчитывается решение, которое не совпадает с ответом?
     
    Да. Игра сравнивает положение и размер каждого корабля с площадкой, а не текст CSS. На первом уровне корабль можно отправить вправо через flex-direction: row-reverse вместо justify-content: flex-end: уровень засчитан, если всё совпало до пикселя.
     
     
    Чем игра отличается от Flexbox Froggy и Grid Garden?
     
    Механика похожая: пишешь CSS, и объекты встают на места. Здесь Flexbox и Grid в одной игре, 50 уровней, а в последних темах — gap, flex-grow и flex-shrink, auto-fill с minmax() и плотная упаковка dense. Если застрял, на каждом уровне есть подсказка и ответ.
     
     
    Можно играть с телефона?
     
    Да. Поле масштабируется под ширину экрана, а CSS набирается обычной клавиатурой. С компьютера удобнее: в темах про области и автосетку строки длинные.
     
     
    Что делать после игры?
     
    Собрать настоящую страницу. В тренажёре HTML и CSS раскладка нужна уже для карточек, шапки с меню и адаптивной галереи. Первые 6 заданий из 21 бесплатны.
     
     
     
      
     
      
     
    Карта уровней