CSS-Grid VS Flexbox


Оглавление (нажмите, чтобы открыть):

Сравнение CSS grid и Flexbox

Сравнение CSS grid и Flexbox

Здравствуйте! В этой статье я решил провести сравнение двух популярных технологий для верстки сайтов CSS Grid и Flexbox. Ещё не так давно макет для всех страниц HTML верстался с помощью таблиц, float и других свойств CSS, которые не очень хорошо подходят для стилизации сложных веб-страниц.

Затем появился Flexbox — режим вёрстки, который был специально разработан для создания надёжных адаптивных страниц. Flexbox упростил правильное выравнивание элементов и их содержимого и теперь является предпочтительной системой CSS для большинства веб-разработчиков.

Но теперь у нас есть новый претендент на титул за звание «лучшей системы для вёрстки макетов HTML» (название титула ещё в процессе разработки»). Это CSS Grid и в ближайшее время эта система будет доступна в браузерах Firefox 52 и Chrome 57, а вскоре, как я надеюсь, и в других браузерах.

Базовый макет

Чтобы понять, каково это — создавать макеты на каждой системе, мы сделаем одну и ту же HTML-страницу дважды — один раз с помощью Flexbox, а затем на CSS Grid. Вы можете скачать оба проекта отсюда.

Уменьшенный макет веб-страницы

Дизайн довольно простой — он состоит из выровненного по центру контейнера, внутри которого у нас есть шапка, основной раздел, боковая панель и подвал. Вот главные «испытания», которые мы должны провести, сохраняя CSS и HTML по возможности чистыми:

  1. Разместить четыре основных раздела макета.
  2. Сделать страницу адаптивной (боковая панель опускается ниже основного содержимого на маленьких экранах).
  3. Выровнять содержимое шапки — навигация слева, кнопка справа.

Как вы можете видеть, ради сравнения мы оставили всё максимально простым. Начнём с первого испытания.

Испытание 1. Размещение разделов страницы

Решение на Flexbox

Добавляем display: flex к контейнеру и задаём направление дочерних элементов по вертикали. Это позиционирует все разделы друг под другом.

Теперь нам нужно сделать так, чтобы основной раздел и боковая панель располагались рядом. Поскольку flex-контейнеры обычно однонаправлены, нам нужно добавить дополнительный элемент.

Затем мы устанавливаем этому элементу display: flex и flex-direction с противоположным направлением.

Последний шаг — задать размеры основного раздела и боковой панели. Мы хотим, чтобы основное содержимое было в три раза шире боковой панели, что несложно сделать с помощью flex или процентов.

Как вы можете видеть, Flexbox сделал всё хорошо, но нам кроме этого понадобилось довольно много свойств CSS плюс дополнительный элемент HTML. Давайте посмотрим, как будет работать CSS Grid.

Решение на CSS Grid

Существует несколько вариантов использования CSS Grid, но мы воспользуемся синтаксисом grid-template-areas, как наиболее подходящего для наших целей.

Сперва мы определим четыре grid-area, по одному на каждый раздел страницы:

Теперь мы можем настроить нашу сетку и определить расположение каждой области. Вначале код может показаться довольно сложным, но как только вы познакомитесь с системой сетки, он становится проще для понимания.

Вот и всё! Наш макет теперь будет соответствовать указанной выше структуре и мы его настроили так, что нам не придётся иметь дело с margin или padding.

Испытание 2. Делаем страницу адаптивной

Решение на Flexbox

Выполнение этого шага строго связано с предыдущим. Для решения на Flexbox нам придётся изменить flex-direction и отрегулировать margin.

Наша страница довольно простая, поэтому в медиа-запросе мало работы, но в более сложном макете придётся много чего переделывать.

Решение на CSS Grid

Поскольку мы уже определили grid-areas, нам просто нужно переопределить их порядок в медиа-запросе. Мы можем использовать ту же настройку колонок.

Или можем переопределить весь макет с нуля, если считаем, что это решение чище.


Испытание 3. Выравнивание компонентов шапки

Наша шапка включает некоторые ссылки навигации и кнопку. Мы хотим, чтобы навигация была слева, а кнопка справа. Ссылки внутри навигации должны быть выровнены относительно друг друга.

Решение на Flexbox

Техника довольно простая:

Теперь список навигации и кнопка выровнены правильно. Осталось только разместить пункты внутри по горизонтали. Проще это сделать с помощью display: inline-block, но поскольку мы собираемся целиком использовать Flexbox, применим решение только для него:

Только две строки! Совсем неплохо. Давайте посмотрим, как с этим справится CSS Grid.

Решение на CSS Grid

Чтобы разделить навигацию и кнопку, мы должны добавить display: grid к header и настроить двухколоночную сетку. Нам также понадобятся две дополнительные строки в CSS, чтобы позиционировать всё на соответствующих границах.

Что касается ссылок в одну строку внутри навигации, у нас не получилось сделать это корректно с CSS Grid. Вот как выглядит наша лучшая попытка:

Ссылки строчные, но они не могут быть выровнены правильно, поскольку не существует варианта baseline, как у align-items. Мы также должны определить ещё одну вложенную сетку.

Понятно, что CSS Grid не справилась с этой частью макета, но это и не удивительно — основное внимание уделяется выравниванию контейнеров, а не содержимому внутри них. Эта система не для нанесения последних штрихов.

Выводы

Если вы прочитали статью целиком (а это отличная работа!), выводы не должны вас удивить. На деле нет лучшей системы — и Flexbox и CSS Grid хороши по своему и должны использоваться совместно, а не как альтернатива друг другу.

Для тех из вас, кто перепрыгнул непосредственно к выводам этой статьи (не волнуйтесь, мы тоже так делаем), вот краткий итог сравнения:

  • CSS Grid отлично подходит для создания большой картины. Эта система облегчает управление макетом страницы и даже может иметь дело с нестандартным и асимметричным дизайном.
  • Flexbox отлично подходит для выравнивания содержимого внутри элементов. Используйте эту систему для размещения мелких деталей дизайна.
  • Используйте CSS Grid для двумерных макетов (строк И колонок).
  • Flexbox лучше работает только в одном измерении (со строками ИЛИ с колонками).
  • Нет причин применять только CSS Grid или только Flexbox. Изучайте их и используйте совместно.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Flexbox vs. CSS Grid: Which Should You Use and When?

Flexbox and CSS Grid are two CSS layout modules that have become mainstream in recent years. Both allow us to create complex layouts that were previously only possible by applying CSS hacks and/or JavaScript. Flexbox and CSS Grid share multiple similarities and many layouts can be solved with both. When to use which is another question however.

Industry Recap

The CSS Grid vs. flexbox debate is currently the hottest topic in the CSS community. If you follow industry news you will have seen many great articles appear lately, such as:

  • Rachel Andrew blogged on the question already back in 2020 and later continued discussing it in more detail.
  • Last month, Chris Coyier started a viral Twitter thread that ended up in a longer article with some cool code examples on CSS-Tricks.
  • Michelle Barker also responded to Chris’ Twitter thread by authoring another excellent Grid vs flexbox article in her popular CSS blog.
  • The MDN Community has created some thorough docs on the basic differences between Grid and flexbox, which is currently the best available documentation on the subject.

You can also find many other related blog posts, articles, videos, and discussions all over the web. As the topic is likely to stay relevant in the future, I’d recommend reading some of the articles above and developing your own stance on the question, as nothing is set in stone yet.

Here’s another take.

One vs. Two Dimensions

The most important thing to know is that flexbox is one-dimensional, while CSS Grid is two-dimensional. Flexbox lays out items along either the horizontal or the vertical axis, so you have to decide whether you want a row-based or a column-based layout.

The flexbox cross axis is always perpendicular to the main axis.

A flex layout can also wrap in multiple rows or columns and flexbox treats each row or column as a separate entity, based on its content and the available space.

On the other hand, CSS Grid lets you work along two axes: horizontally and vertically. Grid allows you to create two-dimensional layouts where you can precisely place grid items into cells defined by rows and columns.

This is how W3C wants us to use flexbox and Grid, however practice frequently overrides theory and not everyone is fan of the one-dimensional vs. two-dimensional narrative. For instance, Chris Coyier made the following statement in his aforementioned article:


“I’m not the world’s biggest fan of the «1D» vs. «2D» differentiation of grid vs. flexbox, only because I find most of my day-to-day usage of grid is «1D» and it’s great for that. I wouldn’t want someone to think they have to use flexbox and not grid because grid is only when you need 2D. It is a strong distinction though that 2D layout is possible with grid though in ways it is not in flexbox.”

And, this is how CSS works in real life. In fact, we can create two-dimensional layouts with flexbox (due to its wrapping ability) and one-dimensional layouts with CSS Grid (due to its auto-placement ability), too.

Although flexbox is originally not for building grids, it’s frequently used that way. The best example is Bootstrap 4’s grid system which is based on flexbox. All Bootstrap 4 sites out there makes use of flexbox to accomplish two-dimensional layouts, consisting of rows and columns. And, there are other popular tools such as Flexbox Grid that do the same.

Use Cases

The most common misconception about the two layout modules is that Grid is for full-page layouts and flexbox is for smaller components. This is not the case at all. All the authors mentioned above warn against this approach, as it can seriously limit possibilities. You need to assess each layout individually on a case by case basis to pick the better option.

Focus on Content Placement: CSS Grid

CSS Grid focuses on precise content placement. Each item is a grid cell, lined up along both a horizontal and a vertical axis. If you want to accurately control the position of items within a layout, CSS Grid is the way to go. The W3 docs of the Grid module assert:

“It provides a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors. Authors can then precisely position and size the building block elements of their application into the grid areas defined by the intersections of these columns and rows.”

With flexbox, it’s hard to predict behavior at certain viewports and you can get surprising results. Of course, you can set the w >calc() function but then you lose flexbox’s main appeal: flexibility.

This is not the case with CSS Gr >grid-template-rows and grid-template-columns and utilities like the fraction unit that let you precisely calculate everything. Hence, Grid is especially suitable for creating unusual layouts like broken, asymmetrical, and overlapping layouts.

CSS Grid also makes it possible to create responsive layouts without using media queries. The idea comes from Heydon Pickering who recently published a YouTube video about algorithmic layouts. He introduces a simple Grid technique that makes grid cells wrap and adapt to any viewport sizes:

Although the layout wraps based on the available space, it’s still not content-aware like flexbox, as the content inside the items doesn’t flexibly stretch out:

Focus on Content Flow: Flexbox

Flexbox focuses on content flow rather than content placement. Widths (or heights) of flex items are determined by the content of the item. Flex items grow and shrink according to their inner content and the available space. This is how W3C’s flexbox docs explain the goals of the layout module:

“. (flexbox) gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need.”

In short, flexbox enables you to allocate space and align items flexibly. Let’s see how Heydon’s grid would look like with flexbox. The following code adds a margin of 0.5rem to each flex item (as flexbox doesn’t have a gap property, we need to use the negative margin hack).

As you can see below, the first flex item with the long content stretches out as far as needed:

Of course, you can make fix-w >width or flex-basis properties. However, if you do so you lose flexbox’s content-awareness which is the main reason for its existence. You can also see above that flexbox treats each row independently. Different rows align flex items differently, based on the amount of text inside of them. There are no columns here and this is not a grid but a one-dimensional layout.

Flexbox also allows you to dec >flex-grow and flex-shrink properties, you can achieve a completely fluid layout that optimizes the allocation of flex items at every viewport size.

There are other typical use cases of flexbox as well, such as centering items, adjusting the last item(s) of lists, sticking the footer to the bottom of the page, and creating responsive menus. You can find even more flexbox usage examples in the MDN docs.

Browser Support

Flexbox has fairly good browser support, while CSS Grid is not supported by IE11- and Edge 15-.

CSS Flexible Box Layout Module (as of time of writing) CSS Grid Layout (as of time of writing)

Articles frequently recommend using flexbox as a fallback for CSS Grid, however many developers consider it too much hassle and would rather create their layouts exclusively with flexbox.

But flexbox isn’t perfect, either. It has a couple of issues being collected in the Flexbugs repo on GitHub (with cross-browser workarounds for the bugs). If you bump into an issue while working with flexbox it’s worth having a look at this list, as you might find the solution to your problem.

Prepare for Battle!

The flexbox vs. CSS Grid question doesn’t have a clear-cut answer and depends on many different factors. Don’t stick to one or the other, but always think through which serves your goals better. You can also combine flexbox and CSS Grid to solve complex layouts like this cool card UI:

Solving Problems With CSS Grid and Flexbox: The Card UI

To better understand your options, check out our flexbox and CSS Grid tutorials, too. We have articles about flexbox alignment, ordering, and sizing, plus a series about the CSS Grid Layout Module.

Css gr >


Смотрите по задаче и предполагаемой аудитории. Если аудитория — чисто гики с новыми браузерами, то смело делайте на гридах с фолбэком на одноколоночный мобильный вариант (как советуют здесь). Если для широкой аудитории с пренебрежимой долей IE9- — делайте на флексбоксах. Если для госконторы, Китая или еще какой-то специфической аудитории с большой долей старых IE — лучше перестраховаться и сделать на флоатах. Но это именно исключение, для типичных случаев флексбоксы сегодня — золотая середина.

P.S. Всё вышесказанное — именно про раскладку блоков страницы. По прямому назначению (обтекание элементов текстом внутри блоков) флоаты по-прежнему актуальны (особенно в сочетании с новыми возможностями типа shape-outside).

можно уже переходить на flexbox

CSS Gr >

Not too long ago, the layout for all HTML pages was done via tables, floats, and other CSS properties that were not well suited for styling complex web pages.

Then came flexbox — a layout mode that was specifically designed for creating robust responsive pages. Flexbox made it easy to properly align elements and their content, and is now the preferred CSS system of most web developers.

Now we have a new contender for the best-system-to-build-html-layouts trophy (trophy title is a work in progress). It is the mighty CSS Grid, and by the end of this month, it will be available natively in Firefox 52 and Chrome 57, with other browsers (hopefully) following soon.

A Basic Layout Test

To get a sense of what it’s like to build layouts with each system, we’ve build the same HTML page twice — once with flexbox, and another time with the CSS grid. You can download both projects from the Download button near the top of the article, or inspect them in this online demo:

A Stripped-down Static Page Layout

The design is pretty basic — it consists of a centered container, inside of which we have a header, main section, sidebar, and a footer. Here are the main «challenges» that we’ll have to solve, while keeping CSS and HTML as clean as possible:

  1. Position the four major sections of the layout.
  2. Make the page responsive (the sidebar goes below the main content on smaller screens).
  3. Align the contents of the header — navigation to the left, button to the right.

As you can see, for the sake of the comparison we’ve kept everything very simple. Let’s start with problem number one.

Challenge 1: Position The Page Sections

Flexbox Solution

We’ll start off with the flexbox solution. We add display: flex to the container and direction its children vertically. This will position all the sections one under another.

Now we need to make the main section and the sidebar stand next to each other. Since flex containers are generally one-directional, we will need to add a wrapper element.

We then make the wrapper display:flex and flex-direction it in the opposite direction.

The last step is to set the size of the main section and the sidebar. We want the main content to be three times the size of the sidebar, which isn’t hard to do with flex or percentages.

As you can see flexbox did pretty well, but we still needed quite a lot of CSS properties + an additional HTML element. Let’s see how the CSS grid will do.

CSS Grid Solution

There are a couple of different ways to use the CSS grid, but we will go with the grid-template-areas syntax, as it seems most suitable for what we are trying to accomplish.

First we will define four grid-area -s, one for each page section:

Then we can set up our grid and assign the placement of each area. The code below may seem quite complicated at first, but once you get to know the grid system it becomes really easy to grasp.

And that’s it! Our layout will now follow the above structure, and because of the way we’ve set it up we don’t even have to deal with any margins or paddings.

Challenge 2: Make Page Responsive

Flexbox Solution

The execution of this step is strongly connected to the previous one. For the flexbox solution we will have to change the flex-direction of the wrapper, and adjust some margins.

Our page is really simple so there isn’t much to rework in the media query, but in a more complex layout there will be lots and lots of stuff to redefine.

CSS Grid Solution


Since we already have the grid-areas defined, we just need to reorder them in a media-query. We can use the same column setup.

Or, we can redefine the entire layout from scratch if we think that’s a cleaner solution.

Challenge 3: Align Header Components

Flexbox Solution

Our header includes some links for navigation and a button. We want the nav to be on the left and the button on the right. The links inside the nav have to be aligned properly next to each other.

We’ve already done a similar layout with flexbox in one of our older articles — The Easiest Way To Make Responsive Headers. The technique is really simple:

Now the navigation list and the button are properly aligned. All that is left is to make the items inside the go horizontally. It’s easiest to use display: inline-block here, but since we are going full flexbox, let’s apply a flexbox-only solution:

Only two lines! Not bad at all. Let’s see how CSS grid handles it.

CSS Grid Solution

To split the nav and the button we will have to make the header display: grid and set up a 2-column grid. We will also need two extra lines of CSS to position them at the respective borders.

As for the inline links inside the navigation — we couldn’t get it quite right with CSS grid. Here is how our best try looks:

The links are inline but they can’t be properly aligned, since there isn’t a baseline option like in flexbox’s align-items . We also had to define yet another subgrid.

It’s clear that the CSS grid struggled with this part of the layout, but that isn’t too surprising — it’s focus is on aligning containers, not so much the content inside them. It just isn’t meant for doing finishing touches.

Conclusion

If you’ve made it through the whole article (in which case great job!), the conclusion shouldn’t come as a surprise to you. The truth is, there isn’t a better system — both flexbox and the CSS grid are good at different things and should be used together, not as alternatives to one another.

For those of you who skip directly to the conclusion of articles (no worries, we do it too), here is a summary of the comparison:

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

CSS Grid vs Flexbox

52.2% of all website traffic worldwide was generated through mobile phones in 2020. Given the variety of screen sizes of smartphones, this has made responsive web design more important than ever before. Web pages have to render well regardless of the medium you use.

However, creating complicated multi-column layouts consistently across different devices (and browsers) is not a simple task. A few years ago, web designers were confined to using tables, floats, positioning, and in-line blocks that were missing lots of functionality. It was a frustrating experience.

This lack of functionality drove the development of proper responsive layout models that made it easier to create, understand, and maintain web layouts. CSS Grid and Flexbox are two of the most popular layout models.

But how do you know which one to use? How do both models differ between themselves? That’s what we’ll answer in this article.

1D vs 2D

The most fundamental difference between Grid and Flexbox is how they handle positioning. Grid is perfect for the two-dimensional layout of items on a web page or app, as it can manage both columns and rows at the same time. This is useful, for example, when you’re designing a web page where you want a sidebar next to a few rows of content.

Flexbox, however, is one-dimensional. It handles either a column or a row. A flexbox container expands its items to fill the available free space or it shrinks to prevent overflow.

Content-Based vs Container-Based

A Flexbox layout is calculated after its content is loaded. It’s content-based. The size of a cell (a flex-item) is defined inside the flex-item itself. Here’s an example to explain what that means. This is a row of elements styled with Flexbox:

See the Pen Flexbox Layout by Thomas De Moor (@tdmoor) on CodePen.

The parent div is the flex-container, but we don’t set the size of the items there. That’s done in the flex-items, where it’s been defined by setting flex: 1 1 auto . The flex property is shorthand for flex-grow , flex-shrink , and flex-basis .


CSS Grid, however, requires you to define your layout first. It’s container-based. The layout is calculated regardless of the content you put inside the containers. Let’s look at our example again, except that we’ll now style it with Grid.

See the Pen Grid Layout by Thomas De Moor (@tdmoor) on CodePen.

As you can see, the output is exactly the same as in the Flexbox example (apart from the color). Here, however, the size of the items is not defined inside the grid-items, but in the grid-container, parent div, through grid-template-columns .

Because of this, CSS Grid is better to make whole page layouts and Flexbox is better when you’re aware of the content you’ll use.

A Different Way of Wrapping Items

Although both models have ways to wrap items that are greater than the width of the container, each model handles wrapping very differently.

The most important thing to remember is that items in Flexbox lose the context of the previous row or column when they’re pushed into a new row or column. That’s because Flexbox is one-dimensional.

In CSS Grid, however, items don’t lose their context when they’re pushed down, because they’re still part of the grid you’ve defined before. Items will fall along the grid lines.

Either ways of wrapping can be useful. Flexbox usually works better with forms, for example, like a subscribe form with three buttons (email, name, send), because you want each button to take up as much space as possible as the screen shrinks or expands.

designed with Flexbox (source)

CSS Grid is better when you want your pushed items to maintain the same width, as you might want to when creating an image gallery, for example.

Which One to Choose?

If you need a web layout that only consists of rows or columns, then Flexbox is the best model to use. However, if you have a complex, multi-row and multi-column layout, then you’ll want to use CSS Grid.

Additionally, don’t think you have to choose either CSS Grid or Flexbox. You might want to design your overall web layout with CSS Grid, but use Flexbox for certain parts of your website. Both solve layout problems in different ways and there’s no reason both models can’t work in complementary ways to create the website you want.

Thomas De Moor

X-Team Weekly

Our curated newsletter across programming, productivity, and inspiration.
Keep up to date with the X-Team culture.

Заменяет ли CSS Gr > Дата публикации: 2020-04-18

От автора: нет. Ну, в основном нет. Grid новее Flexbox и хуже поддерживается в браузерах. Именно поэтому нужно ответить на вопрос, заменит ли CSS Grid Flexbox.

Расставим все точки над i:

Grid умеет то, что не умеет Flexbox;

Flexbox умеет то, что не умеет Grid;

они могут работать в паре: ячейка grid может быть flexbox-контейнером. Flex-ячейка может быть grid-контейнером.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Если вы еще не слышали, то март 2020 был успешным для Grid. Состоялся релиз, инструментом можно пользоваться и абсолютно без вендорных префиксов в Chrome, Opera, Firefox и Safari. Даже Edge поддерживает сетки, хотя и в более ранней версии спецификации, в которой можно получить некую поддержку с помощью Autoprefixer.

Итак. Grid заменяет Flexbox? Сразу сложно ответить на этот вопрос. Особенно если вы только начинаете изучать странный, чуждый синтаксис Flexbox. Что, учить еще один синтаксис? Блин.

В чем Grid лучше Flexbox:

создание макетов целых страниц. Даже если учитывать только производительность, сетки лучше;

создание сеток в форме букв. Например, колонки в форме Х с разделителем в форме Y. Grid-gap – замечательное свойство, разделители в сетках – основная точка отрисовки;

снижение зависимости от медиа запросов с помощью мощного функционала типа автомакетирования, minmax(), repeat() и auto-fill. Отличная идея.


И еще один большой плюс: Grid позиционирует элементы в двух плоскостях, по колонкам и строкам. Это первое. Rachel Andrew доступно все объяснила: «Flexbox изначально предназначен для раскладки элементов в одной плоскости, строки ИЛИ колонки. Grid же позиционирует элементы в двух плоскостях, строки И колонки.»

Давайте разберем парочку демо. Например, мы создаем компонент горизонтальное меню – идеальный пример использования Flexbox, так как контент расположен вдоль одной оси. Можете поиграться со свойствами в демо Криса ниже, чтобы понять всю силу Flexbox:

Однако бывают случаи, когда эти flexbox-свойства, такие как justify-content и align-items, необходимо использовать в связке со свойствами Grid. Для примера разберем демо ниже:

Сперва мы создали блок .wrapper и задали ему display: flex;. Так мы можем задать max-width в нашем .grid и с помощью свойства justify-content: center; расположить блок в центре вьюпорта. Теперь можно задать нужное количество колонок.

Подскажите что лучше изучать CSS Gr > Задать вопрос

Подскажите что лучше изучать CSS Grid, bootstrap или flexbox что более удобнее для пользования , и что более лучше для создания сайтов

2 ответа 2

Стоит сразу отметить,что Flexbox и CSS Grid — это специальные модули CSS. А Bootstrap — фреймворк, который в основном используется для адаптация к мобильным устройствам. На начальном этапе вам необходимо достаточно хорошо разобраться с HTML и CSS. В дальнейшем стандартно рекомендуется начать с изучения фреймворка Bootstrap. Затем освоить другие фреймворки. После чего Вы сможете подобрать необходимый фреймворк, который будет наиболее удобен для вас и для конкретных целей. Так же у Вас появятся свои готовые решения на базе освоенного материала и полученного опыта. Если просто ответит на Ваш вопрос порядок следующий:

  1. HTML
  2. CSS в общем
  3. Flexbox
  4. CSS Grid
  5. Bootstrap
  6. Другие фреймворки.

CSS Grid, Flexbox, Bootstrap друг друга не заменяют, у них разное назначение, хотя некоторые элементы можно сделать сразу на нескольких из них.

Я рекомендую для начала поверхностно изучить понять что каждая из этих технологий делает. А потом можно будет изучать более подробно сами технологии.

Последовательность предлагаю такую.

  1. Flexbox (на первом месте, так как сейчас он реально много где используется, и многие вещи без него не сделать, очень удобен).
  2. CSS Grid
  3. Bootstrap (на последнем месте так как первые два это модули CSS, то есть основа, а Bootstrap это Framework).

Теперь кратко что делает каждая из технологий.

  1. Flexbox — контейнер для последовательности элементов, списков (таблицы на нём обычно не делают).
  2. CSS Grid — позволяет делать шаблоны (layout) страницы табличным методом, современная и мощная технология.
  3. Bootstrap — фреймворк для создания адаптивных страниц корректно и красиво отображающихся на устройствах с разным размером экрана: мобильники, планшеты, ПК. Так же имеет в себе много (библиотека) различных компонентов страницы.

Quick! What’s the Difference Between Flexbox and Gr >

Easily manage projects with monday.com

Let’s go rapid fire and try to answer this question with quick points rather than long explanations. There are a lot of similarities between flexbox and grid, starting with the fact that they are used for layout and much more powerful than any layout technique that came before them. They can stretch and shrink, they can center things, they can re-order things, they can align things. There are plenty of layout situations in which you could use either one to do what we need to do, and plenty of situations where one is more well-suited than the other. Let’s focus on the differences rather than the similarities:

Flexbox can optionally wrap. If we allow a flex container to wrap, they will wrap down onto another row when the flex items fill a row. Where they line up on the next row is independent of what happenned on the first row, allowing for a masonry-like look.

Grid can also optionally wrap (if we allow auto filling) in the sense that items can fill a row and move to the new row (or auto place themselves), but as they do, they will fall along the same grid lines all the other elements do.

Flexbox on top, Grid on bottom

You could think of flexbox as «one dimensional.» While flexbox can make rows and columns in the sense that it allows elements to wrap, there’s no way to declaratively control where elements end up since the elements merely push along a single axis and then wrap or not wrap accordingly. They do as they do, if you will, along a one-dimensional plane and it’s because of that single dimension that we can optionally do things, like align elements along a baseline — which is something grid is unable to do.

You could think of grid as «two dimensional« in that we can (if we want to) declare the sizing of rows and columns and then explicitly place things into both rows and columns as we choose.

Flexbox on top, Grid on bottom

I’m not the world’s biggest fan of the «1D» vs. «2D» differentiation of grid vs. flexbox, only because I find most of my day-to-day usage of grid is «1D» and it’s great for that. I wouldn’t want someone to think they have to use flexbox and not grid because grid is only when you need 2D. It is a strong distinction though that 2D layout is possible with grid though in ways it is not in flexbox.

Grid is mostly defined on the parent element. In flexbox, most of the layout (beyond the very basics) happen on the children.

Grid is better at overlapping. Getting elements to overlap in flexbox requires looking at traditional stuff, like negative margins, transforms, or absolute positioning in order to break out of the flex behavior. With grid, we can place items on overlapping grid lines, or even right within the same exact grid cells.


Flexbox on top, Grid on bottom

Grid is sturdier. While the flexing of flexbox is sometimes its strength, the way a flex item is sized gets rather complicated. It’s a combination of width , min-width , max-width , flex-basis , flex-grow , and flex-shrink , not to mention the content inside and things like white-space , as well as the other items in the same row. Grid has interesting space-occupying features, like fractional units, and the ability for content to break grids, though, generally speaking, we’re setting up grid lines and placing items within them that plop right into place.

Flexbox can push things away. It’s a rather unique feature of flexbox that you can, for example, put margin-right: auto; on an element and, if there is room, that element will push everything else as far away as it can go can.

Here are some of my favorite tweets on the subject:

flexbox looks like it does what you want
but grid is usually what you want

Grid makes actual columns and rows. Content will line up from one to the other, as you ask it to. Flexbox doesn’t. Not only in the second dimension (which is easiest to talk about), but also in the first dimension. Flexbox isn’t for most of the things we’ve been using it for.

How about this:#Flexbox is for alignment. #CSSGrid is for layout.

This is almost always how I wind up using them. It allows them to preserve their relationships to one another. It also allows each to be used for its strength, even though each can do the other thing.

If you start constraining all your flex items with a width, then more often than not it will be easier to use grid.

Here’s another difference, but it’s not a favorite way of describing them, just fun dumb knowledge:

flexbox takes 2 passes to finish
grid takes 3

so one could say, grid is slow and flexbox is fast lol

For me Grid is there to great full layout..grids. with more control over how the whole are/page comes together, whereas flexbox helps me to position and align (whether it’s in a grid or not).

For me it’s about purpose.

The distinction between the two is often blurry, especially now that we also have `gap` for flexbox. Grid is best suited for a few specific use cases (2D obviously, but also things like overlapping elements) while flexbox usually shines in simpler yet common layout requirements.

Use grid when you already have the layout structure in mind, and flex when you just want everything to fit. Layout first vs content first.

Особенности Grid Layout и Flexbox: когда и что лучше применять

Создавать адаптивный дизайн, выравнивать элементы на странице можно различными способами. Разные веб-верстальщики работают с разными инструментами и возможностями CSS. Но почему Flexbox у многих в приоритете? Что особенного скрывает в себе CSS Grid? Об этом и не только мы рассказываем в данном материале.

17 Декабрь 2020

CSS Grid и CSS Flexbox самые известные, широко используемые технологии веб-верстки и горячо обсуждаемые в течение последних лет. Однако, несмотря на некоторые поверхностные сходства, они фактически используются для самых разных задач; каждая из них решает очень разный набор проблем и зачастую те проблемы, которые не способна решить иная технология. Вы и сами можете заметить, что для разных проектов используете разные сетки.

Тем не менее, у многих разработчиков возникает вопрос: когда и что использовать? Точнее даже, когда лучше подойдет именно Flexbox, а когда Grid, можно ли одно заменить другим и так далее. В действительности разобраться во всем этом несложно, но мы решили посмотреть детальнее на эти вопросы и обратить внимание на некоторые особенности обеих технологий.

Grid или Flexbox?

Частый вопрос, но банальный секрет в том, что знать нужно и то и другое, испробовать на практике обе технологии. Впоследствии веб-верстальщик попросту сможет сам осознать, что именно для его компонентов нужнее в данном проекте. Здесь невозможно сказать: «Прислушайтесь к своему «Я» и выберите то, что вам более нравится и более удобно в использовании в техническом плане». И Grid Layout, и Flexbox – это все CSS. И нет никакого значения, что вы пишете display: grid или display: flex, так как все равно вы используете общую их суть. И причина в том, что обе технологии основываются на правилах CSS Intrinsic and Extrinsic Sizing и спецификациях выравнивания Box Alignment.

В ранних материалах мы рассматривали для каких целей и почему верстальщики и разработчики используют разные фреймворки, например, React, Foundation, Vue и прочие. Но это отдельные масштабные инструменты. В случае же с сетками дела обстоят иначе. Они часть CSS, а CSS используется для обработки каждого отдельного элемента веб-дизайна. Соответственно, и это логично, применять можно и то и то, лишь бы выполнялись нужные требования и условия. Например, некоторые дизайнеры используют и не Flex и не Grid, а создают отдельную сетку-контейнер, в которой еще сетки, становящиеся элементами flex. И это практикуется, если особенности верстки и дизайна того требуют. Включили в строгую двумерную grid гибкие части flex. Тоже неплохо.

Flexbox в практике веб-верстки

Попробуйте спросить: «Зачем нужен автомобиль, а не велосипед». Суть в разных возможностях. Что предлагает Flexbox – его описание можно найти в базе MDN – выравнивание и распределение. Таким образом, если на странице есть множество элементов, а в мобильном варианте или при малом размере окна браузера эти элементы должны уже размещаться иначе – то и flex для этих целей как раз более необходим. При этом располагает он элементы так, чтобы контент было удобнее изучать, а значит, большим элементам много пространства, малым – меньше.

Иными словами, flex удобен и необходим при верстке адаптивных дизайнов; для элементов, у которых нет постоянного размера и не требующих строгих параметров разметки; когда от верстальщика (фигурально выражаясь) требуется только разместить все элементы рядом. Например, верстальщику необходима плавающая сетка (размеры изменяющиеся) и четкое разделение на строки. Можно по-разному подойти к решению этого вопроса: grid будет автоматически заполнять ячейки, а flex динамически заполнит эти же самые ячейки. Подходы к решению задачи будут разными, но и вид итоговый тоже.

В первом примере текстовые элементы размещены строго в ячейках (grid). Колонок не может быть больше или меньше, но высота ячеек будет варьироваться от объема текстового элемента. При таком варианте, если при auto-flow есть пустые ячейки, указать длину строки попросту невозможно.

Во втором примере при использовании технологии flex, элементы заполняют собой всё имеющееся пространство, а потому четкого размещения и выравнивания нет.

Но второй пример можно изменить и адаптировать, если для свойства flex-basis установить значение auto. Тогда текст в ячейках не будет переноситься на строки, а ширина ячеек будет «подгоняться» под полную длину текстового блока. Но при этом вся конструкция продолжит оставаться в пределах заданной ширины.

Одно дело примеры, другое – практическое применение. Вспомним, как часто всем нам приходится видеть список тегов, или как его раньше называли «облако тегов». Располагающиеся под статьями или в колонке справа-слева, короткие словосочетания или слова, кажется, что находятся «вперемешку» и не имеют никакой системности в расположении. В данном случае удобнее использовать Flexbox, так как задача состоит в том, чтобы заполнить всё выделенное пространство и разместить текст строго на строчках. Кажется, что это не тот вариант, когда требуются сетки (хоть какие-нибудь). Сетки нужны для того, чтобы выравнивать и размещать строго в колонках и строках. А в случае с тегами о какой-либо системности и речи быть не может.


Но вот наглядный пример, в котором технология flex отлично справляется с задачей. При разной длине каждого элемента, вся их совокупность выглядит очень ровненько и красиво, систематизировано.

Еще вариант необходимости flex – отцентрирование текста внутри элемента. Впрочем, вместо текста может быть и изображение, иконка или иной блок с данными. Но суть-то как раз в центрировании по вертикали и горизонтали.

В будущем (при наличии поддержки браузером тех свойств Box Alignment properties, что не используются во flex) мы сможем проделывать все примеры без необходимости включения сетки и свойства display: flex в контейнер. Но на сегодняшний момент включение в свой код данной строки CSS – обычная необходимость. И во всех примерах выше она присутствовала.

Для чего еще хорош Flexbox

Формы. Точнее для того, чтобы форма не развалилась при изменении ширины странницы. Наборы иконок, полей, небольших блоков, кнопок можно очень удачно скомпоновать, разместить, выровнять и при этом нисколько не задумываться о сложных вычислениях координат, положений относительно осей и так далее. Да, к тому же и размер полей будет адаптироваться под ширину формы.

Другой особенностью flex-сеток является динамическое расширение одной из ячеек при том, что остальные будут оставаться такими, какими были созданы изначально. Пример ниже в двух вариантах: по умолчанию и при увеличенном контенте в среднем блоке.

Таким образом, подводя итог того, когда и при каких вариантах лучше всего использовать Flexbox, нужно заметить, что он идеален при небольших сценариях, когда требуется все выровнять не просто по осям, а именно, заполняя свободное пространство. Но и так это делать, чтобы контент было удобно изучать. В то же время необходимо обратить внимание на тот факт, что если спустя время в веб-дизайн приходится что-то добавлять, то как раз технология flex подойдет для внедрения этих самых элементов лучше чем grid.

Grid – двумерная сетка – создает новую строку (переход на нее), если в одной много элементов (ячеек). А в большинстве случаев это неудобно и нежелательно. Flex же способен ужать всю строку и добавить новый элемент рядом на линии путем использования свойства flex-basis со значением auto или ноль (0).

И вот еще несколько примеров того, как используется flexbox и Grid Layuot на разных сайтах. Это и theguardian, новости, меню в виде шестиугольников, журнал.

Grid тоже бывает нужен

Несмотря на большую полезность flex-сеток, существуют варианты верстки и дизайна, когда от flex, при всем его кажущемся удобстве, нужно отказаться. Один из вариантов уже есть выше, когда все элементы были строго расположены в ячейках таблицы.

Суть в том, что Flex работает с одной большой линией, которая распределяется по строкам и представляет собой отдельный контейнер. А Grid, в свою очередь, создает макет из строк и столбцов, где каждая ячейка закрепляется за элементом. Отсюда несложно сделать логический вывод, что Grid CSS удобен тогда, когда элементы должны находиться в строгом выровненном порядке на странице, не менять своего положения. И размер самих элементов здесь роли не играет.

Иногда веб-мастера полагают, что Flexbox нужен только для элементов, а с помощью Grid делают общую разметку страницы. Ох, нет, не стоит так думать… На странице вполне могут находиться два-три элемента, которые требуют четкого размещения в структуре этой самой страницы, а потому как раз таки технология flex будет излишней.

Еще вариант преимущества Grid над Flexbox. Например, существует несколько динамических контейнеров с разными элементами, но вы хотите, чтобы они располагались рядом друг с другом или строго друг под другом и так далее. Их уместнее заключить в «строгую» Grid-сетку. Или можно с помощью Grid ограничить динамичность Flexbox и не позволить ему расширяться до бесконечности. Тут, разумеется, многое зависит от макета, но иногда это весьма удобно.

Также бывают варианты, когда с помощью flex’а создают статическую сетку, используя flex-grow = 0 и задавая процентный размер элементов. Но ведь аналогично мы поступаем и при работе с grid, поэтому не лишним будет задуматься, а зачем в данном варианте нужен flexbox? Не проще сразу использовать строгий и статичный Grid? На примере ниже создана таблица с технологией flex. Но стоит расширить один из элементов, как вся строгость рушится. Вопрос: «Строгость была нужна»? Если «да», то flex просто неуместен.

Завершение

Даже несмотря на то, что очень легко объяснить и понять, чем Grid Layout отличается от CSS Flexbox, все равно сказать точно, что именно использовать в данный конкретный момент бывает трудно. Тут подходит только вариант пробы обеих технологий. При этом всегда можно использовать и Grid и Flex одновременно или переключать шаблон с одной сетки на другую.

Мы постарались наглядно продемонстрировать и рассказать о том, как логически происходит выравнивание и определение размеров динамических элементов, как влияет на них статика. CSS Grid и Flexbox были созданы для решения разных задач и при этом Grid поддерживается браузерами гораздо хуже, чем Flexbox. В обозримом будущем положение дел для CSS Grid улучшится, и можно будет гораздо чаще использовать сочетание двух технологий. Сейчас такое сочетание возможно при условии, что сайт создается исключительно для современных версий браузеров.

Flexbox или CSS Gr > Опубликовано в Для студентов • 21 февраля 2020 г. • 1 мин. на чтение

Недавно смотрел доклад «Grid Layout как основа современной раскладки» / Сергей Попов (Лига А./HTML Academy).

Помнится, некоторое время назад, я задавался вопросом: «Flexbox или CSS Grid?»

Сергей утверждает, что время гридов уже пришло. Возможно это и так. Но общее правило примерно такое: Flexbox для однострочной (одноколоночной) раскладки, grid — для многострочной (строки и колонки).

  • CSS Grid отлично подходит для макетов с нестандартным или асимметричным дизайном.
  • Flexbox отлично подходит для выравнивания содержимого внутри элементов.
  • Нет причин применять только CSS Grid или только Flexbox. Изучайте их и используйте совместно.
  • http://htmlbook.ru/blog/css-grid-i-flexbox-sravnenie-na-praktike
  • https://proglib.io/p/css-grid-vs-flexbox/
  • https://css-tricks.com/css-grid-replace-flexbox/
  • https://philipwalton.github.io/solved-by-flexbox/

Похожие записи

Какой язык программирования учить первым?

Для начало необходимо решить как Вам больше нравится: «начинать со сложного» или «начинать с простого». Можно провести аналогию с обучением вождения на автоматической коробке передач и механическим аналогом. Автомат — начинаем с простого, механика — со сложного.

Полезные ссылки по вёрстке и фронтенду

Перечень ссылок, которые на мой взгляд достойны внимания.

Улучшение контрастности темы Material Theme редактора Visual Studio Code

Для Visual Studio Code есть несколько тем в стиле материального дизайна, и все они с недостатками: либо некорретная подстветка синтаксиса, либо проблемы с контрастностью.

Мастер Йода рекомендует:  Как посмотреть Google IO 2020
Добавить комментарий