前端css网格布局----行列属性

叶不休

于 2024-08-26 22:26:48 发布

阅读量877

点赞数 25

分类专栏：前端文章标签：前端 css css3 html html5 chrome firefox

本文链接：https://blog.csdn.net/weixin_58694594/article/details/141573954

版权

前端专栏收录该内容

123 篇文章 1 订阅

订阅专栏

固定值方式

尽量撑满宽和高

三行三列

grid-template-rows: 200px 200px 200px;

grid-template-columns: 200px 200px 200px;

百分比方式

四行四列

grid-template-rows: 25% 25% 25% 25%;

grid-template-columns: 25% 25% 25% 25%;

repeat(重复几次，数值) 3行3列

grid-template-columns: repeat(3,33.33%);

grid-template-rows: repeat(3,33.33%);

fr自适应片段

grid-template-rows: 100px 1fr 300px;

grid-template-columns: 100px 1fr 300px;

左边100，右边300，中间自适应就是1fr

minmax 最小，最大

grid-template-rows: minmax(100px,200px) 200px 300px;

grid-template-columns: 200px 200px 200px;

auto 占满剩余的空间

和之前的fr差不多

grid-template-rows: 100px 200px auto;

grid-template-columns: 100px 200px auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            height: 600px;
            border: 5px solid gray;
            display: grid;
            /* 1.固定值 */
            /* grid-template-rows: 200px 200px 200px;
            grid-template-columns: 200px 200px 200px; */
            /* 3行3列把宽和高600分成3个200 */

            /* 2.四行四列 */
            /* grid-template-rows: 25% 25% 25% 25%;
            grid-template-columns: 25% 25% 25% 25%; */



            /* 3.repeat(重复几次，数值)  3行3列 */
            /* grid-template-columns: repeat(3,33.33%);
            grid-template-rows: repeat(3,33.33%); */


            /* 4.repeat auto-fill自动分割四行四列 */
            /* grid-template-columns: repeat(auto-fill,25%);
            grid-template-rows: repeat(auto-fill,25%); */

            /* 5.fr自适应片段 */
            /* grid-template-rows: 100px 1fr 300px; */
            /* 左边100，右边300，中间自适应就是1fr */
            /* grid-template-columns: 100px 1fr 300px; */

            /* 6.minmax 最小，最大*/

            /* grid-template-rows: minmax(100px,200px) 200px 300px;
            grid-template-columns: 200px 200px 200px; */

            /* 7.auto 占满剩余的空间*/
            grid-template-rows: 100px 200px  auto;
            grid-template-columns: 100px 200px  auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <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>