​#css #layout #grid

Гайд по Grid-системе

Все, что вы хотели знать о гридах, в одном месте.

https://prglb.ru/2zbot

​Практика использования Flexbox

Задачи верстки и их решения с помощью флексов.

https://prglb.ru/3fpvt

#css #layout

​Flexbox Defense

Расставляй башни и уничтожай противника в увлекательнейшей игре, изучая заодно свойства Flexbox-модели

http://www.flexboxdefense.com/

#css #games #layout

​Разбираемся с CSS Grid: создание grid-контейнера

Полезный лонгрид по гридам от Рейчел Эндрю

https://prglb.ru/2pq5y

#css #grid #layout

CSS Grid: полный контроль над макетом

CSS Grid — это самая продвинутая на данный момент система управления разметкой страницы в CSS. Она позволяет контролировать сразу два измерения и создавать очень сложные макеты.

🤷‍♂️ Но для новичка может быть непросто разобраться в этом многообразии новых концепций и свойств. Поэтому вот вам еще одно большое руководство по гридам: https://prglb.ru/3ramo

Что тут есть?

👉 Подробный разбор элементов грид-сетки (контейнеров, линий, ячеек, областей)
👉 Введение в новые функции (minmax, repeat) и юниты размерности (fraction)
👉 Объяснение свойств позиционирования элемента в сетке
👉 Примеры готовых макетов
👉 Советы по отладке

#css #layout #grid

Диагональные лейауты в 2020

Диагональные линии делают макеты динамичными и нестандартными. Но чтобы реализовать их в верстке, приходится прибегать к массе ухищрений.

Существует как минимум три подхода к заострению углов:

👉 SVG
👉 CSS Clip Path
👉 CSS Transforms

Статья подробно расскажет именно о последнем.

Читать: https://www.cat-in-web.ru/diagonal-layouts/
А здесь краткий конспект: https://prglb.ru/2th1d

#css #layout