1

I would like the list below to decrease the number of columns depending on the width of the parent div.

I have tried using a @media rule with max-width but it only takes into account the width of the browser, not of the parent div.

I have tried with width instead of max-width but it did not help.

#opponentsOfCivList {
  columns: 4;
  -webkit-columns: 4;
  -moz-columns: 4;
  padding-left: 25px;
  list-style-type:disc;
}
@media screen and (max-width: 200px) {
  #opponentsOfCivList {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    padding-left: 5px;
    list-style-type:disc;
  }
}
li {
  padding-left: 2px;
}
#opponentsOfCivList {
  font-size: 12px;
}
<div style="background:grey; resize:horizontal; width:450px;overflow: auto;">
  <ol id="opponentsOfCivList"><li value="Phoenicia">Phoenicia</li><li value="Austria-Hungary">Austria-Hungary</li><li value="Persia">Persia</li><li value="Siam">Siam</li><li value="Maya">Maya</li><li value="Korea">Korea</li><li value="Babylonia">Babylonia</li><li value="Brazil">Brazil</li><li value="Ethiopia">Ethiopia</li><li value="America">America</li><li value="Spain">Spain</li><li value="Aztec">Aztec</li><li value="Vikingland">Vikingland</li><li value="Egypt">Egypt</li><li value="Greece">Greece</li><li value="China">China</li><li value="Arabia">Arabia</li><li value="Turkey">Turkey</li><li value="Mongol">Mongol</li><li value="Inca">Inca</li><li value="Portugal">Portugal</li><li value="Rome">Rome</li><li value="Netherlands">Netherlands</li><li value="Byzantium">Byzantium</li><li value="France">France</li><li value="Germany">Germany</li><li value="India">India</li><li value="Japan">Japan</li><li value="Huns">Huns</li><li value="Russia">Russia</li><li value="England">England</li><li value="Iroquois">Iroquois</li></ol>
  <p>resize this div at the bottom right!</p>
</div>
Pierre
  • 145
  • 1
  • 15

1 Answers1

3

As of today, rule columns: number column does not allow automatic adaptation of columns to the width of the parent.

To adapt the columns, use the property function minmax() (grid), indicating the minimum and maximum values:

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

With the indication of parameter auto-fit, which will allow the parent to occupy free space during resizing.

#opponentsOfCivList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    column-gap: 10px;
    font-size: 12px;
    list-style-type: disc;
}

li {
    padding-left: 2px;
}
<div style="background: grey; resize: horizontal; width: 450px; overflow: auto;">
    <ol id="opponentsOfCivList">
        <li value="Phoenicia">Phoenicia</li>
        <li value="Austria-Hungary">Austria-Hungary</li>
        <li value="Persia">Persia</li>
        <li value="Siam">Siam</li>
        <li value="Maya">Maya</li>
        <li value="Korea">Korea</li>
        <li value="Babylonia">Babylonia</li>
        <li value="Brazil">Brazil</li>
        <li value="Ethiopia">Ethiopia</li>
        <li value="America">America</li>
        <li value="Spain">Spain</li>
        <li value="Aztec">Aztec</li>
        <li value="Vikingland">Vikingland</li>
        <li value="Egypt">Egypt</li>
        <li value="Greece">Greece</li>
        <li value="China">China</li>
        <li value="Arabia">Arabia</li>
        <li value="Turkey">Turkey</li>
        <li value="Mongol">Mongol</li>
        <li value="Inca">Inca</li>
        <li value="Portugal">Portugal</li>
        <li value="Rome">Rome</li>
        <li value="Netherlands">Netherlands</li>
        <li value="Byzantium">Byzantium</li>
        <li value="France">France</li>
        <li value="Germany">Germany</li>
        <li value="India">India</li>
        <li value="Japan">Japan</li>
        <li value="Huns">Huns</li>
        <li value="Russia">Russia</li>
        <li value="England">England</li>
        <li value="Iroquois">Iroquois</li>
    </ol>
    <p>resize this div at the bottom right!</p>
</div>

Solution using columns: width value, specifying column widths in pixels:

columns: 100px;


#opponentsOfCivList {
    columns: 100px;
    column-gap: 20px;
    font-size: 12px;
    list-style-type: disc;
}

li {
    padding-left: 2px;
}
<div style="background: grey; resize: horizontal; width: 450px; overflow: auto;">
    <ol id="opponentsOfCivList">
        <li value="Phoenicia">Phoenicia</li>
        <li value="Austria-Hungary">Austria-Hungary</li>
        <li value="Persia">Persia</li>
        <li value="Siam">Siam</li>
        <li value="Maya">Maya</li>
        <li value="Korea">Korea</li>
        <li value="Babylonia">Babylonia</li>
        <li value="Brazil">Brazil</li>
        <li value="Ethiopia">Ethiopia</li>
        <li value="America">America</li>
        <li value="Spain">Spain</li>
        <li value="Aztec">Aztec</li>
        <li value="Vikingland">Vikingland</li>
        <li value="Egypt">Egypt</li>
        <li value="Greece">Greece</li>
        <li value="China">China</li>
        <li value="Arabia">Arabia</li>
        <li value="Turkey">Turkey</li>
        <li value="Mongol">Mongol</li>
        <li value="Inca">Inca</li>
        <li value="Portugal">Portugal</li>
        <li value="Rome">Rome</li>
        <li value="Netherlands">Netherlands</li>
        <li value="Byzantium">Byzantium</li>
        <li value="France">France</li>
        <li value="Germany">Germany</li>
        <li value="India">India</li>
        <li value="Japan">Japan</li>
        <li value="Huns">Huns</li>
        <li value="Russia">Russia</li>
        <li value="England">England</li>
        <li value="Iroquois">Iroquois</li>
    </ol>
    <p>resize this div at the bottom right!</p>
</div>
s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25
  • Your answer is technically incorrect. `columns` accepts a physical width (e.g: `columns: 12em`). And by that I'm not saying the `grid` solution is not better. Just that, technically, one could adapt the number of columns to parent width, and you claimed the opposite. – tao May 12 '21 at 10:01
  • @tao I don't understand, could you propose an answer with a working code? I tried `columns: 200px` and `columns: 12em` by curiosity, but it didn't achieve anything. – Pierre May 12 '21 at 15:01
  • @Pierre, He meant to use a width of `columns`. This will work too. Check pls out my second snippet. – s.kuznetsov May 12 '21 at 15:16
  • @tao, Technical incorrect answer? What are you talking about, mate? The `auto-fit` parameter is exactly what allows the elements to stretch to the width of the parent. The `auto-fit` parameter is exactly what allows the elements to stretch to the width of the parent. Look pls at this sandbox - https://codepen.io/SaraSoueidan/pen/JrLdBQ. – s.kuznetsov May 12 '21 at 15:33
  • The technically incorrect bit is the one suggesting *"[columns](https://drafts.csswg.org/css-multicol-1/#columns) does not allow automatic adaptation of columns to the width of the parent"*. It's incorrect because if you use a physical measurement (e.g: `200px`) as the value of `columns` the number of columns changes depending on parent width. When parent is < `400px` it has 1 column, above that it has 2, above `600px` 3, etc... Which part is unclear, *"mate"*? – tao May 12 '21 at 15:43
  • Also, please re-read my first comment: I said there (implicitly) that I consider the provided `grid` solution a proper one for this type of problem. I simply wanted to point out that the wording was not technically correct. `columns` CSS property does allow a basic form of adaptation to the parent width. We shouldn't claim the opposite. I'm basically waiting for the answer to no longer contain any untrue claim, so I can upvote it. :) – tao May 12 '21 at 15:50
  • Thanks s.kuznetsov for the new snippet. @tao: the wording is currently "*rule columns: **number column** does not allow automatic adaptation of columns to the width of the parent.*" so I think it's correct as it is, respecting what you are saying – Pierre May 12 '21 at 16:48