Float, inline-block, flex, grid layout - способы создания разметки. Назначение технологий
HTML-код
- Опубликовано: 8 сен 2024
- Способы построение разметки и эволюция сеток.
Сетка на float. Сетка на inline--block. Сетка на flexbox. Сетка с помощью Grid Layout.
Баги и плюсы предложенных вариантов. Назначение каждой из возможностей.
Дикий пример на Grid Layout. Примеры когда CSS Grid нужен, а когда нет.
Взаимоотношения flexbox, grid layout и smart-grid.
Тренажёр, который демонстрировался в уроке на третьем экране - smartgrid.dmitr...
Дмитрий, вы реально крутой! Раньше просто от всех этих слов голова лопалась , тут же все очень интересно и понятно! 2часа вообще не заметно пролетают! Радует , что вы все темы открываете на столько , что я даже на ютубе и не видел ,чтоб кто-то так ковырял до сути, чтоб зритель понял. Большая вам благодарность!!
Лучшего изложения материала нигде не найти!!!
Молодчага. Чувствуется истинный живой интерес к своему делу. Благодарю.
Очень крутой вебинар! Дмитрий суперски обьясняет! ;-)
Спасибо за прекрасные и понятные уроки. Сам учу front-end разработку по книгам O`reilly, потом практика и для закрепления и расширения знаний захожу сюда. Дмитрию отдельное спасибо, за позитив и прекрасную подачу материала.
Огромное спасибо! Разложил прям , лучше не куда. Изложение с анализом - это самая правильная подача материала!
Привет, я занимаюсь разработкой почти 4 года, три из которых я верстал, периодически серфлю инет и попадал пару раз на твои уроки, но не нашел ничего интересного, но вот сейчас с флексами я открыл для себя много нового, спасибо и продолжай в том же темпе =)
Урок бомба !!! Очень понравился !! Спасибо огромное за видосы!
Потрясающе! Очень многое прояснил, спасибо.
Автор красава. Нравится смотреть его видео. Все очень интерессно.Большое спасибо.
Дмитрий, очень круто рассказываете 👍 спасибо за видео, очень долго понимал суть clearfix 🤔
Урааа! Новый видос :)
грид просто божественен
1:17:30 grid layout
Спасибо, знаю чем занять себя вечером )))
спасибо. расширил кругозор.
Супер! Спасибо!!!
Дмитрий, спасибо, за вебинар, еще не досмотрел, но лайк сразу ставлю, желаю успеха в дальнейшем!
У меня такой вопрос, где этот лендинг, на котором можно на вебинары записываться? Я был на курсе по смартгриду, забыл спросить, сам тоже не разобрался, подскажите, пожалуйста, не хотел бы пропускать вебинары в дальнейшем)
Ставь лайк, если считаешь, что Дмитрий - бог верстки
у тебя жизнь в лучшую сторону пойдет если налайкают твой бесполезный коммент?
По большему счету не стоит забивать голову всей этой кашей. Если взять флексбокс, то 95% директив никак не применяются на практике. По сути сейчас используются 2 команды: вертикальное выравнивание и cмена позиции при адаптации, остальное все отлично решается и без флекс. Если взять гриды, то еще нет поддержки нормальной, а если будет то 90% фич не нужны на практике.
лайк не глядя)
здравствуйте пожалуйста сделайте видио или ряд видио как применят Js на практике
Дмитрий, ваши уроки реально самые лучшие!!!!!!! Объясните, пожалуйста, зачем к классу .col обращаться вот так: .wrapper . col {......}. Я по вашему примеру все сделал на flex, но только напрямую обращаюсь к классу вот так: .col {......} и все отлично работает. Вот теперь голову ломаю почему у вас так .wrapper . col {......}?
очень круто))
42:26 - inline-block
Я конечно понимаю, что нужно было показать работу с сеткой. Но через grid-template-areas эту задачу можно выполнить написав куда меньше кода.
Осталось только подождать пару лет+, пока гриды можно будет использовать в продакшене.
давно уже не делал сайты, flex и grid тогда еще не было. Я так понял они круче чем float, который уже устарел.
Дмитрий, Вы ещё проводите онлайн вебинары?
Дмитрий, вы используете в расчетах calc() , а как быть с поддержкой opera mini ? никакого полифилла на нее нет, я так понимаю?
Есть - можно использовать отступы в %, тогда calc не нужен. Пример решения на smart-grid - ruclips.net/video/GT4HNXpx0VQ/видео.html примерно с 7-ой минуты про calc.
У меня только два вопроса, почему рекурсия постоянно на экране и почему лаврик не стареет, что на старых видосах что сейчас молодое позитивное лицо)))
Дмитрий, надеюсь вы увидите.
Увидел другое ваше видео, понравилось и теперь я решил по нарастающей свои знания дополнить и просмотреть все остальные.
Так вот, в промежутке 18-22 минут ,где вы показываете сетку на флоатах, вы задаете отрицательный margin, тем самым "отменяя" или перекрывая действие паддингов заданных заранее для wrapper'a, вопрос: это вы по запарке или на самом деле есть обоснованный смысл?
Второй вопрос: я прочел ,что блоки не должны сами по себе отталкиваться от родителя, т.е. это к тому,что margin top и left задаются только чтобы пододвинуть элемент впереди стоящий, но не чтобы оттолкнуться самих себя, вот и пользуюсь таким подходом. И вот суть вопроса, почему нельзя задать дочерним элементам margin-right 30px (вместо 15 по сторонам ) и отменить last-child'om у крайнего? Может это противоречит самому понятию сетки или в последствии всплывут какие нибудь косяки?
так, last-child отменяется, но если для row задать отрицательный margin-right ,то они прижимаются.
Я понимаю,что если работает, то используй то,что хочешь.
НО мне бы очень помогло услышать от вас мнение( не то, как вы делаете) , а то как знаете должно быть
вот на 57 минуте вы про паддинги посмотрели)
Я так понял на флексах нельзя построить сетку с карточками товаров и отскакиванием по одной карточке, без растягивания на всю ширину, прижатую к левому краю и без медиа запросов. Как это показано в уроке для гридов с их минмаксом. Или есть решение?
У меня кота лаврик зовут)
«auto-fill ЗАПОЛНЯЕТ строку максимально возможным числом колонок
auto-fit ПОДСТРАИВАЕТ доступные на данный момент колонки под пространство, расширяя их, чтобы они могли занять все доступное пространство
Почему в том примере, с флоатами, когда он доавил больше текста, у него увеличился блок, как добиться этого, у меня текст либо выходит за пределы, либо расширяет блок в длину, и мин хейт не помогает. почему? вроде код точь в точь написал.
ааааааааааа пробелов нету в текСТЕ. ВОТ СОБАКА зАБЫЛ ЗА ЭТОТ БАГ. ВЬОРОЙ РАЗ ОН УБИВАЕТ У МЕНЯ 2 ЧАСА
НАДО НА ЛБУ НАПИСАТЬ
А что это за имена классов fa fa-fw ? От куда это пришло?
Это fontawesome - иконочный шрифт.
Я немного отстал: smart grid и grid layout это одно и то же?
Нет, smart grid это грубо говоря кастомный фреймворк, grid layout нативная технология css,
в smartgrid.js убираю offset а он все равно генерит 30, почему может так случаться
Если вообще убрать ключ у объекта с настройками, то берётся дефолтное значение. Чтобы вообще убрать offset, лучше всего задать его 0%
Спасибо большое
хотя он тогда убирает вообще офсет. я хотел что бы -15px не ставились по краям
это уже нарушение сетки) столбцы плотно прилегают к краям по правилам. такое исправление можно только вручную внести в примеси row-flex и row-float, заменив в них @offset_one_side на 0.
1:07:00
+
Дай тренажер для js и php
Дмитрий У меня к Вам два вопроса:
1 как попасть на Ваши вебинары ?
2 что сейчас с проэктом yknow.ru&
на группу подписаться, там анонс видел и подписался на рассылку, но не смог присутствовать на уроке
ссылку на группу кинь хоть
vk.com/dmitrylavrik
ох уж эти толерантные людишки. придумают всё, то флексы, теперь грилы, лишь бы не дать звиздюлей горе-дизайнеру с его запросами и полётом фантазии)))
но, функционала много не бывает)
Диванный Эксперт ахах
Вывод: Все дно, кроме флексбоксов.
Когда пишешь 1/6 Grid считает не колонки со строками, а разделительные полосы.ЭТО ВАЖНО!!!
по моему tutorial слишком длинный получился, не плохо бы разделить на 2 части, к самому интересному(grid layout), устаешь и внимание теряется
чувак, ставь на скорость х2, кто смотрит туториалы или вебинары в обычной скорости? //_-)
на 1.5 смотри и не за 1 раз а за пару дней