Question

CSS 网格中的自动调整和自动填充无法正常工作，当屏幕宽度变小时，网格应生成新行。相反，轨道会变小并且永远不会生成新行。

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.grid{
    outline: 3px solid;
    width: 90%;
    height: 50px;
    margin: 90px auto;
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat( auto-fit, minmax(300px,1fr));
    grid-auto-flow: column;   
}

.grid__item {
    /--height: 100px/
    background: dodgerblue;
    font-family: sans-serif;
    color: #fff;
    text-align: center;
   /*width: 300px;
     height: var(--height);
    line-height: var(--height);*/
}

.grid__item--one{

}

.grid__item--second{
  background: darkorange;
}
.grid__item--third{
  background: slateblue;
}

.grid__item--fourth{
  background: tomato;
}

<section class="grid"> 
    <div class="grid_item grid_item--one">#1</div>
    <div class="grid_item grid_item--second">#2</div>
    <div class="grid_item grid_item--third">#3</div>
    <div class="grid_item grid_item--fourth">#4</div>
</section>

为什么 CSS 网格不自动生成新行？我遵循互联网上的 YouTube 教程和文档，但似乎没有任何效果。为什么 CSS 网格不自动生成新行？我正在关注 YouTube 教程。和互联网上的文档。似乎没有任何效果。我需要更新什么吗？

Answer 1

这是因为属性 grid-auto-flow。通过提及此属性，您是在告诉 CSS 更改默认的自动流算法。这导致当屏幕尺寸变小时，将所有最小宽度 (300px) 分配给至少一个元素。

删除它使其按预期运行，这是代码：

    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.grid{
    outline: 3px solid;
    width: 90%;
    height: 50px;
    margin: 90px auto;
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(300px,1fr));
}

<section class="grid"> 
        <div class="grid_item grid_item--one">#1</div>
        <div class="grid_item grid_item--second">#2</div>
        <div class="grid_item grid_item--third">#3</div>
        <div class="grid_item grid_item--fourth">#4</div>
    </section>

Answer 2

请检查您的 HTML 代码，因为您使用的是 BEM 表示法，您在网格项中遗漏了下划线。

当我尝试响应网格时，自动调整和自动填充 css 网格不起作用

2 个答案: