Выбор CSS макета: Grid или Flexbox?

В целом Grid и Flex решают одни и те же задачи при разработке макета, но между ними всё же есть отличия:

— Flexbox является популярной системой вёрстки, но она одномерна: разработчики могут работать только со столбцами или строками.
— CSS Grid считается двумерной системой компоновки, с помощью которой можно передвигать элементы между строками и рядами.

Однако для более удобной вёрстки сайта можно совмещать оба модуля и использовать гриды только для каркаса сайта, а флексы — для контента.

Источник: https://odva.pro/blog/flex_or_grid/

#web #css

@react_tg

DevSamples — полезная коллекции чужого кода

С её помощью вы можете найти кусок, который будет полезен именно вам в вашем проекте — его можно свободно скопировать и вставить

Основное внимание сервис уделяет исходным кодам для веб-разработчиков

Стоимость: #бесплатно

#web #css #шпаргалка

@react_tg

GSAP - Scroll animation — анимация текста при прокрутке. Реализована с помощью CSS и JavaScript

#анимация #css #javascript #gsap

https://codepen.io/Tiopayo/pen/QWZbqZz

@react_tg

Shapes, Clip-Path and CSS Grid — демонстрация CSS Shapes, CSS-свойства clip-path и CSS Grid. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

https://codepen.io/mandymichael/pen/axZyoP

@react_tg

Стильный слайдер для сайта

#html #css #js #slider

https://codepen.io/theseventh/pen/LYVqMYb

@javascriptv

Интерактивная шпаргалка по CSS Grid

Все шпаргалки можно разделить на 3 категории: регулярки, css grid и всё остальное. В данном случае это — второй вариант.

Шпаргалка объёмная, можно на месте сравнить как будут отображаться те или иные варианты конфигурации.

Ссылка на шпаргалку

#шпаргалка #css

@react_tg

🔥 Pagination - Simple Pagination

Симпатичный эффект при переключении страниц, созданный на чистом CSS.

#css

https://codepen.io/Azametzin/pen/ZEVKJNX

@react_tg