Как задать цвет заднего фона для каждой колонки?

Question

[wonder_uix]

Есть текстовый блок, разделил его на 3 колонки (column-count: 3;). Как задать цвет заднего фона для каждой колонки отдельно а не для всего блока? Например чтобы между колонками не было заливки? Ссылка на верстку.

UPD Спасибо за идею Ankhena с линейным градиентом, вариант с градиентом тут.

Comments

[Ankhena]

Нарисовать линейный градиент

[wonder_uix]

Ankhena, хорошая идея! А как быть на мобилках?

[twobomb]

И где вы такие свойства дивные находите. Сделайте по человечески 3 колонки например дивами и не ломайте голову. А то вам потом еще обводку захочется, шрифт разные в каждой и анимацию перемещения.

[Ankhena]

twobomb, нормальное свойство.
Никакие три колонки дивами автоматом контент между собой не распределят.

wonder_uix,

А как быть на мобилках?

Как хотите.
Вы какого-то другого ответа ждали на такой шикарный вопрос? :)

[wonder_uix]

Ankhena, мда, хороший ответ. Проблема в том что при уменьшении размеров экрана, градиент немного "скачет". Крч просто поиграл с паддингом и column-count: 1. Если интересно то можно посмотреть тут.

[twobomb]

Ankhena, вот я прям так и знал что сейчас кто-то скажет что это автораспределение. А я скажу, не нужно это автораспределение. Где такое видано чтобы один смысловой текст распределялся на 3 отделенные колонки. Вручную распределите, а если текст динамический напишите 2 строчки кода которые разделят его, это займёт времени в десять раз меньше чем рисованием линейного градиента который будет разделять его визуально на три колонки с нужными отступами на всех разрешениях.
Бесполезное свойство, которому нужна пометка deprecated!

[Ankhena]

wonder_uix, таки через calc.
У вас паддинг блока в пикселях, а отступ между колонками в %. Это нужно учитывать в градиенте.
Ну либо в общей логике.

[Ankhena]

twobomb, если вам не нужно, не используйте.
Например, им делается простенькая раскладка типа masonry в 2 строки вместо плагина.

Как обычно в верстке, одна задача имеет несколько решений. И в разных ситуациях могут выиграть разные.

[twobomb]

Ankhena, Ну пример хоть одного сайта или работы "типа masonry раскладки" этим методом.

Answer 1

[Kotaro Hiba]

Как вариант вижу только разбивать все это дело на отдельные блоки. Судя по спецификации, в CSS нет определенного св-ва.
Еще как вариант можно конечно, сделать блок абсолютный внутри с 3мя блоками, с такими же нужными отступами, но это так, костыльное решение в голове.
Сколько верстаю, 1й раз вижу это св-во.

UPD костыльный вариант работает ))).
Еще как вариант, можно написать JS который будет разбивать текст на N кол-во блоков и распределять между 3мя дивами, это выйдет довольно быстро.

Comments

[wonder_uix]

Да, попробовал вариант с костылем, тоже интересное решение :)
Согласен, что лучше все таки написать JS скрипт.

[Kotaro Hiba]

wonder_uix, грубый набросок без фреймворков, на какой нить вьюшке в разы быстрее получится и поудобнее.

class Columns {
    cols = []
    constructor(str, count) {
        this.count = count
        const symbolMax = Math.round(str.length / count)
        for (let i = 0; i < count; i++) {
            this.cols.push(str.substr(i*symbolMax, symbolMax))
        }
    }
    
    /** @param {HTMLElement} container*/
    mount(container) {
        const divs = this.cols.map(i => {
            const container = document.createElement('div')
            container.innerHTML = i
            return container
        })
        container.append(...divs)
    }
}
const col = new Columns(
    '1234567890qwertyuiopZXCVBNMLKJ',
    3
)
const block = document.querySelector('.columns')
col.mount(block)

.columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10%;
  div {
    background: pink;
  }
  div:first-child {
    background: red;
  }
  
  div:last-child {
    background: green;
  }
}