问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

grid布局对float和flex综合使用问题？

头像
北山鸟
    55
    新手上路，请多包涵

    我希望grid能有float的排列方式，grid自己的对齐方式。
    目前grid试了很多种设置都搞不出来，可能自己没整明白，希望高手帮助，非常感谢。

    需求是，grid的行列值随子项的内容或设置决定，不要在grid容器设置。

    float的排列合适，有空位，自动补齐，特别是第‘5’块后；但是对齐方式不方便，希望用grid或flex的属性

    flex的对齐方式方便，但是排列会浪费空间，特别是第‘10’块，第二行的高度以第‘5’块为准，就浪费了空间，不能塞进去，不好

    前端gridfloatflex布局
    阅读 1.9k
    1 个回答
    得票最新
    头像
    拉格朗日的假日
      1.6k1214

      当然可以实现

      grid-auto-flow 属性实现

      • grid-auto-flow 属性：这个属性用于指定网格容器中项目的排列顺序，默认值是 "row"，表示按照从左到右、从上到下的顺序排列项目。当我们将其设置为 dense 时，在填充网格时会优先考虑空缺较小的位置，从而实现更好的利用空间，并可能导致 自动换行
      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网格布局</title>
        <style>
            .container {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                grid-gap: 10px;
                grid-auto-flow: dense;
            }

            .container > div {
                background-color: #00acec;
            }
        </style>
    </head>
    <body>
        <div class="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>
    </body>
</html>

      媒体查询实现

      • 传统的媒体查询做法，根据不同宽度自己调整网格的行列大小

        @media (max-width: 768px) {
  .container {
      display: grid;
      /* 在小屏幕下改变网格模板 */
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题