Grid или Flexbox?

[JustDont]

Флексбокс становится способным очень на многое, если он многоуровневый (flex-direction=«row» вкладывается в flex-direction=«column» и наоборот). Более того, это позволяет описывать правильные взаимоотношения элементов интерфейса, а не лепить всё что можно в один уровень укладки.

[aborouhin]

Ну у MSIE 11 всё же есть display: -ms-grid и прочие -ms-grid-* свойства, с помощью которых можно хотя бы упрощённый, но не совсем ужасный аналог полноценного grid получить. Если поддерживать версии ниже 11 не надо (а 11 таки надо) — то это проще, чем писать для IE полностью другую версию всего layout'а на flexbox.

[romandev411]

Да? Покажите пример.

[aborouhin]

Ну собственный пример у меня будет непоказательным, т.к. я это использовал только чтобы подружить с IE11 основанный на Grid сторонний элемент для Wordpress. Да и grid'ы там довольно простые.

Вот такие куски кода, к примеру, в Wordpress'овский custom.css добавились, но это только костыли для IE, нормальная реализация Grid в CSS-файле плагина:

Это самый простой случай, табличка «текст с картинкой», где картинка может быть либо справа, либо слева от текста.

.block-ltr, .block-rtl {
    /* MSIE 11 */
    display: -ms-grid;
    -ms-grid-rows: 1fr;
    -ms-grid-row-align: start;
    -ms-grid-column-align: end;
}
.block-ltr {
    /* MSIE 11 */
    -ms-grid-columns: 1fr 2fr;
}
.block-rtl {
    /* MSIE 11 */
    -ms-grid-columns: 2fr 1fr;
}
.block-ltr > figure {
    /* MSIE 11 */
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}
.block-rtl > figure {
    /* MSIE 11 */
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}
.block-ltr > div {
     /* MSIE 11 */
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}
.block-rtl > div {
    /* MSIE 11 */
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

Вдохновение черпал (из того, что смог вспомнить) тут и тут. Но и других мануалов немало гуглится.

[romandev411]

спс

[bo883]

надо напомнить что grid'ы отвратно работают с анимацией