Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p><em>Это перевод статьи "<a>Why CSS Grid is better than Bootstrap for creating layouts</a>" от Per Harald Borgen.</em></p>

2 <h2>Содержание</h2>

3 <ul><li><a>Почему CSS Grid лучше Bootstrap для создания макетов</a></li>

4 </ul><h2>Почему CSS Grid лучше Bootstrap для создания макетов</h2>

5 <p>CSS Grid - это новый способ создания макетов в интернете. Впервые полноценная система вёрстки доступна прямо в браузере, что даёт массу преимуществ.</p>

6 <p>Эти преимущества становятся особенно выразительными, если вы сравните CSS Grid с самым популярным фреймворком<a>Bootstrap</a>. Вы можете не только создавать макеты, которые раньше были невозможны без JavaScript, но ваш код станет легче поддерживать и понимать.</p>

7 <p>Давайте посмотрим на три главных причины, почему я думаю, что CSS Grid превосходит Bootstrap.</p>

8 <h3>Разметка станет проще</h3>

9 <p>Замена Bootstrap на CSS Grid сделает HTML более чистым. Хотя это не самое важное преимущество, оно, вероятно, первое, которое вы заметите.</p>

10 <p>Для наглядности я создал фиктивный макет веб-сайта, чтобы можно было сравнить код, необходимый для двух версий. Вот:</p>

11 <p>(Я добавил в пример немного дизайна. Однако это не имеет никакого отношения к сравнению CSS Grid и Bootstrap, поэтому я сохраню эту часть CSS снаружи своих примеров).</p>

12 <h3>Bootstrap</h3>

13 <p>Давайте для начала рассмотрим разметку, необходимую для создания этого сайта в Bootstrap.</p>

14 <p>Тут мне хочется, чтобы вы обратили внимание вот на что:</p>

15 <ol><li>Каждая строчка должна быть с отдельным тэгом <div> .</li>

16 <li>Для обозначения макета должны использоваться имена классов (col-xs-2).</li>

17 <li>Когда этот шаблон усложняется, HTML тоже.</li>

18 </ol><p>Если это адаптивный сайт, тэги выглядят как правило ещё хуже:</p>

19 <h3>CSS Grid</h3>

20 <p>Теперь давайте посмотрим на способ реализации того же в CSS Grid. Вот HTML:</p>

21 <p>Я мог использовать семантические элементы, но решил придерживаться div, чтобы сравнение с Bootstrap выглядело понятнее.</p>

22 <p>Можно заметить сразу, что эта разметка проще. Уродливые имена классов и дополнительные тэги div для каждой строчки - в прошлом. Это просто контейнер для сетки и позиции внутри неё.</p>

23 <p><em>И в отличие от Bootstrap, эта разметка не станет слишком сложной с ростом сложности макета страницы.</em></p>

24 <p>В примере с Bootstrap от вас не требовалось добавлять CSS, в CSS Grid в этом конечно есть необходимость. Если конкретно, вам необходимо добавить это:</p>

25 <p>Для некоторых это может быть аргументом в пользу Bootstrap: вам не нужно беспокоиться о CSS для создания простой сетки - вы просто строите макет в HTML.</p>

26 <p>Но, как вы поймёте из следующего пункта, связь между разметкой и макетом на самом деле - уязвимость, если речь идёт о гибкости.</p>

27 <h3>Намного больше гибкости</h3>

28 <p>Предположим, вы хотите менять макет в зависимости от размера экрана. Например, поднимать меню в верхний ряд, для просмотра с мобильных устройств.</p>

29 <p>Другими словами - изменить макет с такого:</p>

30 <p>на такой:</p>

31 <h4>CSS Grid</h4>

32 <p>Делать это с CSS Grid очень просто. Мы добавляем media-запрос и перемешиваем разные блоки как хотим:</p>

33 <p>Возможность создания макета подобным образом - не заботясь о том, как написан HTML - называется независимостью от порядка в коде (<em>source order independence</em>), и это гигантская победа для разработчиков и дизайнеров.</p>

34 <p><em>CSS Grid позволяет превратить HTML в то, чем он должен был быть. В разметку контента, а не визуальность, которая предназначена для CSS.</em></p>

35 <h4>Bootstrap</h4>

36 <p>Если бы мы захотели сделать то же самое в Bootstrap, нам бы потребовалось менять HTML. Нам нужно было бы поднять тег<strong>menu</strong>в верхний ряд, в добавок к<strong>header</strong>, потому что<strong>menu</strong>во втором ряду в заложниках.</p>

37 <p>Сделать такое с наличием медиа-запроса - не тривиальная задача. Такое можно провернуть только вместе с HTML и CSS, и вам бы пришлось возиться с JavaScript.</p>

38 <p>Этот пример показывает огромное преимущество CSS Grid, которое я испытал на себе.</p>

39 <h3>Больше никаких ограничений 12 колонками</h3>

40 <p>Это не самая крупная проблема, но она множество раз выводила из себя. Поскольку Bootstrap grid разделён на 12 колонок, у вас появятся проблемы, если вы захотите макет из пяти. Или семи. Или девяти. Или из числа, которое не двенадцать.</p>

41 <p>С CSS Grid всё не так. Вы можете сделать свой собственный макет из стольких колонок из скольких хотите. Вот макет из семи колонок.</p>

42 <p>Это делается установкой значения repeat(7, 1fr) для grid-template-columns, вот так:</p>

43 <p>Возможно, есть хак-способов сделать подобное в Bootstrap… И я в курсе, что Bootstrap 4 использует Flexbox, который даёт возможность такой гибкости, но он всё ещё никак не выйдет из бета-версии.</p>

44 <h3>Поддержка браузера</h3>

45 <p>Перед тем, как завершить эту статью, естественно, нужно поговорить о поддержке браузеров. На момент написания этой статьи, 75% глобального веб-трафика поддерживает CSS Grid.</p>

46 <p>Но, перед тем, как вы целиком откажетесь от мысли пользоваться CSS Grid, я советую прислушаться к тому, что говорит<a>Мортен Ранд-Хендриксен</a>об этом. Он утверждает, что CSS Grid - это возможность переосмыслить то, как мы представляем обратную совместимость:</p>

47 <blockquote><p>CSS Grid - это модуль<strong>разметки</strong>, он позволяет нам менять разметку документа без вмешательства в порядок исходного кода. Другими словами CSS Grid - это<strong>абсолютно визуальный</strong>инструмент, и если его правильно использовать, он не будет влиять на внутренние связи содержимого в документе. Из этого следует простой, но удивительный факт: отсутствие поддержки CSS Grid в старом браузере не должно влиять на восприятие посетителя сайта, оно должно<strong>просто менять это восприятие</strong>.</p>

48 </blockquote><p>Другими словами, как только вы отделите содержимое от визуальности, все посетители будут видеть содержимое, но CSS Grid сделает просмотр оптимальнее для тех, у кого есть его поддержка, с помощью более качественной разметки.</p>

49 <h3>Заключение</h3>

50 <p>Я хочу поделиться цитатой<a>Джен Симмонс</a>, разработчика Mozilla. Она описывает то же чувство, которое испытал я к CSS Grid, после того как разобрался в нём:</p>

51 <blockquote><p>Чем больше я использую CSS Grid, тем больше убеждена, что нет никакого преимущества в добавлении слоя абстракции поверх него. CSS Grid - это фреймворк разметки, вшитый прямо в браузер.</p>

52 </blockquote>