search

博客列表 >css中grid属性基本写法和演示代码

css中grid属性基本写法和演示代码

kiraseo_wwwkiraercom
kiraseo_wwwkiraercom原创
2022年07月14日 12:08:07374浏览

grid属性1行2列效果

演示代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>利用grid属性1行2列效果</title>
  8. </head>
  9. <body>
  10.     <div class="box">
  11.         <div class="item">1</div>
  12.         <div class="item">2</div>
  13.         <div class="item">3</div>
  14.         <div class="item">4</div>
  15.         <div class="item">5</div>
  16.         <div class="item">6</div>
  17.         <div class="item">7</div>
  18.         <div class="item">8</div>
  19.         <div class="item">9</div>
  20.     </div>
  21.     <style>
  22.         .box{
  23.             background-color: blueviolet;
  24.             display: grid;
  25.             grid-template-columns: repeat(3,1fr);
  26.             grid-template-rows: repeat(3,1fr);
  27.         }
  28.         .box >.item{
  29.         height: 10em;
  30.             border:1px solid red ;
  31.             background-color: yellow;
  32.             /*从1行1列开始  横跨2行 2列*/
  33.             grid-area: 1 /1  / span 2  / span 2;  
  34.         }
  35.     </style>
  36. </body>
  37. </html>

演示效果

一列2行

利用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>利用grid属性来写简易响应式布局</title>
</head>

<body>
<div class="box">
<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>
<style>
{
padding: 0;margin: 0;box-sizing: border-box;
}
.box{
background-color: blueviolet;
/ 容器布局 /
display: grid;
/ 显示生成响应式网格单元 /
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
/行列间隙1em/
gap:1em ;
/ 居中对齐方式 */
place-content: center; 

  1.     }
  2.     .box >.item{
  3.         height: 12em;
  4.         background-color: yellow;
  5.         /* 从1行1列开始  横跨2行 2列*/
  6.         /* grid-area: 1 /1  / span 2  / span 2;  */
  7.         /* 排列方式规则  列表对齐 */
  8.         grid-auto-flow: row;
  9.     }
  10. </style>

</body>
</html>
```

演示效果图

演示效果

上一条：实例演示flex常用的6个属性下一条：Flex弹性盒子常用的6个属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多