Heim  >  Fragen und Antworten  >  Hauptteil

Lassen Sie den Rastercontainer Spalten statt Zeilen füllen

<p>Ich möchte, dass sich mein Raster vertikal wie folgt füllt: </p> <pre class="brush:php;toolbar:false;">1 4 7 2 5 8 3 6 9 ... beliebig viele zusätzliche Zeilen.</pre> <p>Stattdessen wird es horizontal wie folgt gefüllt: </p> <pre class="brush:php;toolbar:false;">1 2 3 4 5 6 7 8 9</pre> <p><strong>Ich möchte die Anzahl der Spalten im Raster angeben, nicht die Anzahl der Zeilen. </strong></p> <p>So sieht mein Div mit Inline-CSS-Stil aus: </p> <p><br /></p> <pre class="snippet-code-html lang-html Prettyprint-override"><code><div style="display:grid; grid-template-columns:1fr 1fr 1fr;"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div></code></pre> <p><br /></p> <p>Es ist wichtig, dass das Raster drei Spalten breit ist, aber ich möchte, dass die Elemente Spalten und nicht Zeilen ausfüllen. Ist das im CSS-Raster möglich? Ich habe dies https://css-tricks.com/snippets/css/complete-guide-grid/ gelesen, sehe aber nichts über die Reihenfolge. </p> <p>CSS Flexbox hat <code>flex-direction</code>, hat CSS Grid nicht eine ähnliche Eigenschaft? </p>
P粉551084295P粉551084295442 Tage vor469

Antworte allen(1)Ich werde antworten

  • P粉821274260

    P粉8212742602023-08-28 13:45:30

    对于根据需要创建新列且未定义行的垂直流动网格,请考虑使用 CSS 多列布局示例)。 CSS 网格布局(至少当前实现 - 级别 1)无法执行此操作任务。问题是这样的:

    在 CSS 网格布局中,grid-auto-flowgrid-template-rows / grid-template-columns< /code> 属性。

    更具体地说,如果同时定义了grid-auto-flow: row(默认设置)和grid-template-columns,网格项可以在水平方向上很好地流动,根据需要自动创建新行。这个概念在问题的代码中得到了说明。

    #container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-flow: row;
    }
    <div id="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>

    但是,切换到grid-template-rows后,网格项会堆叠在单列中。

    #container {
      display: grid;
      grid-template-rows: 1fr 1fr 1fr;
      grid-auto-flow: row;
    }
    <div id="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>

    使用 grid-auto-flow: rowgrid-template-rows 不会自动创建列。必须定义grid-template-columns(因此,与grid-auto-flow呈反比关系)。

    #container {
      display: grid;
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-flow: row;
    }
    <div id="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>

    相反的情况下也有同样的行为。

    定义了grid-auto-flow:columngrid-template-rows后,网格项可以在垂直方向上很好地流动,并根据需要自动创建新列。

    #container {
      display: grid;
      grid-template-rows: 1fr 1fr 1fr;
      grid-auto-flow: column;
    }
    <div id="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>

    但是,切换到grid-template-columns后,网格项会堆叠在一行中。 (这是大多数人问的问题,包括在这个问题中。)

    #container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-flow: column;
    }
    <div id="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>

    不会自动创建行。这需要定义grid-template-rows。 (这是最常提供的解决方案,但通常会被拒绝,因为布局的行数是可变的。)

    #container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-auto-flow: column;
    }
    <div id="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>

    因此,请考虑采用多列布局解决方案,如上所述。

    规范参考:7.7。自动放置:grid-auto-flow 属性

    Antwort
    0
  • StornierenAntwort