Ответ : 1) Сайт можно сверстать на одном flex. 2) Сайт можно сверстать на одном grid. 3) Сайт можно сверстать комбинируя flex и grid. Вообще все упирается именно а адаптацию сайта. Вам его потом так или иначе надо будет адаптировать через запросы, и кто то говорит, что в этом плане grid является более лучшим вариантом, но я думаю ,что все относительно и крайне поверхностно. Решает в итоге "оператор", который либо создал отлично структурированный проект, либо "спагетти с тефтелями". Так что если вам нравиться flex - вперед. Нет ничего такого, что бы вы не сделали на flex так, как бы сделали на grid и наоборот.
Для flexbox вместо margin можно использовать gap, поддерживается начиная с Safari 14.1, в Chrome и Firefox уже давно работает. Для grid поддержка gap ещё лучше. // в видео про gap тоже говорится, но почему-то в начале используется margin
Flexbox выбрали больше, потому что он старый и многие к нему привыкли и не отвыкли его использовать. Но если честно мне жаль, что используют Flexbox, а не Grid им гораздо легче справляться со всем чем возможно начиная с адаптивности до последней капельки однозначно Grid лидер и настоящий спаситель :)))
@@annblok_webdev да да иногда просто если видишь блок такой для флекса :))) просто делаешь им и не паришься.А так гридом можно делать каркасы сайтов, просто каркасы и если на фреймворк перебросить, спокойна разбиваешь на блоки и не нужно каждый див искать чей почему там!
Спасибо за видео. Я только начал учить вëрстку и как раз нужен был ответ на этот вопрос. Хотелось бы посмотреть на практический пример использования грид, для вëрстки лединга.
Спасибо, но не затронули аспект, наличия/отсутствия контента Ведь если во flex удалить элемент, то все подстооеься, а вот в grid, если удалить элемент, ьл может быть и нк очень, так как сетка. И адаптация: вот здесь обычно вечный вопрос
Огромное Вам спасибо, Анна! Как замечательно, что есть ВЫБОР для просмотра подобных фишек. Ведь специалистов много, грамотных специалистов - тоже много. Но у всех разный стиль преподнесения информации: кто-то в контент вплетает разные "шуточки" (они могут быть полезны в плане того, что эти моменты могут образовывать более устойчивые нейронные связки, но для кого-то очень серьезно "режут ухо", нанося различного рода вред ментальному организму), кто-то - "шуточки на грани...". Я сам по природе своего воспитания - достаточно некультурный. И именно ПОЭТОМУ (в целях перевоспитания) предпочитаю более культурный контент (у Анны это очень хорошо получается). Плюс: системная грамотность самой сути контента, плюс - грамотная речь. Огромное Вам, Анна, спасибо за контент! Успехов!
Лично для меня флекс всегда был проще в понимании, по этому работаю с ним чаще. но как было сказано в видео, сетка = грид , 1 ось = флекс... на флексе можно построить сетку не хуже чем с гридом, но и добавятся дивы в разметке. Вообще верстать нужно так как тебе удобней.
Ну как можно не поставить лайк. Еще бы, даже не знаю как сформулировать, стоит от вас ожидать видео сравнения фреймворков? - в русскоязычном сегменте ютуба практически нет таких видео (к слову сказать, в англоязычном есть топ подборки). Переходил от bootstrap на zurb foundation, теперь хочу попробовать что-то более легкое, типа tailwild (у вас хорошее есть видео), bulma, uikit, milligram и прочее. И ваше мнение, если не bootstrap и foundation, то что? Спасибо за канал!
У меня такого видео действительно пока нет, но есть обзор выбора фреймворков с точки зрения популярности вакансий - ua-cam.com/video/o7Rwrx1uSv4/v-deo.html Но это не говорит напрямую о том, что тот или иной фреймворк плох, просто это одна из особенностей, которую стоит учитывать. Про CSS-фреймворки поняла 👍
Не могу освоить Flexbox, да и профессиональную верстку в целом. Причина - нет понимания как, и почему именно так, ведут себя элементы в комбинации друг с другом (соседние, вложенные, на разных разрешениях экрана, перестраиваются и т.д.). Грид освоил легко т.к. можно что угодно привязать к нужной области, ячейкам. За 4 года освоил пару языков программирования и несколько технологий. И за эти 3 года каждый раз пытался и не мог понять Flexbox... Хотя курсы по нему идут около часа. Странно..
а что лучше использовать, когда нужно сделать отступы между дочерними элементами (напр. вправо) , при этом чтобы это было кроссбраузерно, я очень часто делал margin-right и задавал также родителю отрицательное значение этого отступа, либо мудрил с nth-child, получается что gap решает эту проблему? p.s спасибо за ролик :)
20 минут литья воды, а вся суть только в последних 10 сек. Нужно было брать определенный пример и на нём показывать пример использования сначала flex, а потом как это же реализовать с помощью grid, и на основании этого делать вывод, что в какой ситуации лучше использовать. Ну это моё субъективное мнение, спасибо за труд, может кому-то было полезно.
в начале было заявлено что будут показаны случае когда нужно использовать флекс а когда грид, в итоге все примеры под флекс свойство гэп для флекс имеет поддержку 90%, о чем тоже неплохо бы сказать
@@annblok_webdev смотрел до конца, два последних примера я с тем же успехом сделаю их на флексах причем автоматом, просто потому что у флекса поддержка чуть лучше а выгоды от гридов на этих примерах я не вижу классический пример для гридов когда один элемент в сетке занимает больше одной строки, его видимо и надо было показать
@@eridiant «выгода» как минимум в том, что управлять колонками легче одной строкой в родительском блоке с Grid, если размеры колонок будут разными, без пропорций 1fr. Пример, где идёт захват в несколько строк, очевиден, поэтому и не был включён в подборку. Для сеток верное решение - Grid. Для однолинейных построений - Flexbox, чаще всего.
@@annblok_webdev Возможно не правильно выразил свои мысли, но сейчас только ленивый не упоминает о Биткоин и все что с ним связано. Интересует аспект связанный именно с крипто пространством и как с этим коррелирует IT направление. Возможно вам известны какие либо примеры (что то типа blockchain developer) реализации проектов на основе технологии блокчейн. Ведь как минимум, в недалеком будущем (да и сейчас) это направление займет достойное место в IT разработке.
@@annblok_webdev конечно))) если веб разработчики увидят, как в андройде интерфейс делают 0о0 сразу бросят и пойдут туда.Но там это только начало страдании))
В общем так почитал коменты хвалят грид, задача умники: имеется блок родитель контейнер, внутри например девять кнопок, или просто дивов, ширина каждого из дочерних дивов зависит от контента (текста) и разная само собой, как их построить гридом чтобы они спрыгивали когда не помещаются при этом без маржинов отступы сделать и так чтобы расстояния во всех рядах были одинаковые меж дочерними елементами? Ну явно сеточная, табличная, ячеечная структура не катит
и то что разработчики мои, мало встречаются гриды на сайтах :))) это потому - Либо создатель не знал о гридах, либо не умел на гридах, либо привык к тому что есть и сделал не на гридах и не на флексе, либо привык использовать флексбокс и лень перейти на грид и привык страдать на нём, либо только начинает использовать грид , а кто горазда умнее оказался начал использовать грид по всей красе :))).
по другим к примеру делаешь вёрстку с лево на право, с верху в низ. А на гридах делаешь всё сразу :))) и все блоки готовы.Тоисть каркас под адаптив и на всё разом готово. Тебе остаётся верстать по блокам. Чем лучше особенно грид против всех? тем что используя фреймворки где есть компоненты и преходится бегать по файлам и в каждый заходишь не понятно, что воляется и что это за классы вообще это флекс или обычная вёрстка. на гридах ты разбиваешь на блоки и знаешь кто чей и в ком лежит :)))
Такие примеры - это уровень первого занятия по флексам. Разве сложно показать как решать флексами действительно нестандартную задачу? Никто не просит выкладывать целый курс, но пару примеров и решений можно было бы показать
Ну вообще да flex привычнее однозначно , учитывая что некоторые свойства grid еще не стабильно поддерживаются ))) НО! Совмещать никто не мешал ))) Да и конечно некоторые вещи сделать удобнее на гридах)))
@@annblok_webdev конечно , я не спорю ))) но я сейчас о том , что существуют отдельные компоненты , которые могут косо работать например в IE ))) Наверное не так выразился всё таки
Ответ :
1) Сайт можно сверстать на одном flex.
2) Сайт можно сверстать на одном grid.
3) Сайт можно сверстать комбинируя flex и grid.
Вообще все упирается именно а адаптацию сайта. Вам его потом так или иначе надо будет адаптировать через запросы, и кто то говорит, что в этом плане grid является более лучшим вариантом, но я думаю ,что все относительно и крайне поверхностно. Решает в итоге "оператор", который либо создал отлично структурированный проект, либо "спагетти с тефтелями". Так что если вам нравиться flex - вперед. Нет ничего такого, что бы вы не сделали на flex так, как бы сделали на grid и наоборот.
как раз только начал изучать grid, флексбокс уже немного знал
Правильно делаете, что учите оба свойства 👍 А то порой останавливаются только на Flexbox и все)
Для flexbox вместо margin можно использовать gap, поддерживается начиная с Safari 14.1, в Chrome и Firefox уже давно работает. Для grid поддержка gap ещё лучше.
// в видео про gap тоже говорится, но почему-то в начале используется margin
Лучше float
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 добовляет динамичности где к примеру нужны блоки добавить в право либо в лево,а гридах строки можно так сделать=)),а колонки по трудится
Я бы не рекомендовал использовать gap в флексах. Потому что яблочники каких то там 10-х или 11-х версий не знают, что такое gap в флексе.
бывают макеты где вообще ни грид ни флекс не поможет, только магия)
Можно пример таких макетов?)
Анна, вы лучшая! Спасибо огромное за уроки.
❤️
97% grid и 3% flex - строю сайты на coffee cms
Спасибо за видео. Я только начал учить вëрстку и как раз нужен был ответ на этот вопрос. Хотелось бы посмотреть на практический пример использования грид, для вëрстки лединга.
Я как верстальщик чаще пользуюсь flex, grid редко применяю, но тоже прикольная тема
Спасибо, но не затронули аспект, наличия/отсутствия контента
Ведь если во flex удалить элемент, то все подстооеься, а вот в grid, если удалить элемент, ьл может быть и нк очень, так как сетка.
И адаптация: вот здесь обычно вечный вопрос
Спрашиваете что выбрать flex box или grid?
Я бы выбрал Вас🌹❤️
Просто КРАСАВИЦА
Вечно бы учился бы у Вас, я прилежный и послушный ученик😇
Огромное Вам спасибо, Анна! Как замечательно, что есть ВЫБОР для просмотра подобных фишек. Ведь специалистов много, грамотных специалистов - тоже много. Но у всех разный стиль преподнесения информации: кто-то в контент вплетает разные "шуточки" (они могут быть полезны в плане того, что эти моменты могут образовывать более устойчивые нейронные связки, но для кого-то очень серьезно "режут ухо", нанося различного рода вред ментальному организму), кто-то - "шуточки на грани...". Я сам по природе своего воспитания - достаточно некультурный. И именно ПОЭТОМУ (в целях перевоспитания) предпочитаю более культурный контент (у Анны это очень хорошо получается). Плюс: системная грамотность самой сути контента, плюс - грамотная речь. Огромное Вам, Анна, спасибо за контент! Успехов!
not bad, теория есть, нужно было узнать где что использовать. Теперь осталось только применить на практике) Thx, контент огонь
❤
Купи нормальный микрофон! Извини за крик души, но зачем издеваться над людьми?
Лично для меня флекс всегда был проще в понимании, по этому работаю с ним чаще. но как было сказано в видео, сетка = грид , 1 ось = флекс... на флексе можно построить сетку не хуже чем с гридом, но и добавятся дивы в разметке. Вообще верстать нужно так как тебе удобней.
Спасибо большое Анна ! Как раз давно искал информацию на эту тему , чтобы кратко и по делу !
огромное спасибо за супер наглядное и понятное видео без воды!
Рада, что понравилось 😊🙌
Почему в 1 примере margin, почему не использовать gap, содержащего ссылки для контейнера?
Когда это видео записывалась, у gap была слабая поддержка. Это сейчас можно его использовать везде.
да начнется холивар))) согласен, назначение типов разметки определяет, как и в каком месте сайта будет конкретный тип или их связка
Огромное спасибо. Очень понятно и интересно)
Барби нишо не слышно
Можно использовать для li не margin, а gap? Просто я его использую
Да, это современный метод
Ну как можно не поставить лайк. Еще бы, даже не знаю как сформулировать, стоит от вас ожидать видео сравнения фреймворков? - в русскоязычном сегменте ютуба практически нет таких видео (к слову сказать, в англоязычном есть топ подборки). Переходил от bootstrap на zurb foundation, теперь хочу попробовать что-то более легкое, типа tailwild (у вас хорошее есть видео), bulma, uikit, milligram и прочее. И ваше мнение, если не bootstrap и foundation, то что? Спасибо за канал!
У меня такого видео действительно пока нет, но есть обзор выбора фреймворков с точки зрения популярности вакансий - ua-cam.com/video/o7Rwrx1uSv4/v-deo.html Но это не говорит напрямую о том, что тот или иной фреймворк плох, просто это одна из особенностей, которую стоит учитывать. Про CSS-фреймворки поняла 👍
А этот практикум актуален щас?
Девочка очень умная.
Не показано, что будет с этими примерами, если врубить мобильную версию...
@media подключаете и исправляете под моб.версию, как и на любом сайте
Отлично объяснение, спасибо за видео!
Не могу освоить Flexbox, да и профессиональную верстку в целом. Причина - нет понимания как, и почему именно так, ведут себя элементы в комбинации друг с другом (соседние, вложенные, на разных разрешениях экрана, перестраиваются и т.д.).
Грид освоил легко т.к. можно что угодно привязать к нужной области, ячейкам.
За 4 года освоил пару языков программирования и несколько технологий. И за эти 3 года каждый раз пытался и не мог понять Flexbox... Хотя курсы по нему идут около часа. Странно..
Анна, спасибо большое!! Классное видео!
Рада, что видео оказалось полезным ☺️
а что лучше использовать, когда нужно сделать отступы между дочерними элементами (напр. вправо) , при этом чтобы это было кроссбраузерно, я очень часто делал margin-right и задавал также родителю отрицательное значение этого отступа, либо мудрил с nth-child, получается что gap решает эту проблему? p.s спасибо за ролик :)
хмм, посмотрел самостоятельно на can i use, 88% поддержки у gap
Да, gap решает. Можно добавить ещё @support для кроссбраузерности
Gridы имба, flex не отстаёт из-за своей простоты, надеюсь, что эти 2 технологии станут стандартом.
Очень полезно, спасибо за видео, Анна!) Но со звуком какая-то беда, очень тихо.
Рада, что видео оказалось полезным! 👍 Но уровень звука абсолютно тот же, что и на предыдущем видео)
@@annblok_webdev странно посравнению с другими видио действительно тише
Здравствуйте. Пример 1. Время 5:50. Если бы меню надо было прижать ближе к правой кнопке "Login" как бы это сделали?
5:48 Анна а почему для отступов gap: 10px; не используете?
20 минут литья воды, а вся суть только в последних 10 сек. Нужно было брать определенный пример и на нём показывать пример использования сначала flex, а потом как это же реализовать с помощью grid, и на основании этого делать вывод, что в какой ситуации лучше использовать. Ну это моё субъективное мнение, спасибо за труд, может кому-то было полезно.
Тогда это вообще бы было часовое видео)))) Значит всё-таки нет воды 😉
О
У gap во флексах еще плохая поддержка так что лучше его пока что не использовать.
89% поддержки - плохо? Очень даже отличные показатели.
@@annblok_webdevну, думаю для сайтов на продакшен этого все еще малова-то ))
@@dmitriymovchan6563 если так думаете, то используйте ещё support в CSS
капец, верстка с нулевых упростилась до жути. похоже скоро верстать будут машины
Огромное вам спасибо. Помогли, пол ночи голову ломал, как сделать. Посмотрел ваш ролик и стало ясно что и как сделать
в начале было заявлено что будут показаны случае когда нужно использовать флекс а когда грид, в итоге все примеры под флекс
свойство гэп для флекс имеет поддержку 90%, о чем тоже неплохо бы сказать
Похоже, вы не досмотрели видео. Примеры с Grid в видео есть.
@@annblok_webdev смотрел до конца, два последних примера я с тем же успехом сделаю их на флексах причем автоматом, просто потому что у флекса поддержка чуть лучше а выгоды от гридов на этих примерах я не вижу
классический пример для гридов когда один элемент в сетке занимает больше одной строки, его видимо и надо было показать
@@annblok_webdev если вдруг огорчаетесь от критических комментариев, то обычно мне все ваши видео нравятся)
@@eridiant «выгода» как минимум в том, что управлять колонками легче одной строкой в родительском блоке с Grid, если размеры колонок будут разными, без пропорций 1fr. Пример, где идёт захват в несколько строк, очевиден, поэтому и не был включён в подборку. Для сеток верное решение - Grid. Для однолинейных построений - Flexbox, чаще всего.
Не огорчаюсь. Это не критика. Просто показалось, что вы не досмотрели видео и сделали поспешные выводы.
Да, все проще: использовать то, что упрощает верстку и вывод контента из бэкэнда.
Очень хороший урок, спасибо)
Аня, ты такая красивая, прямо завораживающая ...
Хорошее видео, спасибо за хорошее объяснение!
☺️
спасибо за видео , все доступно, понятно
Спасибо, Анна. Понятно и наглядно
❤️
Вопрос про курс "ПРОФЕССИЯ ВЕРСТАЛЬЩИК". Какова длительность курса, не особо понятно, толи 3 месяца, толи 12 месяцев?
Обучение длится 3 месяца
Какая умная и симпатичная девушка!
однозначно грид нужно сделать 100%
всё на флексах делаю на изиче
Спасибо, очень хорошие примеры
Решают разные проблемы, считаю неуместным их сравнивать
Но тем не менее, новички часто задаются этим вопросом, поэтому и появилось это видео
Не представляю как делать такие элементы не используя грид и флекс
А я наоборот
Не видео, а пушка!
Есть люди, кто проходил курс Типичный верстальщик JavaScript Мастер?
От имени типичного верстальщика курсов не проводится)
@@annblok_webdev ну, от Анна Блок, хотел отзывы от людей услышать)
Умничка какая.
Расскажите нам пожалуйста в следующем видео про Биткоин. Спасибо.
Что, например?
@@annblok_webdev Возможно не правильно выразил свои мысли, но сейчас только ленивый не упоминает о Биткоин и все что с ним связано. Интересует аспект связанный именно с крипто пространством и как с этим коррелирует IT направление. Возможно вам известны какие либо примеры (что то типа blockchain developer) реализации проектов на основе технологии блокчейн. Ведь как минимум, в недалеком будущем (да и сейчас) это направление займет достойное место в IT разработке.
вот для первого могу такое сказать =)) по гридам. Щас покажу код
На самом деле тут всё можно реализовать и с Grid и с Flexbox ))
@@annblok_webdev конечно))) если веб разработчики увидят, как в андройде интерфейс делают 0о0 сразу бросят и пойдут туда.Но там это только начало страдании))
В общем так почитал коменты хвалят грид, задача умники: имеется блок родитель контейнер, внутри например девять кнопок, или просто дивов, ширина каждого из дочерних дивов зависит от контента (текста) и разная само собой, как их построить гридом чтобы они спрыгивали когда не помещаются при этом без маржинов отступы сделать и так чтобы расстояния во всех рядах были одинаковые меж дочерними елементами? Ну явно сеточная, табличная, ячеечная структура не катит
и то что разработчики мои, мало встречаются гриды на сайтах :))) это потому - Либо создатель не знал о гридах, либо не умел на гридах, либо привык к тому что есть и сделал не на гридах и не на флексе, либо привык использовать флексбокс и лень перейти на грид и привык страдать на нём, либо только начинает использовать грид , а кто горазда умнее оказался начал использовать грид по всей красе :))).
Спасибо, очень полезная информация.
по другим к примеру делаешь вёрстку с лево на право, с верху в низ. А на гридах делаешь всё сразу :))) и все блоки готовы.Тоисть каркас под адаптив и на всё разом готово. Тебе остаётся верстать по блокам. Чем лучше особенно грид против всех? тем что используя фреймворки где есть компоненты и преходится бегать по файлам и в каждый заходишь не понятно, что воляется и что это за классы вообще это флекс или обычная вёрстка. на гридах ты разбиваешь на блоки и знаешь кто чей и в ком лежит :)))
Такие примеры - это уровень первого занятия по флексам. Разве сложно показать как решать флексами действительно нестандартную задачу? Никто не просит выкладывать целый курс, но пару примеров и решений можно было бы показать
Флэксбокс
Ну вообще да flex привычнее однозначно , учитывая что некоторые свойства grid еще не стабильно поддерживаются )))
НО! Совмещать никто не мешал )))
Да и конечно некоторые вещи сделать удобнее на гридах)))
Что в вашем понимание "не стабильно"? Уровень поддержи свойств на уровне 94-96% по данным сайта Can I use.
@@annblok_webdev конечно , я не спорю ))) но я сейчас о том , что существуют отдельные компоненты , которые могут косо работать например в IE )))
Наверное не так выразился всё таки
на этот случай можно комбинировать с @support
@@annblok_webdev благодарю, за умную мысль )