grid应用之响应式布局

syt_10132025-12-05 12:21

css 复制代码

 <style>
        .container{
            background-color:pink;
            padding:20px;
            /* height:500px; */
            display:grid;
            /* grid-template-columns:repeat(4,100px); */

            /* grid-template-columns:1fr 2fr 3fr 4fr; */
            /* grid-template-columns:repeat(4,1fr); */
            /* grid-template-columns:2fr repeat(4,1fr) 3fr; */
            /* 显式网格的设置 */
            /* grid-template-columns:repeat(4,1fr); */


            /* 尽可能多的展示多个列，可以用来做响应式布局 */
            grid-template-columns:repeat(auto-fill,minmax(100px,1fr));

            /* auto-fill 和 auto-fit 仅仅在只有一行的情况下是不同的，
            如果超过一行，他两个的效果是一样的
            auto-fill如果只有一行的的情况下，子元素会充满这一行的容器，而auto-fill则不会
            */
            /* grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); */


            grid-template-rows:repeat(3,100px);
            gap:10px;
            /* 隐式网格的设置 */
            /* grid-auto-rows: 50px; */
            /* grid-auto-rows: auto; */
            /* 下面表示最小高度80px,超出的自适应 */
            grid-auto-rows: minmax(80px, auto);
        }
        .item{
            background:  rgba(255, 213, 0, 0.53);
            border:1px solid;
            /* text-align: center; */
            display:flex;
            justify-content: center;
            align-items: center;
        }
    </style>

html 复制代码

<div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
        <div class="item">19</div>
        <div class="item">20</div>
        <div class="item">21</div>
        <div class="item">22</div>
        <div class="item">23</div>
        <div class="item">24</div>
        <div class="item">25</div>
        <div class="item">26</div>
        <div class="item">27</div>
        <div class="item">28</div>
        <div class="item">29</div>
        <div class="item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis velit nemo exercitationem animi provident, fugiat voluptas tempore neque eum quis, minima ullam culpa quibusdam illo voluptatum asperiores corporis dolore natus.</div>
    </div>

非原创，内容来源渡一袁老师，简单记录下