​#css #layout #beginners

12 Flexbox-трюков, которые вы должны знать

Узнайте, как Flexbox может сэкономить ваше время.

https://dev.to/duomly/12-flexbox-tips-tricks-which-you-need-to-know-as-a-web-developer-1bkg

​#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

​Гибкие лейауты на Flexbox

Подробное введение в свойства flexbox-модели с примерами.

Читать: https://prglb.ru/bft7

#css #beginners #layout

Познай тайны Flexbox

Видео-курс, посвященный Flexbox-модели в CSS. Наглядный детальный разбор всех свойств и примеры их использования.

Смотреть: https://www.youtube.com/playlist?list=PL_uwZ1gR-hzJob04JV6m7eksx_MPnvDws

#video #css #layout

Как сделать ваш HTML отзывчивым, добавив одну строку кода на CSS

Используем CSS Grid для создания крутой сетки изображений, которая изменяет количество столбцов в зависимости от ширины экрана или окна браузера. И все это всего лишь одной строчкой CSS-кода! 😲

Читать: https://prglb.ru/5mbd1

#css #grid #layout

Шпаргалка по GRID

Подробная шпаргалка по всем свойствам Grid Layout: https://prglb.ru/cic7

#css #layout #grid

CSS Grid — швейцарский армейский нож для макетов сайтов и приложений

Большой обзор Grid-модели: https://prglb.ru/2r33v

#css #layout #grid

Sticky + Grid

Можно ли заставить sticky-элементы работать как нужно в grid-раскладке? Да!

https://proglib.io/w/386d3704

#css #layout

​Изучаем CSS Grid на примерах

Система Grid (сетка) является одной из наиболее полезных функций, добавленных в CSS. Она позволяет выравнивать элементы страницы по столбцам и строкам. CSS Grid упрощает разработку сложных и адаптивных веб-страниц и не требует данных с плавающей запятой, таблиц или позиционирования. У Grid есть множество и более мощных способностей.

https://proglib.io/w/1b8140ed

#css #layout

Дизайн без сеток

Выходим за пределы сеток в вебе: https://gridless.design/

#layout

Поприветствуйте CSS-запросы от контейнера

Запросы от контейнера уже здесь, и они сделают вашу жизнь намного проще: https://proglib.io/w/c72821af

#css #layout

6+5 способов сделать две колонки ✌️

От таблиц и флоатов до гридов и полной дичи 😱

https://proglib.io/w/221e9587

#video #css #layout