1

I'd like to make a carousel-type scrolling horizontal card view using CSS multicol with column-width, and use a repeating background (such as a white background with a black border) on the element, but I'm having problems.

The first problem is the background does not tile horizontally past the page width. If I set a width on the multicol element the background repeats to that extent, but that interferes with the natural width.

The second problem is the column widths change when I horizontally resize the window. I can tell it's trying to tile the columns in a pretty way but I need the widths not to do that or my background gets out of sync.

.holder {
  overflow-x: scroll;
  position: relative;
}

.columns {
  column-width: 100px;
  height: 200px;
  column-rule: 10px solid rgba(0, 0, 250, 0.2);
  background-repeat: repeat-x;
  background-size: 120px 200px;
  background-image:
    linear-gradient(90deg, red 95px, transparent 50%), 
    linear-gradient(white 5px, transparent 100%);
}
<div class=holder>
  <div class=columns>
    Tons Of Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? Ne in odium veniam, si amicum destitero tueri. Disserendi artem nullam habuit. Nam his libris eum malo quam reliquo
    ornatu villae delectari. Illud quaero, quid ei, qui in voluptate summum bonum ponat, consentaneum sit dicere. Placet igitur tibi, Cato, cum res sumpseris non concessas, ex illis efficere, quod velis? Quaero igitur, quo modo hae tantae commendationes
    a natura profectae subito a sapientia relictae sint. Beatus autem esse in maximarum rerum timore nemo potest. Utram tandem linguam nescio? Eam si varietatem diceres, intellegerem, ut etiam non dicente te intellego; Recte, inquit, intellegis. Consequentia
    exquirere, quoad sit id, quod volumus, effectum. Dat enim intervalla et relaxat. Tum Torquatus: Prorsus, inquit, assentior; Qui enim existimabit posse se miserum essudicio aut, si coronam times, dic in senatu. Etenim semper illud extra est, quod arte
    comprehenditur. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Itaque a sapientia praecipitur se ipsam, si usus sit, sapiens ut relinquat. Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Quo plebiscito
    decreta a senatu est consuli quaestio Cn. Quid ergo attinet dicere: Nihil haberem, quod reprehenderem, si finitas cupiditates haberent? Aliena dixit in physicis nec ea ipsa, quae tibi probarentur; Refert tamen, quo modo. Quis negat? Quamquam tu hanc
    copiosiorem etiam soles dicere. Sed haec quidem liberius ab eo dicuntur et saepius. Respondeat totidem verbis. Re mihi non aeque satisfacit, et quidem locis pluribus. Expressa vero in iis aetatibus, quae iam confirmatae sunt. Aliter homines, aliter
    philosophos loqui putas oportere? An hoc usque quaque, aliter in vita? Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim. Quantum
    Aristoxeni ingenium consumptum videmus in musicis? Illud non continuo, ut aeque incontentae. Tanta vis admonitionis inest in locis; Sed ad haec, nisi molestum est, habeo quae velim. Te ipsum, dignissimum maioribus tuis, voluptasne induxit, ut adolescentulus
    eriperes P. Facit enim ille duo seiuncta ultima bonorum, quae ut essent vera, coniungi debuerunt; Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Quae cum praeponunt, ut sit aliqua rerum selectio, naturam videntur sequi; Duo Reges:
    constructio interrete. Audeo dicere, inquit. Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non deserat. Huius, Lyco, oratione locuples, rebus ipsis ielunior. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum
    anteponebas? Sed tu istuc dixti bene Latine, parum plane. Respondent extrema primis, media utrisque, omnia omnibus. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Paulum, cum regem Persem captum adduceret, eodem flumine
    invectio? Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Tu autem, si tibi illa probabantur, cur non propriis verbis ea tenebas?
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Dan Gelder
  • 75
  • 5
  • I don't believe you can style the columns in that way. Only the column rule. I see what you are trying to do with the size and repeat and it seems logical, but doesn't really matter since you cannot have a background overflow it's element. See [this post for confirmation on that](https://stackoverflow.com/questions/4280886/can-a-background-image-be-larger-than-the-div-itself). – MilkyTech Jun 11 '20 at 23:41
  • Considering I've worked around the second problem by embedding the columns in a fixed-width container, it's too bad if there's no straightforward way to style a dynamic number of columns. The CSS spec seems to refer to "overflow columns" and how they are separate from the box. I can set the number of columns to 99999 and column-fill: auto, and the background will happily tile across all the blank ones...I'd prefer a CSS-only solution but I never seem to get one. :( – Dan Gelder Jun 11 '20 at 23:54
  • `column-fill` only affect how the content fills the columns, not the background. I never understand why so many people want "CSS-only" solutions even if they are complex or hacky. There is nothing wrong with using javascript. Nobody turns off javascript in their browsers anymore or almost every website wouldn't function properly. Only crappy websites don't have javascript. – MilkyTech Jun 12 '20 at 00:20
  • Well, can you tell me how to find the actual width of the columns element (including all overflow columns) with Javascript? offsetWidth and getBoundingClientRect() don't seem to see them, even though the browser certainly does. – Dan Gelder Jun 12 '20 at 00:33
  • I can't even tell you if it's possible let alone how! I just did some research and I can't find an answer so it would make a great StackOverflow question! Even with a set column width of 100px, in DevTools, you can see the column width (including the default 10px rule) can be anywhere from 110px to as wide as 117px depending on the content. Even with `text-align: justify;`. It's a weird css property. – MilkyTech Jun 12 '20 at 01:04

1 Answers1

0

Although there are still bugs I'm tracking down in Safari involving the CSS --variables, I feel I have been able to find an answer to the question! Try it for yourself.

  :root { 
   --colwidth: 120px;
   --colcount: 30;
   }

  .holder { 
   overflow: scroll;
   position: relative;
   width: 360px; width: calc(var(--colwidth) * 3);
   xbackground: gray;
   word-wrap: break-word;
   border: thin solid gray;
   }
  .columns {  
   position: relative;
   display: inline-block;
   column-width: 110px; column-width: calc(var(--colwidth) - 10px); /* this is really minimum width, it rounds up to the next 1/3, 1/2, etc of the holder */
   height: 200px; 
   column-rule: 10px solid rgba(0,0,250,0.2); /* does not affect gap size, is centered on it instead */
   column-fill: auto;
   column-gap: 0px; /* seems to change the column width too, what the hell is the formula? soemthing to do with the holder*/
   }
  .columns:before {
   content: ""; position: absolute; left: 0px; top: 0px; bottom: 0px;; 
    
   width: calc(var(--colcount) * var(--colwidth));
   z-index: -1;
   
   background: orange; 
   background-position: 0 0;
   background-repeat: repeat-x; 
   background-size: var(--colwidth) 100%;
   background-image: linear-gradient(90deg, red 33%, transparent 66%), linear-gradient(white 0%, transparent 100%);
  }
  .end { }
  .text {
   padding-left: 10px;
   padding-right: 10px;
  }
<button onclick="document.documentElement.style.setProperty('--colwidth', prompt('new width (120px, 10em, 30vw, etc)'));">Change column width</button>

<button onclick="document.documentElement.style.setProperty('--colcount', Math.ceil((document.querySelector('.end').getBoundingClientRect().right - document.querySelector('.columns').getBoundingClientRect().x)/120))">Make .end the last backgrounded column</button>

<div class=holder>
  <div class=columns>
    <div class=text contenteditable>
      Tons Of Text: .....................................Periods Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? Ne in odium veniam, si amicum destitero tueri. Disserendi artem nullam
      habuit. Nam his libris eum malo quam reliquo ornatu villae delectari. Illud quaero, quid ei, qui in voluptate summum bonum ponat, consentaneum sit dicere. Placet igitur tibi, Cato, cum res sumpseris non concessas, ex illis efficere, quod velis?
      Quaero igitur, quo modo hae tantae commendationes a natura profectae subito a sapientia relictae sint. Beatus autem esse in maximarum rerum timore nemo potest. Utram tandem linguam nescio? Eam si varietatem diceres, intellegerem, ut etiam non dicente
      te intellego; Recte, inquit, intellegis. Consequentia exquirere, quoad sit id, quod volumus, effectum. Dat enim intervalla et relaxat. Tum Torquatus: Prorsus, inquit, assentior; Qui enim existimabit posse se miserum esse beatus non erit. Eorum enim
      omnium multa praetermittentium, dum eligant aliquid, quod sequantur, quasi curta sententia; Quis istud possit, inquit, negare? Scio enim esse quosdam, qui quavis lingua philosophari possint; Neutrum vero, inquit ille. Idem iste, inquam, de voluptate
      quid sentit? Quid ait Aristoteles reliquique Platonis alumni? Uterque enim summo bono fruitur, id est voluptate. Omnia contraria, quos etiam insanos esse vultis. Inde igitur, inquit, ordiendum est. At tu eadem ista dic in iudicio aut, si coronam
      times, dic in senatu. Etenim semper illud extra est, quod arte comprehenditur. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Itaque a sapientia praecipitur se ipsam, si usus sit, sapiens ut relinquat. Quos quidem
      tibi studiose et diligenter tractandos magnopere censeo. Quo plebiscito decreta a senatu est consuli quaestio Cn. Quid ergo attinet dicere: Nihil haberem, quod reprehenderem, si finitas cupiditates haberent? Aliena dixit in physicis nec ea ipsa,
      quae tibi probarentur; Refert tamen, quo modo. Quis negat? Quamquam tu hanc copiosiorem etiam soles dicere. Sed haec quidem liberius ab eo dicuntur et saepius. Respondeat totidem verbis. Re mihi non aeque satisfacit, et quidem locis pluribus. Expressa
      vero in iis aetatibus, quae iam confirmatae sunt. Aliter homines, aliter philosophos loqui putas oportere? An hoc usque quaque, aliter in vita? Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; Ego quoque, inquit,
      didicerim libentius si quid attuleris, quam te reprehenderim. Quantum Aristoxeni ingenium consumptum videmus in musicis? Illud non continuo, ut aeque incontentae. Tanta vis admonitionis inest in locis; Sed ad haec, nisi molestum est, habeo quae
      velim. Te ipsum, dignissimum maioribus tuis, voluptasne induxit, ut adolescentulus eriperes P. Facit enim ille duo seiuncta ultima bonorum, quae ut essent vera, coniungi debuerunt; Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum.
      Quae cum praeponunt, ut sit aliqua rerum selectio, naturam videntur sequi; Duo Reges: constructio interrete. Audeo dicere, inquit. Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non deserat. Huius, Lyco, oratione locuples, rebus ipsis
      ielunior. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Sed tu istuc dixti bene Latine, parum plane. Respondent extrema primis, media utrisque, omnia omnibus. Quid ei reliquisti, nisi te, quoquo modo
      loqueretur, intellegere, quid diceret? Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Tu autem, si tibi illa probabantur, cur non propriis verbis ea tenebas?
    </div>
    <button class=end onclick="alert('I am in column ' + Math.ceil((document.querySelector('.end').getBoundingClientRect().right - document.querySelector('.columns').getBoundingClientRect().x)/120));">end</button>
  </div>
</div>
Dan Gelder
  • 75
  • 5