CSS grid flow -- fill columns first

Turbocapitalist · 11-02-2023, 01:45 PM

I'm trying to figure out the CSS for filling up columns first in a CSS grid.

I've got the following sample document, but it fills the rows out first, as in,

Code:

1 2 3 4
4 5 6 7 
8 9 ...

I'd like to turn that output sideways. The following produces the above row-first grid,

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test</title>
  <style type="text/css" media="screen">
        div dl {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(3em, 1fr));
        grid-auto-flow: row dense;
        }
  </style>
</head>
<body>
  <div>
    <dl>
      <dd>1</dd> <dd>2</dd> <dd>3</dd> <dd>4</dd> <dd>5</dd>
      <dd>6</dd> <dd>7</dd> <dd>8</dd> <dd>9</dd> <dd>10</dd>
      <dd>11</dd> <dd>12</dd> <dd>13</dd> <dd>14</dd> <dd>15</dd>
      <dd>16</dd> <dd>17</dd> <dd>18</dd> <dd>19</dd> <dd>20</dd>
      <dd>21</dd> <dd>22</dd> <dd>23</dd> <dd>24</dd> <dd>25</dd>
      <dd>26</dd> <dd>27</dd> <dd>28</dd> <dd>29</dd> <dd>30</dd>
      <dd>31</dd> <dd>32</dd> <dd>33</dd> <dd>34</dd> <dd>35</dd>
      <dd>36</dd> <dd>37</dd> <dd>38</dd> <dd>39</dd> <dd>40</dd>
      <dd>41</dd> <dd>42</dd> <dd>43</dd> <dd>44</dd> <dd>45</dd>
      <dd>46</dd> <dd>47</dd> <dd>48</dd> <dd>49</dd> <dd>50</dd>
      <dd>51</dd> <dd>52</dd> <dd>53</dd> <dd>54</dd> <dd>55</dd>
      <dd>56</dd> <dd>57</dd> <dd>58</dd> <dd>59</dd> <dd>60</dd>
      <dd>61</dd> <dd>62</dd> <dd>63</dd> <dd>64</dd> <dd>65</dd>
      <dd>66</dd> <dd>67</dd> <dd>68</dd> <dd>69</dd> <dd>70</dd>
      <dd>71</dd> <dd>72</dd> <dd>73</dd> <dd>74</dd> <dd>75</dd>
      <dd>76</dd> <dd>77</dd> <dd>78</dd> <dd>79</dd> <dd>80</dd>
      <dd>81</dd> <dd>82</dd> <dd>83</dd> <dd>84</dd> <dd>85</dd>
      <dd>86</dd> <dd>87</dd> <dd>88</dd> <dd>89</dd> <dd>90</dd>
      <dd>91</dd> <dd>92</dd> <dd>93</dd> <dd>94</dd> <dd>95</dd>
      <dd>96</dd> <dd>97</dd> <dd>98</dd> <dd>99</dd> <dd>100</dd>
    </dl>
  </div>
</body>
</html>

So that it fills the columns out first,

Code:

I've tried all kinds of variations and permutations but most end up with two rows and a zillion columns. What CSS can produce a number of columns based on the variable width of the window and fill by column not row?

Edit: Here is one step closer, but it does not adapt the number of columns to the width of the window:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test</title>
  <style type="text/css" media="screen">
	div {
		grid-auto-flow: column dense;
	}
	div dl {
		grid-template-columns: auto auto auto;
		grid-template-rows: auto auto;
		display: grid;
	}
  </style>
</head>
<body>
  <div>
    <dl>
      <dd>1</dd> <dd>2</dd> <dd>3</dd> <dd>4</dd> <dd>5</dd>
      <dd>6</dd> <dd>7</dd> <dd>8</dd> <dd>9</dd> <dd>10</dd>
      <dd>11</dd> <dd>12</dd> <dd>13</dd> <dd>14</dd> <dd>15</dd>
      <dd>16</dd> <dd>17</dd> <dd>18</dd> <dd>19</dd> <dd>20</dd>
      <dd>21</dd> <dd>22</dd> <dd>23</dd> <dd>24</dd> <dd>25</dd>
      <dd>26</dd> <dd>27</dd> <dd>28</dd> <dd>29</dd> <dd>30</dd>
      <dd>31</dd> <dd>32</dd> <dd>33</dd> <dd>34</dd> <dd>35</dd>
      <dd>36</dd> <dd>37</dd> <dd>38</dd> <dd>39</dd> <dd>40</dd>
      <dd>41</dd> <dd>42</dd> <dd>43</dd> <dd>44</dd> <dd>45</dd>
      <dd>46</dd> <dd>47</dd> <dd>48</dd> <dd>49</dd> <dd>50</dd>
      <dd>51</dd> <dd>52</dd> <dd>53</dd> <dd>54</dd> <dd>55</dd>
      <dd>56</dd> <dd>57</dd> <dd>58</dd> <dd>59</dd> <dd>60</dd>
      <dd>61</dd> <dd>62</dd> <dd>63</dd> <dd>64</dd> <dd>65</dd>
      <dd>66</dd> <dd>67</dd> <dd>68</dd> <dd>69</dd> <dd>70</dd>
      <dd>71</dd> <dd>72</dd> <dd>73</dd> <dd>74</dd> <dd>75</dd>
      <dd>76</dd> <dd>77</dd> <dd>78</dd> <dd>79</dd> <dd>80</dd>
      <dd>81</dd> <dd>82</dd> <dd>83</dd> <dd>84</dd> <dd>85</dd>
      <dd>86</dd> <dd>87</dd> <dd>88</dd> <dd>89</dd> <dd>90</dd>
      <dd>91</dd> <dd>92</dd> <dd>93</dd> <dd>94</dd> <dd>95</dd>
      <dd>96</dd> <dd>97</dd> <dd>98</dd> <dd>99</dd> <dd>100</dd>
    </dl>
  </div>
</body>
</html>

astrogeek · 11-07-2023, 12:02 PM

As no one who actually knows has replied...

I have not worked much with CSS in the past few years, but I dusted off my most recent reference book, The Book Of CSS3, 2015 edition from No Starch Press, and read Chapter 17: Grid Layouts. I have not yet had time to experiment much but from past experience and my review of that text I suggest the following may hold the answer...

Quote:

Implicit Grids

Implicit grids are defined by their contents, rather than the specified length values of explicit grids. When you don't care how many rows or columns there are in your grid, only that each item in the grid has a place, you can use the grid-auto-column and grid-auto-rows properties.

The Book Of CSS3, pg 219

But you do care how many columns.

Quote:

Originally Posted by Turbocapitalist

What CSS can produce a number of columns based on the variable width of the window and fill by column not row?

It seems to me that you may need to use media queries to obtain the viewport width and set an explicit number of columns, or perhaps a minimum number, based on that width, then use the other relevant auto and flow properties to fill the resulting grid.

Hope that helps.