Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid布局相关属性以及grid实现媒体查询功能
Blogger Information
Blog 145
fans 7
comment 7
visits 164521
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布局相关属性以及grid实现媒体查询功能
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
856 people have browsed it

grid布局相关属性

Grid容器属性

1、 grid-template-columns/rows：基于列/行定义网格线和轨道大小；常见单位:repeat(int,fr)、px、%
2、 grid-column/row-gap:列和行的间隙（grid-gap|gap）
3、 grid-template-areas:命名网格区域（配合项目的grid-area属性使用）
4、 grid-auto-columns/rows：隐藏网格的列宽和行高
5、 grid-auto-flow:网格项目的流动方向（默认先行后列）值row/column
流动方向为行：可设置隐藏列宽，反之可设置行高
6、 justify/align-content:设置在网格单元在容器中的水平/垂直对其方式，值为：start、center、end、space-between/space-evenly/space-around

简写：place-content：align justify；
7、 justify/align-items:设置项目在网格单元内水平/垂直的对其方式,值为：start、center、end
简写：place-items:align justify;

Grid项目属性：

1、 grid-column/row-start/end:将项目放于行列网格线起始网格域内；
2、 grid-area:将项目防御网格域内或将项目放于顺时针（top-left-bottom-right）网格域内
3、 justify/align-self:设置某一个特定项目在网格中的水平/垂直的对其方式;值为：start、center、end
简写place-self: align justify;

grid的媒体查询与专业的媒体查询有什么区别

1.使用媒体查询:媒体查询能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。
语法：@media 媒体类型 and (媒体特性) {你的样式}
2.grid媒体查询主要通过auto-fit属性自动填充来实现类似媒体查询功能

grid布局实在练习案例:

1.代码部分:

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>仿PHP中文网页面布局</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         ul{
  15.             list-style: none;
  16.         }
  17.         body{
  18.             min-width: 1400px;
  19.         }
  20.         header{
  21.             height: 4rem;
  22.             background-color: lightblue;
  23.         }
  24.         footer{
  25.             height: 10rem;
  26.             background-color: #000000;
  27.             color:white;
  28.         }
  29.         main{
  30.             min-height: 40rem;
  31.             width: 1200px;
  32.             margin: 2rem auto;
  33.             /* background-color: #D3D3D3; */
  34.         }
  35.         main > .main-top{
  36.             display: grid;
  37.             grid-template-columns: 12rem 62rem;
  38.             grid-template-rows: 4rem 18rem 8rem ;
  39.             gap:0.4rem;
  40.             background-color:#8B0000;
  41.             height: 30.8rem;
  42.             place-content: center;
  43.             border-radius: 0.5rem;
  44.         }
  45.         .main-top > .top{
  46.             grid-area: 1 / 2 / 2 / 3;
  47.             display: flex;
  48.             justify-content: center;
  49.             align-items: center;
  50.             background-color: lightgreen;
  51.         }
  53.         .main-top > .top > li{
  54.             width: 8rem;
  55.             text-align: center;
  56.         }
  57.         .main-top > aside{
  58.             background-color: #20B2AA;
  59.             grid-area: span 3 ;
  60.         }
  61.         .main-top > .banner{
  62.             background-color: lightpink;
  63.         }
  64.         .main-top > div:last-child{
  65.             display: grid;
  66.             grid-template-columns: repeat(4,15rem);
  67.             gap:0.5rem;
  68.             margin: 0 auto;
  69.             /* place-content: center; */
  70.         }
  71.         .main-top > div:last-child > .item{
  72.             background-color: lightseagreen;
  73.             border-radius: 0.5rem;
  74.         }
  75.         .container{
  76.             margin-top: 1rem;
  77.             background-color: olive;
  78.             display: grid;
  79.             grid-template-columns: repeat(5,14rem);
  80.             grid-template-rows: 4rem repeat(3,10rem);
  81.             place-content: center space-evenly;
  82.             grid-row-gap:0.4rem ;
  83.             padding-bottom: 1rem;
  84.             border-radius: 0.5rem;
  85.         }
  86.         .container > .item{
  87.             background-color: lightsalmon;
  88.             border-radius: 0.5rem;
  89.         }
  90.         .container > span {
  91.             grid-area: span 1 / span 5;
  92.             text-align: center;
  93.             line-height: 4rem;
  94.         }
  95.         .container > .item:first-of-type{
  96.             grid-area:span 2;
  97.         }
  98.     </style>
  99. </head>
  100. <body>
  101.     <header>页头</header>
  102.     <main>
  103.         <div class="main-top">
  104.             <ul class="top">
  105.                 <li>menu1</li>
  106.                 <li>menu2</li>
  107.                 <li>menu3</li>
  108.                 <li>menu4</li>
  109.                 <li>menu5</li>
  110.                 <li>menu6</li>
  111.                 <li>menu7</li>
  112.                 <input type="text">
  113.             </ul>
  114.             <aside>
  115.                 侧边菜单
  116.             </aside>
  117.             <div class="banner">
  118.                 幻灯片
  119.             </div>
  120.             <div>
  121.                 <div class="item"></div>
  122.                 <div class="item"></div>
  123.                 <div class="item"></div>
  124.                 <div class="item"></div>
  126.             </div>
  127.         </div>
  128.         <!-- 精品课程区 -->
  129.         <div class="container">
  130.             <span>标题</span>
  131.             <div class="item"></div>
  132.             <div class="item"></div>
  133.             <div class="item"></div>
  134.             <div class="item"></div>
  135.             <div class="item"></div>
  136.             <div class="item"></div>
  137.             <div class="item"></div>
  138.             <div class="item"></div>
  139.             <div class="item"></div>
  140.             <div class="item"></div>
  141.             <div class="item"></div>
  142.             <div class="item"></div>
  143.             <div class="item"></div>
  144.             <div class="item"></div>
  145.         </div>
  146.     </main>
  147.     <footer>页脚</footer>
  148. </body>
  149. </html>

2.运行结果:

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