Рамки(border) у крайних и соседних элементов

302

18 марта 2017, 01:21

Здравствуйте, подскажите способ сделать также?:
http://refills.bourbon.io/#er-toc-id-8 (второй пример) Там нет удвоения рамок между элементами и нет рамок у крайних элементов.
В CSS не нашел ничего похожего на :nth-child, да и при изменении ширины экрана порядок элементов меняется а эфект остается... это сделано за счет js?
Подскажите пожалуйста плагин или как реализовать на css (если не подключать refills).
Спасибо.

Answer 1

Здесь нет JS

Не туда смотрели, надо было поглядеть на эти классы:

.refills-patterns .grid-items .grid-item-big {
    width: 66.66667%;
}
.refills-patterns .grid-items .grid-item {
    width: 33.33333%;
}

.grid-item-big - это большой блок, 2/3 ширины, .grid-item - маленький 1/3 ширины. Блоки укладываются за счет display: inline-block, так-что это только кажется, что это табличная верстка. Рамок (border) соответственно тоже нет, вместо них простой отступ между блоками - margin

При изменении размера экрана срабатывает media-запрос

.refills-patterns .grid-items .grid-item {
     width: 100%;/*обычное состояние*/
}
@media screen and (min-width: 53.75em){
    .refills-patterns .grid-items .grid-item-big {
       width: 66.66667%;/*если широкий экран*/
    }
    .refills-patterns .grid-items .grid-item {
       width: 33.33333%;/*если широкий экран*/
    }
}

И ширина блоков становится 100%, если ширина экрана меньше обозначенной величины