Heim > Fragen und Antworten > Hauptteil
P粉8212742602023-08-28 13:45:30
对于根据需要创建新列且未定义行的垂直流动网格,请考虑使用 CSS 多列布局(示例)。 CSS 网格布局(至少当前实现 - 级别 1)无法执行此操作任务。问题是这样的:
在 CSS 网格布局中,grid-auto-flow
和 grid-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: row
和 grid-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:column
和grid-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
属性