grid网格布局

最新推荐文章于 2024-05-14 00:59:57 发布
最新推荐文章于 2024-05-14 00:59:57 发布
阅读量2.2k 收藏 12
点赞数 1
文章标签： c# 开发语言 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITher/article/details/122330827
版权

一、什么是grid网格布局？

Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局。

1、使用方法

设置CSS属性display：grid或display：inlne-grid来实现

grid属性
grid-rows同时设置行和列
grid-template-columns设置列
grid-template-rows设置行

示例：

<!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>
</head>
<style>
    .container{
        width: 1000px;
       height: 400px;
       border: 10px solid red;
       margin: auto;
       
    }
    .item{
      background-color: pink;
   }
   .item-1{
       background-color: purple;
   }
   .item-2{
       background-color: red;
   }
   .item-3{
       background-color: rosybrown;
   }
   .item-4{
       background-color: salmon;
   }
   .item-5{
       background-color: slateblue;
   }
   .item-6{
       background-color: blue;
   }
   .item-7{
          background-color: green;
   }
   .item-8{
       background-color: greenyellow;
   }
   .item-9{
       background-color: grey;
   }
</style>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
     </div>
</body>
</html>

 可以看到在没设置网格布局时，9个div并没有将容器铺满，还有很多的剩余空间。而设置了grid后就可以让9个div铺满容器。

示例：

<!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>
</head>
<style>
    .container{
        width: 1000px;
       height: 400px;
       border: 10px solid red;
       margin: auto;
       
    }
    .item{
      background-color: pink;
   }
   .item-1{
       background-color: purple;
   }
   .item-2{
       background-color: red;
   }
   .item-3{
       background-color: rosybrown;
   }
   .item-4{
       background-color: salmon;
   }
   .item-5{
       background-color: slateblue;
   }
   .item-6{
       background-color: blue;
   }
   .item-7{
          background-color: green;
   }
   .item-8{
       background-color: greenyellow;
   }
   .item-9{
       background-color: grey;
   }
</style>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
     </div>
</body>
</html>

 可以看到在设置了grid以后，9个div平均的铺满了整个容器。

同时也可以利用上面表格中所罗列的属性，对grid的网格进行行与列的分布

例如：

<!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>
</head>
<style>
    .container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: 200px 200px 200px;
       grid-template-rows: 200px 200px 200px;

    }
    .item{
      background-color: pink;
   }
   .item-1{
       background-color: purple;
   }
   .item-2{
       background-color: red;
   }
   .item-3{
       background-color: rosybrown;
   }
   .item-4{
       background-color: salmon;
   }
   .item-5{
       background-color: slateblue;
   }
   .item-6{
       background-color: blue;
   }
   .item-7{
          background-color: green;
   }
   .item-8{
       background-color: greenyellow;
   }
   .item-9{
       background-color: grey;
   }
</style>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
     </div>
</body>
</html>

 在设置中需要注意提前算好需要几行几列。

2、关于gird宽与高的设置

px,cm,mm,rem,em、px常见的设置单位
X%可以使用百分比设置宽高

fr

总共有几个fr，就占比几分之n
repeat(数量，行高)可以统一设置某一行或列的宽高
auto由浏览器自己决定长度。
minmax(最小值,最大值 )定义一个最小宽高以及一个最大宽高。
min content表示网格的轨道长度自适应内容最小的那个单元格

max content

表示网格的轨道长度自适应内容最大的那个单元格

        一般为了方便快捷我们都使用repeat(数量，行高)，只需输入一次就可以让所有的行和列都变成同一高度。

还拿上一个项目示例：

<!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>
</head>
<style>
    .container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,150px);
       grid-template-rows: repeat(3,150px);

    }
    .item{
      background-color: pink;
   }
   .item-1{
       background-color: purple;
   }
   .item-2{
       background-color: red;
   }
   .item-3{
       background-color: rosybrown;
   }
   .item-4{
       background-color: salmon;
   }
   .item-5{
       background-color: slateblue;
   }
   .item-6{
       background-color: blue;
   }
   .item-7{
          background-color: green;
   }
   .item-8{
       background-color: greenyellow;
   }
   .item-9{
       background-color: grey;
   }
</style>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
     </div>
</body>
</html>

在使用repeat(数量，行高)时，仅需输入一遍数值就可以达到同样的效果。

3、网格轨道和轨道之间的距离

        轨道和轨道之间的距离使用的属性主要就是2个： row-gap（行间距）和column-gap（列间距），也可此属性进行简写为gap：行间距 列间距。

例如：

<!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>
</head>
<style>
    .container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,150px);
       grid-template-rows: repeat(3,150px);
       gap: 10px 5px;

    }
    .item{
      background-color: pink;
   }
   .item-1{
       background-color: purple;
   }
   .item-2{
       background-color: red;
   }
   .item-3{
       background-color: rosybrown;
   }
   .item-4{
       background-color: salmon;
   }
   .item-5{
       background-color: slateblue;
   }
   .item-6{
       background-color: blue;
   }
   .item-7{
          background-color: green;
   }
   .item-8{
       background-color: greenyellow;
   }
   .item-9{
       background-color: grey;
   }
</style>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
     </div>
</body>
</html>

 在使用gap进行设置后，可以看到网格的每行和每列都有了一定的间距。

4、内容在容器中的位置

4.1、设置属性

          justify-content：设置的是水平方向
         align-content：设置的是垂直方向

4.2、项目排列属性：

start初始排列（默认属性）
end末尾排列
center居中排列
space－around每个行和列，都均匀排列每个元素 每个元素周围分配相同的空间
space－between每个行和列，都均匀排列每个元素首个元素放置起始，末尾元素放置于末尾
space-evenly每个行和列，都均匀排列每个元素之间的间隔相等
stretch每个行和列，都均匀排列每个元素会被拉伸以适应容器的大小

下面我们进行示例：

4.2.1、设置end属性：

<!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>
</head>
<style>
    .container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,150px);
       grid-template-rows: repeat(3,150px);
       gap: 10px 5px;
       justify-content: end;

    }
    .item{
      background-color: pink;
   }
   .item-1{
       background-color: purple;
   }
   .item-2{
       background-color: red;
   }
   .item-3{
       background-color: rosybrown;
   }
   .item-4{
       background-color: salmon;
   }
   .item-5{
       background-color: slateblue;
   }
   .item-6{
       background-color: blue;
   }
   .item-7{
          background-color: green;
   }
   .item-8{
       background-color: greenyellow;
   }
   .item-9{
       background-color: grey;
   }
</style>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
     </div>
</body>
</html>

4.2.2、 设置center属性：

.container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,150px);
       grid-template-rows: repeat(3,150px);
       gap: 10px 5px;
       justify-content: center;
       align-content: center;

4.2.3、设置space-around属性：

.container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,150px);
       grid-template-rows: repeat(3,150px);
       gap: 10px 5px;
       justify-content: space-around;
       align-content: space-around;

 4.2.4、设置space-between属性：

.container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,150px);
       grid-template-rows: repeat(3,150px);
       gap: 10px 5px;
       justify-content: space-between;
       align-content: space-between;

 4.2.5、设置space-evenly属性：

 .container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,150px);
       grid-template-rows: repeat(3,150px);
       gap: 10px 5px;
       justify-content: space-evenly;
       align-content: space-evenly;

    }

 4.2.6设置stretch属性：

 .container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,150px);
       grid-template-rows: repeat(3,150px);
       gap: 10px 5px;
       justify-content: stretch;
       align-content: stretch;

    }

 5、响应式布局

5.1、什么是响应式布局

        响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

5.2响应式布局属性

可以进行响应式布局在repeat中使用auto-fit或auto-fill。

5.3、auto-fit和auto-fill的共同点：

1.就是尽可能多的创建轨道。

2.然后不足一个轨道的空间平均分配给已有的轨道。

5.4、auto-fit和auto-fill的不同同点：

auto-fit的最后一步是，折叠空轨道，将空轨道的空间全部平均分配给已有元素的轨道。

auto-fill的最后一步时保留空轨道留白，不会折叠空轨道。

注意：auto-fit和auto-fill只有在容器宽度大于子元素的最小宽度总和时才有显示区别。

例如：

<!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>
</head>
<style>
    *{
        padding: 0;
        border: 0;
        padding: 0;
    }
    .container,.container1{
        height: 200px;
        display: grid;
    }
    .container{
    
        grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); 

    }
    .container div{
        border: 1px solid pink;
        font-size: 80px;
    }
    .container1{
        grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); 

    }
    .container1 div{
        border: 1px solid pink;
        font-size: 80px;
    }
</style>
<body>
    <div class="container">
        <!-- 选项 item -->
     <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>
    <div class="container1">
        <!-- 选项 item -->
     <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>
</body>
</html>

 

5、指定项目位置属性

5.1、grid-column-start 属性——列起始
      grid-column-end 属性——列终点
      grid-row-start 属性————行起始
      grid-row-end 属性————行终点

5.2、示例：

.container{
        width: 1000px;
       height: 450px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,100px);
       grid-template-rows: repeat(3,100px);
       gap: 10px 5px;
       font-size: 40px;

    }
    .item{
      background-color: pink;
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 1;
      grid-row-end: 3;

5.3、在使用时也有简洁方便的办法，可以使用span，来表示跨越几个单元格。

例如：

 .container{
        width: 1000px;
       height: 450px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,100px);
       grid-template-rows: repeat(3,100px);
       gap: 10px 5px;
       font-size: 40px;

    }
    .item{
      background-color: pink;
      grid-column-start: span 2;
      grid-row-start: span 2;
   }

 

 同时也可以使用grid-area属性将这4个属性合为一个属性：

 .container{
        width: 1000px;
       height: 450px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,100px);
       grid-template-rows: repeat(3,100px);
       gap: 10px 5px;
       font-size: 40px;

    }
    .item{
      background-color: pink;
      grid-area:1/ 1 / 3 / 3;
   }

5.4、利用grid-template-areas:属性

        首先是对每一个单元格进行命名，默认情况下命名顺序和单元格顺序一致。

<!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>
</head>
<style>
    .container{
        width: 1000px;
       height: 450px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,100px);
       grid-template-rows: repeat(3,100px);
       gap: 10px 5px;
       font-size: 40px;
       grid-template-areas: 'a a c'
                            'a a f'
                            'g h i';

    }
    .item{
      background-color: pink;
      grid-area: a;
   }
   .item-2{
       background-color: red;
   }
   .item-3{
       background-color: rosybrown;
   }
   .item-4{
       background-color: salmon;
   }
   .item-5{
       background-color: slateblue;
   }
   .item-6{
       background-color: blue;
   }
   .item-7{
          background-color: green;
   }
   .item-8{
       background-color: greenyellow;
   }
   .item-9{
       background-color: grey;
   }
</style>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
     </div>
</body>
</html>

        可以看到利用grid-template-areas属性也可以达到同样的效果，但需要注意的是，在使用grid-template-areas属性时每行都需要分号和引号，并且字母与字母之间要空一格。

       grid-template-areas属性还有一项功能，就是可以将项目位置进行调换，例如：

<!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>
</head>
<style>
    .container{
        width: 1000px;
       height: 450px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,100px);
       grid-template-rows: repeat(3,100px);
       gap: 10px 5px;
       font-size: 40px;
       grid-template-areas: 'a b c'
                            'd e f'
                            'g h i';

    }
    .item{
      background-color: pink;
      grid-area: c;
   }
   .item-2{
       background-color: red;
       
   }
   .item-3{
       background-color: rosybrown;
       grid-area: a;
   }
   .item-4{
       background-color: salmon;
   }
   .item-5{
       background-color: slateblue;
   }
   .item-6{
       background-color: blue;
   }
   .item-7{
          background-color: green;
   }
   .item-8{
       background-color: greenyellow;
   }
   .item-9{
       background-color: grey;
   }
</style>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
     </div>
</body>
</html>

 

ITher
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【CSS】grid 布局一行自动填充，每行最大限定px
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-23 480
【代码】【CSS】grid 布局一行自动填充，每行最大限定px。
好用的Grid布局
weixin_45188171的博客
05-24 778
声明: 父元素定义display:grid；此时为一个grid 布局模式 设置子元素的宽度 grid-template-columns: 1fr 1fr 1fr;（一个fr 代表父元素的1/n 份）设置多列重复repeat（3,1fr） repeat(auto-fill,100px ) 每一列都设置100px ;多少列呢? 铺满一整行，如果最后显示不完最后一个则换行（此布局可实现响应式布局） 设置auto 可以使内部元素自适应，如果显示不下会自动换行 部分列宽可设置auto，及自适应，如中间自适应，两边固定
2024年前端最新教你CSS Grid布局实现响应式设计，2024前端面试心得
最新发布
2401_84123077的博客
05-14 605
使用 grid-template-columns 属性创建一个 12 列的网格，每个列都是一个单位宽度（总宽度的 1/12 ）。在页面上看到 3×2 的 grid(网格)，而我们定义的是 3×3 的 grid(网格)。使用 grid-template-rows 属性创建 3 行，第一行高度是 50px ，第二行高度是 350px 和第三行高度是 50px。由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！
【JQuery】table 表格自动滚动的两种效果
新青年1号
09-09 2895
动态效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta h...
网格布局grid
weixin_43465508的博客
04-01 809
css网格是一个用于web的二维（行和列的组合）布局，利用网格，你可以把内容按照行和列的格式进行排版，另外，可以轻松的实现复杂布局。在父元素加上，display:grid 或者display：inline-grid,网格项定义默认为一列，并且网格项的column，float,clear,vertical-align等这些设置全部无效grid：生成块级的网格容器。inline-grid: 生成行内的网格容器。
grid布局 item被内容撑开导致内容划分不等
我是小妖yun的博客
08-08 606
grid布局 当item的行列布局由fr划分时其内容过多会导致item被撑开
css grid网格布局
全易
02-01 451
display: grid; 搭配以下属性，实现完美布局： 1. grid-template-columns grid-template-columns: auto auto auto; 2. grid-template-rows
CSS Grid 网格布局全解析
09-24
《CSS Grid 网格布局全解析》 CSS Grid（网格布局）是现代网页设计中一个强大的工具，它使得创建复杂、响应式的二维布局变得轻松简单。Grid布局摒弃了传统布局模式的限制，让我们可以自由地定义网页的行和列，以及...
CSS Grid 网格布局教程.docx
03-30
CSS Grid 网格布局是现代网页设计中的一个重要工具，它提供了一种高效且灵活的方式来组织页面内容。相比传统的布局方式，如浮动和定位，CSS Grid 提供了二维的布局能力，可以轻松创建复杂的网格系统。 一、CSS Grid...
css的grid网格布局
06-02
grid布局的所有属性
grid网格布局.html
07-05
简单介绍grid怎么使用的
CSS基本布局——grid布局
热门推荐
weixin_52148548的博客
01-06 2万+
grid布局简介： Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。Grid比Flex布局强大。 基本概念： 容器（container）——有容器属性 项目（items）——有项目属性 行（row) 列（column） 间距（gap) ——单元格之间的距离 区域（area）—— 自己划分每个单元格占据的区域 内容（content) ...
比Flex更强大的Grid网格布局
weixin_43443341的博客
12-12 440
相信写过前端对齐布局的前端都知道 Flex 布局，它是一种轴线布局，指定“项目”针对轴线的位置，针对行对齐、列对齐（居中对齐、两端对齐）这些布局场景使用 Flex 布局是一种非常常见且高效的方法。Grid 布局则是将容器分成“行”和“列”，产生单元格，然后指定“项目”所占的单元格，远比 Flex 布局更强大。
Grid布局
qq_40745468的博客
06-02 717
Grid 布局即网格布局，目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系，目前唯一一种 CSS 二维布局。在兼容性方面，截至 目前，几乎所有的浏览器都对 CSSGrid 提供了原生的支持。Grid布局优点：这是一个二维布局系统，最大优点就是可以同时处理列和行Grid 布局和 flex 布局。
CSS样式之grid 布局
li17835756262的博客
09-18 298
Grid布局即网格布局，是一种新的CSS布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。一、概念1、网格容器（Grid Container）：设置了的父元素，成为一个网格容器，它包含了网格的所有单元格。2、网格项目（Grid Item）：直接放置在网格容器内的元素称为网格项目，它们被放置在网格的单元格中。3、网格行（Grid Row）：网格容器被划分为水平的行，可以通过属性来设定行的数量和高度。
10.介绍一下CSS中的Grid网格布局?
kleinBlue.的博客
11-07 715
一、是什么 Grid布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列 擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系 这与之前讲到的flex一维布局不相同 设置display:grid/inline-grid的元素就是网格布局容器，这样就能出发浏览器渲染引擎的网格布局算法 <divclass="container"> <divclass="itemitem-1"> ...
A fuzzy physiological approach for continuously modeling emotion during interaction with play game
JasonSparrow_1的博客
07-02 705
Introduction 传统的针对productivity environments(task表现)的度量手段不能很好的适应目前的affective environments，因为我们现在考虑的不是performance，而是通过现在的游戏环境，能够带给我们什么样的情绪。 Affective evaluation of entertainment technologies 传统的评估情绪的方法...
计算器用gridlayout布局如何满屏？
liwei405499的专栏
12-20 2344
最近用gridlayout做了一个计算器的布局，大体显示出了雏形，但是无法满屏。 不知道如何去修改。先记录下来，以后有机会再完善。 目前的显示效果： layout代码如下： <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="h
tkinter grid网格布局
08-12
Tkinter提供了一个名为`grid`的布局管理器，用于在GUI应用程序中创建网格布局。网格布局将窗口划分为行和列，并允许将小部件放置在指定的行和列中。 以下是一个基本的使用`grid`布局的示例代码： ```python import...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值