search

博客列表 >隐式网格布局学习

隐式网格布局学习

白鸽
白鸽原创
2022年10月29日 21:22:18414浏览

grid隐式网格布局的学习

本次案例，新学习的grid布局方式，完全用这种方式来把各个不同的功能块罗列出来。本次只是熟悉了基本的使用方法。
隐式布局

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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隐士网格布局案例</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         html{
  15.             font-size: 100px;
  16.         }
  17.         body{
  18.             font-size: 0.16rem;
  19.         }
  20.         .box{
  21.             margin: auto;
  22.             display: grid;
  23.             width: 12rem;
  24.             grid-auto-columns: repeat(12,1fr);
  25.             grid-auto-rows: repeat(12,1fr);
  26.             grid-auto-flow: row;
  27.             gap:0.05rem;
  28.         }
  29.         .header{
  30.             height: 1rem;
  31.             grid-column:1/span 12;
  32.             background-color: cornflowerblue;
  33.         }
  34.         .nav{
  35.             height: 0.5rem;
  36.             grid-column:1/span 12;
  37.             background-color:chocolate;   
  38.         }
  39.         .minibox{
  40.             height: 0.2rem;
  41.             grid-column: 1/span 12;
  42.         }
  43.         .menu{
  44.             height: 5rem;
  45.             grid-column:1/span 3;
  46.             grid-row:4/span 5;
  47.             background-color: darksalmon;
  48.         }
  49.         .banner{
  50.             height: 3rem;
  51.             grid-column:4/span 6;
  52.             grid-row:4/span 3;
  53.             background-color: gray;
  54.         }
  55.         .user{
  56.             height: 3rem;
  57.             grid-column:10/span 3;
  58.             grid-row: 4/span 3;
  59.             background-color: magenta;
  60.         }
  61.         .ad1{
  62.             grid-column: 4/span 9;
  63.             grid-row: 6/span 3;
  64.             background-color: lime;
  66.         }
  67.         .left{
  68.             grid-column: 1/span 4;
  69.             grid-row:10/span 1;
  70.             background-color:blueviolet;
  71.         }
  72.         .center{
  73.             grid-column: 5/span 4;
  74.             grid-row:10/span 1;
  75.             background-color:green;
  76.         }
  77.         .right{
  78.             grid-column: 9/span 4;
  79.             grid-row:10/span 1;
  80.             background-color: goldenrod;
  81.         }
  82.         .footer{
  83.             height: 2rem;
  84.             grid-column: 1/span 12;
  85.             background-color: black;
  86.         }
  87.         }
  88.     </style>
  89. </head>
  90. <body>
  91.     <div class="box">
  92.         <div class="header">我是头部我跨越了12栏</div>
  93.         <nav class="nav">我是导航我跨越了12栏</nav>
  94.         <div class="minibox"> </div>
  95.         <div class="menu">item-4</div>
  96.         <div class="banner">item-5</div>
  97.         <div class="user">item-6</div>
  98.         <div class="ad1">item-7</div>
  99.         <div class="minibox">item-8</div>
  100.         <div class="left">item-9</div>
  101.         <div class="center">item-10</div>
  102.         <div class="right">item-11</div>
  103.         <div class="footer">item-12</div>
  104.         <div class="item">item-13</div>
  106.     </div>
  108. </body>
  109. </html>
上一条：grid的项目布置知识学习下一条：flex容器与项目
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多