Ответ : 1) Сайт можно сверстать на одном flex. 2) Сайт можно сверстать на одном grid. 3) Сайт можно сверстать комбинируя flex и grid. Вообще все упирается именно а адаптацию сайта. Вам его потом так или иначе надо будет адаптировать через запросы, и кто то говорит, что в этом плане grid является более лучшим вариантом, но я думаю ,что все относительно и крайне поверхностно. Решает в итоге "оператор", который либо создал отлично структурированный проект, либо "спагетти с тефтелями". Так что если вам нравиться flex - вперед. Нет ничего такого, что бы вы не сделали на flex так, как бы сделали на grid и наоборот.
Огромное Вам спасибо, Анна! Как замечательно, что есть ВЫБОР для просмотра подобных фишек. Ведь специалистов много, грамотных специалистов - тоже много. Но у всех разный стиль преподнесения информации: кто-то в контент вплетает разные "шуточки" (они могут быть полезны в плане того, что эти моменты могут образовывать более устойчивые нейронные связки, но для кого-то очень серьезно "режут ухо", нанося различного рода вред ментальному организму), кто-то - "шуточки на грани...". Я сам по природе своего воспитания - достаточно некультурный. И именно ПОЭТОМУ (в целях перевоспитания) предпочитаю более культурный контент (у Анны это очень хорошо получается). Плюс: системная грамотность самой сути контента, плюс - грамотная речь. Огромное Вам, Анна, спасибо за контент! Успехов!
Flexbox выбрали больше, потому что он старый и многие к нему привыкли и не отвыкли его использовать. Но если честно мне жаль, что используют Flexbox, а не Grid им гораздо легче справляться со всем чем возможно начиная с адаптивности до последней капельки однозначно Grid лидер и настоящий спаситель :)))
@@annblok_webdev да да иногда просто если видишь блок такой для флекса :))) просто делаешь им и не паришься.А так гридом можно делать каркасы сайтов, просто каркасы и если на фреймворк перебросить, спокойна разбиваешь на блоки и не нужно каждый див искать чей почему там!
Спасибо за видео. Я только начал учить вëрстку и как раз нужен был ответ на этот вопрос. Хотелось бы посмотреть на практический пример использования грид, для вëрстки лединга.
Лично для меня флекс всегда был проще в понимании, по этому работаю с ним чаще. но как было сказано в видео, сетка = грид , 1 ось = флекс... на флексе можно построить сетку не хуже чем с гридом, но и добавятся дивы в разметке. Вообще верстать нужно так как тебе удобней.
в начале было заявлено что будут показаны случае когда нужно использовать флекс а когда грид, в итоге все примеры под флекс свойство гэп для флекс имеет поддержку 90%, о чем тоже неплохо бы сказать
@@annblok_webdev смотрел до конца, два последних примера я с тем же успехом сделаю их на флексах причем автоматом, просто потому что у флекса поддержка чуть лучше а выгоды от гридов на этих примерах я не вижу классический пример для гридов когда один элемент в сетке занимает больше одной строки, его видимо и надо было показать
@@eridiant «выгода» как минимум в том, что управлять колонками легче одной строкой в родительском блоке с Grid, если размеры колонок будут разными, без пропорций 1fr. Пример, где идёт захват в несколько строк, очевиден, поэтому и не был включён в подборку. Для сеток верное решение - Grid. Для однолинейных построений - Flexbox, чаще всего.
Ну как можно не поставить лайк. Еще бы, даже не знаю как сформулировать, стоит от вас ожидать видео сравнения фреймворков? - в русскоязычном сегменте ютуба практически нет таких видео (к слову сказать, в англоязычном есть топ подборки). Переходил от bootstrap на zurb foundation, теперь хочу попробовать что-то более легкое, типа tailwild (у вас хорошее есть видео), bulma, uikit, milligram и прочее. И ваше мнение, если не bootstrap и foundation, то что? Спасибо за канал!
У меня такого видео действительно пока нет, но есть обзор выбора фреймворков с точки зрения популярности вакансий - th-cam.com/video/o7Rwrx1uSv4/w-d-xo.html Но это не говорит напрямую о том, что тот или иной фреймворк плох, просто это одна из особенностей, которую стоит учитывать. Про CSS-фреймворки поняла 👍
а что лучше использовать, когда нужно сделать отступы между дочерними элементами (напр. вправо) , при этом чтобы это было кроссбраузерно, я очень часто делал margin-right и задавал также родителю отрицательное значение этого отступа, либо мудрил с nth-child, получается что gap решает эту проблему? p.s спасибо за ролик :)
Не могу освоить Flexbox, да и профессиональную верстку в целом. Причина - нет понимания как, и почему именно так, ведут себя элементы в комбинации друг с другом (соседние, вложенные, на разных разрешениях экрана, перестраиваются и т.д.). Грид освоил легко т.к. можно что угодно привязать к нужной области, ячейкам. За 4 года освоил пару языков программирования и несколько технологий. И за эти 3 года каждый раз пытался и не мог понять Flexbox... Хотя курсы по нему идут около часа. Странно..
Спасибо, но не затронули аспект, наличия/отсутствия контента Ведь если во flex удалить элемент, то все подстооеься, а вот в grid, если удалить элемент, ьл может быть и нк очень, так как сетка. И адаптация: вот здесь обычно вечный вопрос
Для flexbox вместо margin можно использовать gap, поддерживается начиная с Safari 14.1, в Chrome и Firefox уже давно работает. Для grid поддержка gap ещё лучше. // в видео про gap тоже говорится, но почему-то в начале используется margin
по другим к примеру делаешь вёрстку с лево на право, с верху в низ. А на гридах делаешь всё сразу :))) и все блоки готовы.Тоисть каркас под адаптив и на всё разом готово. Тебе остаётся верстать по блокам. Чем лучше особенно грид против всех? тем что используя фреймворки где есть компоненты и преходится бегать по файлам и в каждый заходишь не понятно, что воляется и что это за классы вообще это флекс или обычная вёрстка. на гридах ты разбиваешь на блоки и знаешь кто чей и в ком лежит :)))
В общем так почитал коменты хвалят грид, задача умники: имеется блок родитель контейнер, внутри например девять кнопок, или просто дивов, ширина каждого из дочерних дивов зависит от контента (текста) и разная само собой, как их построить гридом чтобы они спрыгивали когда не помещаются при этом без маржинов отступы сделать и так чтобы расстояния во всех рядах были одинаковые меж дочерними елементами? Ну явно сеточная, табличная, ячеечная структура не катит
@@annblok_webdev Возможно не правильно выразил свои мысли, но сейчас только ленивый не упоминает о Биткоин и все что с ним связано. Интересует аспект связанный именно с крипто пространством и как с этим коррелирует IT направление. Возможно вам известны какие либо примеры (что то типа blockchain developer) реализации проектов на основе технологии блокчейн. Ведь как минимум, в недалеком будущем (да и сейчас) это направление займет достойное место в IT разработке.
@@annblok_webdev конечно))) если веб разработчики увидят, как в андройде интерфейс делают 0о0 сразу бросят и пойдут туда.Но там это только начало страдании))
и то что разработчики мои, мало встречаются гриды на сайтах :))) это потому - Либо создатель не знал о гридах, либо не умел на гридах, либо привык к тому что есть и сделал не на гридах и не на флексе, либо привык использовать флексбокс и лень перейти на грид и привык страдать на нём, либо только начинает использовать грид , а кто горазда умнее оказался начал использовать грид по всей красе :))).
20 минут литья воды, а вся суть только в последних 10 сек. Нужно было брать определенный пример и на нём показывать пример использования сначала flex, а потом как это же реализовать с помощью grid, и на основании этого делать вывод, что в какой ситуации лучше использовать. Ну это моё субъективное мнение, спасибо за труд, может кому-то было полезно.
Такие примеры - это уровень первого занятия по флексам. Разве сложно показать как решать флексами действительно нестандартную задачу? Никто не просит выкладывать целый курс, но пару примеров и решений можно было бы показать
Ответ :
1) Сайт можно сверстать на одном flex.
2) Сайт можно сверстать на одном grid.
3) Сайт можно сверстать комбинируя flex и grid.
Вообще все упирается именно а адаптацию сайта. Вам его потом так или иначе надо будет адаптировать через запросы, и кто то говорит, что в этом плане grid является более лучшим вариантом, но я думаю ,что все относительно и крайне поверхностно. Решает в итоге "оператор", который либо создал отлично структурированный проект, либо "спагетти с тефтелями". Так что если вам нравиться flex - вперед. Нет ничего такого, что бы вы не сделали на flex так, как бы сделали на grid и наоборот.
Спасибо большое Анна ! Как раз давно искал информацию на эту тему , чтобы кратко и по делу !
Огромное Вам спасибо, Анна! Как замечательно, что есть ВЫБОР для просмотра подобных фишек. Ведь специалистов много, грамотных специалистов - тоже много. Но у всех разный стиль преподнесения информации: кто-то в контент вплетает разные "шуточки" (они могут быть полезны в плане того, что эти моменты могут образовывать более устойчивые нейронные связки, но для кого-то очень серьезно "режут ухо", нанося различного рода вред ментальному организму), кто-то - "шуточки на грани...". Я сам по природе своего воспитания - достаточно некультурный. И именно ПОЭТОМУ (в целях перевоспитания) предпочитаю более культурный контент (у Анны это очень хорошо получается). Плюс: системная грамотность самой сути контента, плюс - грамотная речь. Огромное Вам, Анна, спасибо за контент! Успехов!
Flexbox выбрали больше, потому что он старый и многие к нему привыкли и не отвыкли его использовать. Но если честно мне жаль, что используют Flexbox, а не Grid им гораздо легче справляться со всем чем возможно начиная с адаптивности до последней капельки однозначно Grid лидер и настоящий спаситель :)))
Да, лень имеет место быть, вместо того, чтобы подучить Grid
@@annblok_webdev да да иногда просто если видишь блок такой для флекса :))) просто делаешь им и не паришься.А так гридом можно делать каркасы сайтов, просто каркасы и если на фреймворк перебросить, спокойна разбиваешь на блоки и не нужно каждый див искать чей почему там!
@@annblok_webdev я щас хочу код скинуть про первую менюшку =)) сюда
@@annblok_webdev это css
*{
margin: 0;
padding: 0;
color: #fff;
box-sizing: border-box;
font-family: 'Roboto',sans-serif;
}a{
text-decoration: none;
}.grid{
width: 100%;
height: auto;
padding: 8px 10px;
background: #1c1c1c;
display: grid;
grid-template-columns: repeat(2,1fr);
align-items: center;
}.grid div{
display: grid;
grid-template-columns: repeat(3,1fr);
}
@media(max-width: 420px){
.grid{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
}.grid a{
margin-bottom: 10px;
}
}
@media(max-width: 230px){
.grid div{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
просто flex добовляет динамичности где к примеру нужны блоки добавить в право либо в лево,а гридах строки можно так сделать=)),а колонки по трудится
Анна, вы лучшая! Спасибо огромное за уроки.
❤️
97% grid и 3% flex - строю сайты на coffee cms
огромное спасибо за супер наглядное и понятное видео без воды!
Рада, что понравилось 😊🙌
not bad, теория есть, нужно было узнать где что использовать. Теперь осталось только применить на практике) Thx, контент огонь
❤
Огромное вам спасибо. Помогли, пол ночи голову ломал, как сделать. Посмотрел ваш ролик и стало ясно что и как сделать
Спасибо за видео. Я только начал учить вëрстку и как раз нужен был ответ на этот вопрос. Хотелось бы посмотреть на практический пример использования грид, для вëрстки лединга.
Лично для меня флекс всегда был проще в понимании, по этому работаю с ним чаще. но как было сказано в видео, сетка = грид , 1 ось = флекс... на флексе можно построить сетку не хуже чем с гридом, но и добавятся дивы в разметке. Вообще верстать нужно так как тебе удобней.
Огромное спасибо. Очень понятно и интересно)
Отлично объяснение, спасибо за видео!
Очень хороший урок, спасибо)
Анна, спасибо большое!! Классное видео!
Рада, что видео оказалось полезным ☺️
5:48 Анна а почему для отступов gap: 10px; не используете?
спасибо за видео , все доступно, понятно
в начале было заявлено что будут показаны случае когда нужно использовать флекс а когда грид, в итоге все примеры под флекс
свойство гэп для флекс имеет поддержку 90%, о чем тоже неплохо бы сказать
Похоже, вы не досмотрели видео. Примеры с Grid в видео есть.
@@annblok_webdev смотрел до конца, два последних примера я с тем же успехом сделаю их на флексах причем автоматом, просто потому что у флекса поддержка чуть лучше а выгоды от гридов на этих примерах я не вижу
классический пример для гридов когда один элемент в сетке занимает больше одной строки, его видимо и надо было показать
@@annblok_webdev если вдруг огорчаетесь от критических комментариев, то обычно мне все ваши видео нравятся)
@@eridiant «выгода» как минимум в том, что управлять колонками легче одной строкой в родительском блоке с Grid, если размеры колонок будут разными, без пропорций 1fr. Пример, где идёт захват в несколько строк, очевиден, поэтому и не был включён в подборку. Для сеток верное решение - Grid. Для однолинейных построений - Flexbox, чаще всего.
Не огорчаюсь. Это не критика. Просто показалось, что вы не досмотрели видео и сделали поспешные выводы.
Спасибо, Анна. Понятно и наглядно
❤️
Хорошее видео, спасибо за хорошее объяснение!
☺️
Я как верстальщик чаще пользуюсь flex, grid редко применяю, но тоже прикольная тема
Здравствуйте. Пример 1. Время 5:50. Если бы меню надо было прижать ближе к правой кнопке "Login" как бы это сделали?
Спрашиваете что выбрать flex box или grid?
Я бы выбрал Вас🌹❤️
Просто КРАСАВИЦА
Вечно бы учился бы у Вас, я прилежный и послушный ученик😇
Спасибо, очень хорошие примеры
Ну как можно не поставить лайк. Еще бы, даже не знаю как сформулировать, стоит от вас ожидать видео сравнения фреймворков? - в русскоязычном сегменте ютуба практически нет таких видео (к слову сказать, в англоязычном есть топ подборки). Переходил от bootstrap на zurb foundation, теперь хочу попробовать что-то более легкое, типа tailwild (у вас хорошее есть видео), bulma, uikit, milligram и прочее. И ваше мнение, если не bootstrap и foundation, то что? Спасибо за канал!
У меня такого видео действительно пока нет, но есть обзор выбора фреймворков с точки зрения популярности вакансий - th-cam.com/video/o7Rwrx1uSv4/w-d-xo.html Но это не говорит напрямую о том, что тот или иной фреймворк плох, просто это одна из особенностей, которую стоит учитывать. Про CSS-фреймворки поняла 👍
Очень полезно, спасибо за видео, Анна!) Но со звуком какая-то беда, очень тихо.
Рада, что видео оказалось полезным! 👍 Но уровень звука абсолютно тот же, что и на предыдущем видео)
@@annblok_webdev странно посравнению с другими видио действительно тише
Я бы не рекомендовал использовать gap в флексах. Потому что яблочники каких то там 10-х или 11-х версий не знают, что такое gap в флексе.
как раз только начал изучать grid, флексбокс уже немного знал
Правильно делаете, что учите оба свойства 👍 А то порой останавливаются только на Flexbox и все)
Почему в 1 примере margin, почему не использовать gap, содержащего ссылки для контейнера?
Когда это видео записывалась, у gap была слабая поддержка. Это сейчас можно его использовать везде.
бывают макеты где вообще ни грид ни флекс не поможет, только магия)
Можно пример таких макетов?)
Вопрос про курс "ПРОФЕССИЯ ВЕРСТАЛЬЩИК". Какова длительность курса, не особо понятно, толи 3 месяца, толи 12 месяцев?
Обучение длится 3 месяца
а что лучше использовать, когда нужно сделать отступы между дочерними элементами (напр. вправо) , при этом чтобы это было кроссбраузерно, я очень часто делал margin-right и задавал также родителю отрицательное значение этого отступа, либо мудрил с nth-child, получается что gap решает эту проблему? p.s спасибо за ролик :)
хмм, посмотрел самостоятельно на can i use, 88% поддержки у gap
Да, gap решает. Можно добавить ещё @support для кроссбраузерности
Спасибо, очень полезная информация.
Не видео, а пушка!
Можно использовать для li не margin, а gap? Просто я его использую
Да, это современный метод
Какая умная и симпатичная девушка!
А этот практикум актуален щас?
Не могу освоить Flexbox, да и профессиональную верстку в целом. Причина - нет понимания как, и почему именно так, ведут себя элементы в комбинации друг с другом (соседние, вложенные, на разных разрешениях экрана, перестраиваются и т.д.).
Грид освоил легко т.к. можно что угодно привязать к нужной области, ячейкам.
За 4 года освоил пару языков программирования и несколько технологий. И за эти 3 года каждый раз пытался и не мог понять Flexbox... Хотя курсы по нему идут около часа. Странно..
Аня, ты такая красивая, прямо завораживающая ...
Умничка какая.
да начнется холивар))) согласен, назначение типов разметки определяет, как и в каком месте сайта будет конкретный тип или их связка
Не показано, что будет с этими примерами, если врубить мобильную версию...
@media подключаете и исправляете под моб.версию, как и на любом сайте
Спасибо, но не затронули аспект, наличия/отсутствия контента
Ведь если во flex удалить элемент, то все подстооеься, а вот в grid, если удалить элемент, ьл может быть и нк очень, так как сетка.
И адаптация: вот здесь обычно вечный вопрос
Для flexbox вместо margin можно использовать gap, поддерживается начиная с Safari 14.1, в Chrome и Firefox уже давно работает. Для grid поддержка gap ещё лучше.
// в видео про gap тоже говорится, но почему-то в начале используется margin
Gridы имба, flex не отстаёт из-за своей простоты, надеюсь, что эти 2 технологии станут стандартом.
У gap во флексах еще плохая поддержка так что лучше его пока что не использовать.
89% поддержки - плохо? Очень даже отличные показатели.
@@annblok_webdevну, думаю для сайтов на продакшен этого все еще малова-то ))
@@dmitriymovchan6563 если так думаете, то используйте ещё support в CSS
Да, все проще: использовать то, что упрощает верстку и вывод контента из бэкэнда.
по другим к примеру делаешь вёрстку с лево на право, с верху в низ. А на гридах делаешь всё сразу :))) и все блоки готовы.Тоисть каркас под адаптив и на всё разом готово. Тебе остаётся верстать по блокам. Чем лучше особенно грид против всех? тем что используя фреймворки где есть компоненты и преходится бегать по файлам и в каждый заходишь не понятно, что воляется и что это за классы вообще это флекс или обычная вёрстка. на гридах ты разбиваешь на блоки и знаешь кто чей и в ком лежит :)))
В общем так почитал коменты хвалят грид, задача умники: имеется блок родитель контейнер, внутри например девять кнопок, или просто дивов, ширина каждого из дочерних дивов зависит от контента (текста) и разная само собой, как их построить гридом чтобы они спрыгивали когда не помещаются при этом без маржинов отступы сделать и так чтобы расстояния во всех рядах были одинаковые меж дочерними елементами? Ну явно сеточная, табличная, ячеечная структура не катит
Расскажите нам пожалуйста в следующем видео про Биткоин. Спасибо.
Что, например?
@@annblok_webdev Возможно не правильно выразил свои мысли, но сейчас только ленивый не упоминает о Биткоин и все что с ним связано. Интересует аспект связанный именно с крипто пространством и как с этим коррелирует IT направление. Возможно вам известны какие либо примеры (что то типа blockchain developer) реализации проектов на основе технологии блокчейн. Ведь как минимум, в недалеком будущем (да и сейчас) это направление займет достойное место в IT разработке.
Девочка очень умная.
Барби нишо не слышно
однозначно грид нужно сделать 100%
Не представляю как делать такие элементы не используя грид и флекс
А я наоборот
Есть люди, кто проходил курс Типичный верстальщик JavaScript Мастер?
От имени типичного верстальщика курсов не проводится)
@@annblok_webdev ну, от Анна Блок, хотел отзывы от людей услышать)
вот для первого могу такое сказать =)) по гридам. Щас покажу код
На самом деле тут всё можно реализовать и с Grid и с Flexbox ))
@@annblok_webdev конечно))) если веб разработчики увидят, как в андройде интерфейс делают 0о0 сразу бросят и пойдут туда.Но там это только начало страдании))
Решают разные проблемы, считаю неуместным их сравнивать
Но тем не менее, новички часто задаются этим вопросом, поэтому и появилось это видео
и то что разработчики мои, мало встречаются гриды на сайтах :))) это потому - Либо создатель не знал о гридах, либо не умел на гридах, либо привык к тому что есть и сделал не на гридах и не на флексе, либо привык использовать флексбокс и лень перейти на грид и привык страдать на нём, либо только начинает использовать грид , а кто горазда умнее оказался начал использовать грид по всей красе :))).
всё на флексах делаю на изиче
Лучше float
капец, верстка с нулевых упростилась до жути. похоже скоро верстать будут машины
20 минут литья воды, а вся суть только в последних 10 сек. Нужно было брать определенный пример и на нём показывать пример использования сначала flex, а потом как это же реализовать с помощью grid, и на основании этого делать вывод, что в какой ситуации лучше использовать. Ну это моё субъективное мнение, спасибо за труд, может кому-то было полезно.
Тогда это вообще бы было часовое видео)))) Значит всё-таки нет воды 😉
Такие примеры - это уровень первого занятия по флексам. Разве сложно показать как решать флексами действительно нестандартную задачу? Никто не просит выкладывать целый курс, но пару примеров и решений можно было бы показать
О
Купи нормальный микрофон! Извини за крик души, но зачем издеваться над людьми?
Флэксбокс