search

博客列表 >grid对齐方式

grid对齐方式

小雨丶
小雨丶原创
2021年01月05日 13:46:221044浏览
所有项目在网格中的对齐方式
  1. place-items: 垂直方向 水平方向;// 值为start center end方式
  2. normal是auto的同义词，默认值为start
  4. 类似flex中的对齐
  5. place-content: space-between space-between;// 两端对齐方式between
  6. palace-content: space-around space-evenly;// 环绕对齐方式
  8. inherit继承——将布局变为默认值
  9. place-items: inherit;
  10. place-items: initial;
  11. place-items: unset;
某一个项目在网格中的对齐方式
  1. place-self: 垂直方向 水平方向;// 值为start center end方式
grid 自适应的布局
  1. auto-fit/autofill // 自动填充，根据宽度放项目
  2. grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
  3. grid-tempalate-rows: repeat(auto-fit, minmax(13em, 70%));
  5. grid的响应式是通过grid-template-//布局的时候用repeat(auto-fit,minmax(a,b))函数来操作
  6. 它的原理是利用项目内容自适应宽度，来调整项目内容数量，是一种虚拟的媒体查询
  7. 专业的媒体查询是利用@media监控宽度，来修改项目宽度来达到响应式的目的
自己用grid布局做的一个自适应网站布局

整体是自动收缩的自适应，不是换行的响应式

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.     这里是通用设置
  9.     ------------------------------------
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         html {
  15.             font-size: 10px;
  16.         }
  17.         ul,li{
  18.             list-style: none;
  19.         }
  20.         a{
  21.             text-decoration: none;
  22.         }
  23.         --------------------------
  24.         body{
  25.             display: grid;
  26.             grid-template-columns: 100%;
  27.             grid-template-rows: repeat(3, 6rem 1fr 20rem);
  28.        }
  29.        头部---------------
  30.        header{
  31.            background-color: black;
  32.            color: white;
  33.            display: grid;
  34.            grid-template-columns: 2fr repeat(11, 1fr);
  35.            text-align: center;
  36.            line-height: 6rem;
  37.        }
  38.        header a{
  39.            color: white;
  40.            border: 1px solid white;
  41.        }
  42.        --------------
  43.        main .container{
  44.            background-color: lightblue;
  45.            max-width: 1200px;
  46.            margin: auto;
  47.            display: grid;
  48.            margin-top: 3rem;
  49.            border-radius: 1rem;
  50.            box-shadow: 0 0 10px #ccc;
  51.            overflow: hidden;
  52.        }
  53.        main .nav-banner{
  54.            grid-template-columns: 1fr 5fr;
  55.        }
  56.        左侧导航-----------
  57.        main .nav-banner>nav>a{
  58.            color: white;
  59.            opacity: .6;
  60.            display: grid;
  61.            grid-template-columns: auto 6rem;
  62.        }
  63.        main .nav-banner>nav{
  64.            background-color: #2b333b;
  65.            display: grid;
  66.            grid-template-columns: 20rem;
  67.            grid-template-rows: repeat(8, 6rem);
  68.            line-height: 6rem;
  69.            padding-left: 1.5rem;
  70.            padding-top: 1.2rem;
  71.            height: 51rem;
  72.        }
  73.        --------------
  74.        右侧banner-------------
  75.        .nav-banner .main-content{
  76.            display: grid;
  77.            grid-template-rows: 6rem 33rem 1fr;
  78.        }
  79.        .nav-banner .main-content nav{
  80.            background-color: white;
  81.            display: grid;
  82.            grid-template-columns: repeat(7,1fr) 2fr;
  83.            line-height: 6rem;
  84.            text-align: center;
  85.            padding: 0 1rem;
  86.        }
  87.        .nav-banner .main-content nav input{
  88.            margin: 1rem 0;
  89.        }
  90.        .nav-banner .main-content .banner{
  91.            background-color: lightskyblue;
  92.        }
  93.        .nav-banner .main-content .gg{
  94.            background-color: #007aff;
  95.            display: grid;
  96.            grid-template-columns: repeat(4, 1fr);
  97.            grid-template-rows: 9em;
  98.            gap: 1rem;
  99.            align-content: center;
  100.            padding: 0 0.5rem;
  101.        }
  102.        .nav-banner .main-content .gg span{
  103.            background-color: white;
  104.            border-radius: 1rem;
  105.        }
  106.     </style>
  107. </head>
  108. <body>
  109.     <!-- 页眉 -->
  110.     <header>
  111.         <a href="">logo</a>
  112.         <a href="">nav1</a>
  113.         <a href="">nav2</a>
  114.         <a href="">nav3</a>
  115.         <a href="">nav4</a>
  116.         <a href="">nav5</a>
  117.         <a href="">nav6</a>
  118.         <a href="">nav7</a>
  119.         <a href="">nav8</a>
  120.         <a href="">nav9</a>
  121.         <a href="">喇叭</a>
  122.         <a href="">me</a>
  123.     </header>
  124.     <main>
  125.         <div class="container nav-banner">
  126.             <nav>
  127.                 <a href="">
  128.                     <span>选项</span>
  129.                     <span>&gt;</span>
  130.                 </a>
  131.                 <a href="">
  132.                     <span>选项</span>
  133.                     <span>&gt;</span>
  134.                 </a>
  135.                 <a href="">
  136.                     <span>选项</span>
  137.                     <span>&gt;</span>
  138.                 </a>
  139.                 <a href="">
  140.                     <span>选项</span>
  141.                     <span>&gt;</span>
  142.                 </a>
  143.                 <a href="">
  144.                     <span>选项</span>
  145.                     <span>&gt;</span>
  146.                 </a>
  147.                 <a href="">
  148.                     <span>选项</span>
  149.                     <span>&gt;</span>
  150.                 </a>
  151.                 <a href="">
  152.                     <span>选项</span>
  153.                     <span>&gt;</span>
  154.                 </a>
  155.                 <a href="">
  156.                     <span>选项</span>
  157.                     <span>&gt;</span>
  158.                 </a>
  159.             </nav>
  160.             <div class="main-content">
  161.                 <nav>
  162.                     <a href="">nav1</a>
  163.                     <a href="">nav2</a>
  164.                     <a href="">nav3</a>
  165.                     <a href="">nav4</a>
  166.                     <a href="">nav5</a>
  167.                     <a href="">nav6</a>
  168.                     <a href="">nav7</a>
  169.                     <input type="text">
  170.                 </nav>
  171.                 <div class="banner"></div>
  172.                 <div class="gg">
  173.                     <span></span>
  174.                     <span></span>
  175.                     <span></span>
  176.                     <span></span>
  177.                 </div>
  178.             </div>
  179.         </div>
  180.     </main>
  181.     <footer>footer</footer>
  182. </body>
  183. </html>
上一条：ES6:JS入门基础知识：变量、函数下一条：js基础与函数详解
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多