Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid对齐方式
Blogger Information
Blog 16
fans 0
comment 0
visits 13213
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
grid对齐方式
小雨丶
Original
1043 people have browsed it
所有项目在网格中的对齐方式
  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>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post