Что лучше CSS Grid или Bootstrap? | Практика CSS3 / HTML5

524 ratings | 14578 views


Что лучше CSS Grid или Bootstrap? | Практика CSS3 / HTML5

Исходный код с урока - Предыдущий урок (1 часть) - Что лучше, использовать готовый Фреймворк Bootstrap или использовать CSS Grid? Этим вопросом задаются многие, но что бы на него ответить нужно разобрать каким образом Bootstrap строит модульную web-сетку. В данном видео уроке разберемся что такое модульная сетка в web-дизайне и рассмотрим верстку на bootstrap где сравним ее с CSS Grid. По завершению видео урока, можете проверить себя выполнив домашнее задание. Поддержи канала материально: WMR - R165181087249 WMZ - Z138569415925 PayPal - paypal.me/dwstv Яндекс - 410011610186118 Сбербанк - 4276-3000-2291-1211 Во время урока я использую: Псевдоэлемент nth-child, grid-template-areas, grid-template-columns, grid-template-rows, grid-gap и еще дополнительные стили. Документацию по CSS3, HTML5, Фреймворку Bootstrap, CSS Grid, Flexbox Редактор PhpStorm *Видео метки*: [00:10] - Что такое модульная сетка [02:00] - Рисуем модульную сетку [02:36] - Bootstrap верстка блоков [05:18] - Bootstrap 12 кол. сетка [10:06] - Проблемы при верстке на Bootstrap [14:58] - CSS Grid верстка блоков [19:31] - Разметка сетки на Grid [23:50] - Адаптируем на Grid [28:07] - Задание для практики Обсуждение видео: Скачать архив с урока - Шпаргалка по EMMET - Подписка на канал: Видео сборник: Документация Bootstrap - *Другие видео на канале DWSTV*: JavaScript Основы - Сайт с нуля - Уроки по CSS - 1С Битрикс работа с сайтом - Управление системой Битрикс - Настройки сайта 1С Битрикс - Добавляйтесь к нам в друзья: Сайт видео-уроков: Канал в VK автора уроков: Канал группы в VK: Мы очень рады если видео Что лучше CSS Grid или Bootstrap Вам понравилось, хотите поблагодарить жмите кнопку нравится и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по CSS, так и другим WEB разработкам.

Comments to the video: Что лучше CSS Grid или Bootstrap? | Практика CSS3 / HTML5

Nikita Musatov 3 months ago
CSS Grid круче
Nikita Musatov 3 months ago
Nice video
Василий Некто 3 months ago
Первый геморрой выскочил когда добавили числа COLам - 4-ый блоквыпал ниже первого, этак будто в бутстрап 4 флексовым элементам по умолчанию присваивается вышина родителя. Так будто это была тренинг -пришлось поменять бутстрап css c 4.1.1 на 3.7.0, толко тогда 4-ый блок встал под 2 и 3.
Zurab Pro 4 months ago
Великолепные задание и подача материала! Мне нравится больше Grid однако bootstrap будто Фреймворк тоже нужен, без него никак,а уж сетки то grid
Alexander Kiselov 4 months ago
Автору благодарю за видео. Мне поближе бутстрап, однако нередко он избыточен и если уж кушать модуль, какой поддерживается браузерами, то естественно же лучше использовать его функционал, этак что считаю что стоит мастерить уроки по модулю Grid. Ждём новых видео.
Денис Горелов 4 months ago
Спасибо, а будто по поводу уроков FlexBox, может приступить с него?
Khan S-ov 5 months ago
Оба гавно, лучше медиа требования)
Алексей Люленков 5 months ago
Первый минус хоть какой из библиотек: без подключения они не будут трудиться. Что за бред вообщем? А молоток не будет трудиться, если не брать его в руки.
Vladimir Pitchkurov 5 months ago
браво, виртуоз! сожалею только о том, что ранее не повстречал ваш канал на просторах ютюба. вы делаете самые полезные видео и главное, без воды! аплодирую стоя.
Денис Горелов 5 months ago
Спасибо!
Андрей Светлый 5 months ago
Доброго времени суток Денис! Я новенький в верстке и смотрю Ваши уроки, мне они весьма нравятся. Делал я домашнее задание - внедрял эффекты предшествующего урока Анимация на CSS3 transform и transition в текущую верстку, столкнулся с таковой неувязкой: в конце когда теряется активность ссылки (курсора) при наведении и активна лишь иконка, что бы это поправить и была активна вся район изображение, псевдоэлемент устанавливаем от ссылки (добавляем тэг.imageBox a ). НО!!!!! тогда наш псевдоэлемент ::before для затемнения, при наведении, не стопроцентно покрывает наши рисунки (img). Я отыскал пару решений этой трудности: 1) отключаем display: flex; задаем position: realetive и настраиваем наши рисунки (img) будто нам необходимо, каждую в отдельности. 2) оставляем display: flex; и добавляем в.imageBox a:hover::before bottom: 0 - однако тогда оборотный эффект не весьма прекрасный, а конкретно когда мы убираем мышку из нашей области рисунки (img) то псевдоэфлемент ::before видать будто отрывается от нашего bottom'а, что смотрится попросту страшно. Или же попросту можем задать для.imageBox a:hover::before height: 106% однако снова же необходимо задавать для каждой рисунки в отдельности. На мой взор лучше 1-ый вариант. Как вы решили эту делему? Что сможете порекомендовать?
Андрей Светлый 5 months ago
Денис, я Вам выслал извещение.rar группе ВК, этак вам комфортно будет???
Денис Горелов 5 months ago
Сложно что то произнести не видя самого кода. Покажите исходник с описанием ошибки может быть подскажу будто это поправить.
Serioga Romanchykov 6 months ago
Grid CSS
BIT hack 7 months ago
Крутая штука благодарю я вот что сделал фотоальбом практически)
Денис Горелов 7 months ago
Пять балов, молодчина!!!
BIT hack 7 months ago
На grid имею введу
Mikhail Volosovich 7 months ago
У меня проблема. Зачем ты применяешь тег selection в данной конструкции ?
Денис Горелов 7 months ago
Хотел бы, однако пора будто вечно не хватает (((
Mikhail Volosovich 7 months ago
Прошу прощения ,опечатка вышла, я уже узнал для чего ,куда ,кого. Спасибо за твой труд ,весьма круто ведёшь объяснения ,лишь на твоих примерах сообразил всё, что желал. Кстати ,а по PHP будет что нибудь ?
Денис Горелов 7 months ago
Да вроде тег selection не использовал, может section! Это тег из HTML5 (секционное содержимое), в уроке использовал что бы привлечь ваше внимание, что этот тег с классом dws-wrapper не неотклонимый и служит для обертки итого содержимого.
Mr.Alex Games 7 months ago
Посмотрел ролик от основы до конца и ещё один удостоверился, что CSS Grid лучше.
Денис Горелов 7 months ago
Хоть и лучше, однако стопроцентно на него не перейдешь bootstrap рулит, однако я полагаю это дело времени.
Алексей Гринько 8 months ago
ИМХО, уроки должны демонстрировать высококачественный код, не глядя на то что это попросту образец на скорую руку. 1.Были несколько некорректностей во пора видео. 2.Зачем использовать margin для отступов сетки?? У Вас же задание про CSS grid. grid-gap для этого существует. 3.Несмотря на использования Grid, все равно последняя фотка искажена. Видео увлекательное, однако весьма сумбурно и стремительно идет повествование. Помедленнее бы, и больше внимания к мелочам и аспектам. К огорчению все эти аспекты и некорректности позже перебегают на продакшн-сервера, и все это приходится управлять потом некачественных самоучек.
Александр Тарасов 7 months ago
За высококачественное выплачивать нужно. А не здесь на халяву поглядел и свое корректировки высказываешь. Открою для тебя секрет, даже разработчики бутстрапа и грида ошибаются. А знаешь отчего любой сраный пн версии обновляются? Да поэтому что бля, нихера доделать не могу нормально чтоб оно год работало без ошибок. Так вот может вам следует стать разработчиком и сделать супер код, какой обновлять не нужно? Я не усвою отчего вы до сих пор здесь пишете а не делаете этот супер код, супер вёрстку версии END.
Александр Тарасов 7 months ago
Ну вы наверняка безупречный код пишете вообщем? Ниразу в жизни не ошиблись и с самого рождения какать прогуливались в туалет а не для себя в брюки конечно? Или вы здесь немало расположили сами обучающих видео? Или ваше правильное величество не может выделить пора записать что то полезное?
Алексей Мудрый 8 months ago
Денис, а что это у тебя за аббревиатура такая, которая разворачивает медиазапросы практически под все нужные экраны? md: у меня не срабатывает. Можешь дать наводку плиз?
Денис Горелов 8 months ago
В phpstorm можно основывать снипеты, конечно и в принципе в любом редакторе где стоит emmet. Как это мастерить смотри здесь -
Причиняющий добро 8 months ago
Дикость какая-то ассоциировать фреймворк (поточнее его сетку) и способности браузеров. Очень нередко сетка и работает на flexbox и grid. Например в Gantry и UIkit.
Умид Мавлонов 10 months ago
Сними видео про эффекты паралакса на данный момент весьма не достаточно таких в ютубе
Денис Горелов 10 months ago
Для этих целей сделал пост в обществе . Кидай эту тему поглядим сколько ее поддержат.
span4 10 months ago
Т.к. в бутстрап 4 последнее изображение переходило на новейшую строчку, то я решил поэкспериментировать с сетью бутстрап 4 и вот, что вышло (познания бутстрап малые, этак что, может быть, кушать более стильные решения) <div class= wrapper <div class= container > <div class= row > <div class= img_box col-md-6 > <img src= img/1.jpg > </div> <div class= col-md-6 > <div class= row > <div class= img_box col-md-6 > <img src= img/2.jpg > </div> <div class= img_box col-md-6 > <img src= img/3.jpg > </div> <div class= img_box box_4 col-md-12 > <-- Добавил отдельный класс box_4 --> <img src= img/4.jpg > </div> </div> </div> </div> </div> </div> ---- в HTML больше ничего строчить не необходимо для полной адаптивности, никаких col-lg-, col-xl-, col-sm, offset и прочее <style> .img_box img width: 100%; margin: 20px; .box_4 img height: 45%; margin-top: 10px; /* чтоб восполнить отступ сверху */ @media screen and (max-width: 1200px) .box_4 img height: 44%; /* на Large экранах 1920-1080. Ну и тут мы играемся в @media в зависимости от разрешения экрана */ @media screen and (max-width: 992px) .box_4 img height: 42%; @media screen and (max-width: 768px) .wrapper width: 50%; /* и никаких offset в HTML код прибавлять не необходимо*/ margin: 0 auto; .img_box img margin: 10px auto; .box_4 img height: 100%; </style> Получаем адаптивность, больше читаемого CSS кода и не достаточно HTML кода Или я чего-то не сообразил ?
span4 10 months ago
DWS TV - Уроки по WEB разработкам здесь сущность в том, что в B4 больше способностей, гибче сетка, меньше классов, ежели в B3
span4 10 months ago
DWS TV - Уроки по WEB разработкам может быть пропустил, я скопипастил, однако позже редактировал. В бутстрап 4 кушать возможность поменять блоки местами, однако я этот вариант не пробовал
Денис Горелов 10 months ago
верхний блок не закрыт (<div class= wrapper)
Денис Горелов 10 months ago
Что мастерить если необходимо поменять блоки местами на мобильной версии, и таковой момент, у меня не отобразился 2-ух колоночный вариант.
span4 10 months ago
Может с непривычки, однако Grid в описании труднее, чем сетка Bootstrap 4
Денис Горелов 10 months ago
Bootstrap-4 в альфе, я бы покамест не рекомендовал ее использовать на боевых проектах.
span4 10 months ago
Но вы же ассоциировали с Бут 3, что приметно в вашем видео, а не с 4 версией.
Денис Горелов 10 months ago
По началу конечно, однако и способностей у него еще больше.
Basil Irzhak 10 months ago
что-то у меня не выходит сделать с помощью сетки такую структуру - картина в центре экрана и див с текстом либо справа либо слева.
Денис Горелов 10 months ago
Вероятней итого где то ошиблись, сравните код с демкой на страничке веб-сайта.
Геннадий Рев 10 months ago
Здравствуйте Денис, хорошее видео! Уже подписался!!! Действительно, скопить таковой макет по старенькой верстке - достаточно трудно, а если учесть IE - вообщем. Новые технологии flexbox & grid loyout - мне весьма приглянулись. При повторе урока, появились пару вопросов: 1) timeline 18:45 - вышина img 450px. Почему Вы пишете (timeline - 21:50, 15 линия CSS) grid-template-rows: 225px 255px; Вопрос: Почему 255px ??? Разве не 450 / 2 ? Я поставил 2 ряда по 225px и они сходу стали будто нужно. Это механическая промах? либо растолкуйте отчего 2-й линия 255px. 2) На первом же потомке, вы перебегайте с гридов на флекс. Почему ? А чисто на гридах можно? 3) timeline 27:26. Если пристально поглядеть на 4-й блок, то можно увидеть, что браузер не сжал фото, а избрал середину, т.е. срезал чуток сверху и чуток снизу. А если поменять 4-й со 2-м блоком, голову девицы срежет благопристойно. Вопрос: Как сохранить девице голову? либо будто показать верхнюю доля фото ? Денис - это не приколы и для меня весьма суровые вопросы. Я весьма издавна занимаюсь версткой, потому замечаю такие мелочи. И они весьма важны, по последней мере для меня.
Геннадий Рев 10 months ago
Ну что ж, ответ исчерпающий Спасибо Вам огромное! Удачи Вам и миллион лайков
Денис Горелов 10 months ago
По поводу повторений секций, здесь верно необходимо осознавать что вы желаете, сделать свою сетку либо распределить в определенном порядке блоки на страничке. На производительность загрузки CSS Grid не оказывает влияние, однако то, в каком количестве размещено блоков, и какой в их находится контент, это все будет оказывать влияние на конечную скорость загрузки странички. Нельзя наобум использовать flexbox, css grid, разработчики советуют дополнять ими свою верстку, а не полностью перебегать на данную технологию. Со временем наработаем практику, и усвоим где лучше их использовать.
Геннадий Рев 10 months ago
Доброе утро Денис! Да, конечно конкретно а обычных вариантов, без развертывания самого блока. Суть в том, чтобы осознать будто сделать каркас веб-сайта. На сколько я сообразил, на гридах, сходу необходимо обрисовать все ряды и колонки (2 системы координат X Y), сколько бы их не было. Это безупречный вариант, однако можно просто запутаться. А если, брать секцию (будто на видео) и размножить их - section1 , section2 ,section3 и этак дальше. НО, тогда многие коды будут повторяться. Вот и проблема назрел: а будто это отобразиться на производительности? на скорости загрузки странички? и т.д. Ведь скорость загрузки - весьма принципиальный фактор.
Денис Горелов 10 months ago
Почему невозможно, можно подогнать, попросту не любой желает заморачиваться, по различным причинам, к примеру если на веб-сайте уже присутствую изображения, не могут трудиться с графикой и т.д. Я показал лишь одинешенек из вариантов, какой употребляется в том случае если желаем в предстоящем поменять блоки местами без редактирования html. Там немало способностей и без различия какой веб-сайт Landing Page либо веб-лавка. Как нибудь покажу на обычных вариантах будто это делается, однако это чуток позднее ).
Геннадий Рев 10 months ago
Спасибо за резвый ответ, Денис! 1) А отчего невозможно подогнать фото под одинешенек размер ??? 2) Надо испытать 3) По фото вроде бы отыскал решение Добавляем в.imageBox align-self:start; а в.grid-container overflow:hidden; - чтобы не выходило за грань В принципе все - сейчас видать верхняя доля фото если воткнуть align-self:end; - то нижняя соответственно Денис, у меня к Вам большая мольба Вы проявили лишь на одной секции, а положим у нас Landing Page Как сделать каркас на гридах, если там 15 - 20 секций в среднем. Неужели в.grid-container необходимо обрисовать все секции ??? Да там же неурядица будет, определенная. А будто же с независимостью блоков ? Они не должны зависить товарищ от друга и их размещение. Может маленькое видео ? Думаю многих заинтригует, и этак инфо по гридах весьма не достаточно.
Andrew Vlasoff 10 months ago
Объясните изволь. Почему 1 картина, если присмотреться, при наведении на неё, немного возрастает в высоту? Снизу это приметно.
Andrew Vlasoff 10 months ago
Спасибо. Понял.
Денис Горелов 10 months ago
Ага, сообразил о чем выговор, это предшествующий задание. Картинка малость вылезает по высоте из за того что основному блоку.imgBox я не задал высоту. Установите фиксированную высоту для контейнера imgBox либо можно для ссылки равное высоте рисунки в 450px. и она вылезать не будет.
Andrew Vlasoff 10 months ago
Браузер Хром. У Вас на 28.35 1-ая картина. При наведении. Высота малость возрастает книзу. У меня в любом разрешении видать.
Денис Горелов 10 months ago
Я не вижу на демке что бы картина увеличивалась по наведению. Распишите подробнее каки браузером пользуетесь, какая картина, возрастает лишь при наведении либо при еще каких то обстоятельствах.
Иван Иванов 10 months ago
Неплохое видео
Илья Лысков 10 months ago
Как поменять краска выделения мышкой на веб-сайте?
Денис Горелов 10 months ago
::selection background: red;
ПростоЧел 10 months ago
👍
DJ Yetm 10 months ago
Css grid рулит!!!
Денис Горелов 10 months ago
Согласен, думаю это будущее web.
PropovedNik 10 months ago
а если сопоставить css grid с smart grid?
Денис Горелов 10 months ago
В css Grid кушать сокращения, для того что бы не прописывать каждую ячея, можно показать ее начин и крышка чрез (/).
PropovedNik 10 months ago
и уместно, если немало колонок, а внижней строке тот же футер во всю длину колонок, то 8 один прописывать футер либо будто-то можно показать ему всю длину?
Денис Горелов 10 months ago
Работать не приходилось ((
Виталий Ермохин 10 months ago
.в бутстрапе отступы задаются в процентах и не вечно ты достигаешь приобретенный итог и груда других ломаных фраз и на российском, и на британском. благодарю за кровь из ушей, блять
Елена Бол 10 months ago
Максим Ермохин конечно, уши необходимо сберегать, смотрите и мучаетесь.мучаетесь и смотрите далее.подскажу от кровотечения в ушах кушать кнопка отписаться и кнопка затворить.
Rasuru 10 months ago
Эту галерею намного легче было бы сверстать flexbox, конкретно у flexbox потенциал трудиться с такового вида галереями (На W3Schools кушать неплохой курс). В примере с бутстрап можно было заместо оффсета поставить justify content. В гридах - совсем необязательно каждому area прописывать. Grid-area по сущности это 4 характеристики: grid-column + grid-row. Если частей 10-ки ( будто написано в одном из комментов к видео) не придется прописывать grid-area каждому элементу. area следует использовать когда необходимо дать смысла коду и было понятнее что за элемент и где находится. Советую всем выучить CSS Grid, за ним будущее :)
Alex Elkin 6 months ago
кушать ведь в флексбоксах свойство order которое меняет распорядок выведения блоков в браузере не затрагивая их распорядок в документе. НО, мне неясно будто такую сетку сейчас воплотить на Bootstrap 4 т.к. он на флексах а не на флоатах и блок 4 не ныряет под ужимающиеся блоки 2 и 3, боле того флекс растягивает их по ширине и они не ужимаются.
Денис Горелов 10 months ago
Да, в Bootstrap 4 немало пофиксили из 3 версии, ввели flexbox, однако будто не крути с CSS Grid не сравнится хотя бы по тому что Bootstrap работает в одном измерении, а вот отрешиться от него не получится, этак будто львиная толика веб-сайтов изготовлена и делается на нем. В любом случае его необходимо знать и уметь с ним трудиться.
Rasuru 10 months ago
Ну а этак, различия дудки. Bootstrap 4 order это ведь flexbox (будто). Можно и на css сделать думаю
Rasuru 10 months ago
Каждому свое :) Мне почаще легче поменять местами блоки в HTML, поэтому что охото порядка ( если выходит). И лично мне классы бутстрапа малость мешают использовать методологию BEM
Vladislav Magdenko 10 months ago
bootstrap 4 - > order?
app pc 10 months ago
Больше видео про css grid!)
Денис Горелов 10 months ago
Возьму на заметку ).
Александр М 10 months ago
А нехрен офсетами шалить там где не нужно. Можно сделать col-xs-12, а внутренние блоки выровнять по центру и поставить им width:70% в медиазапросе. Как по мне, прописывать классы бутстрап резвее, чем разворачивать портянку css для гридов))). Ведь если блоков не 4, а скажем десяток? Это что им каждому имена прописывать? конечно это ж рехнешся)))
Владислав Дидковский 10 months ago
Препроцессор в поддержка.
Денис Горелов 10 months ago
НУ 10 имен прописать это куда проще прописывать каждому блоку собственный класс )). В Grid показал образец, если желаем поменять блоки местами не трогая структуру html, а в принципе адаптивка реализуется куда проще.
Anonimus2017 10 months ago
Бутстрап сетка на свалке))
Timo A. Weiss 10 months ago
что за приколы с ? отчего ссылку на собственный перед. выпуск не дать в формате ютуб? подача материала отменная, однако лайк заберу назад
Денис Горелов 10 months ago
Не корректно скопировал ссылку, поменял. Ссылка ведет на веб-сайт, на нем все исходники, на YouTube можно все видео поглядеть в плейлисте по CSS.
Денис Горелов 10 months ago
В комментах пишите что вам поближе Bootstrap либо CSS Grid, стоит ли в предстоящем уроки мастерить по модулю Grid?
Василий Тёркин 5 months ago
Спасибо огромное. Очень познавательно. Ближе CSS Grid))). Да, стоит.
LLIO?!_OI79ITЬ?! 5 months ago
Сетка Дмитрия Лаврика это тема бутстрап осадок округленную кнопку и слайдер я и сам сделаю))
Duba Duba 6 months ago
Хороший задание, потом него решил освоить Grid.
Ййяяхооуу! 10 months ago
Круто, однако ещё не кроссбраузерно какое-то пора. По этому заказчика можно предупредить, что ликовать будут не все юзеры веба) Grid и flex - это круто!
DJ Yetm 10 months ago
Думаю точно необходимо продолжать, css grid это будущее.
L/\SOKA 10 months ago
Bootstrap лучше)
Andy Gore 10 months ago
10 вложенностей.
L/\SOKA 10 months ago
DWS TV - Уроки по WEB разработкам согласен)
Денис Горелов 10 months ago
Каждому свое )
Robo Past 10 months ago
Спасибо создателю, хорошая подача материала.
Денис Горелов 10 months ago
Стараюсь для вас )), благодарю.