简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > grid 项目在单元中的对齐方式
Blogger Information
Blog 19
fans 0
comment 1
visits 14052
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
997 people have browsed it

grid 的对齐方式

  1. 默认：项目在网格单元中是拉伸的

  2. 只有项目在网格中存在有剩余空间的时候，对齐才有必要

  3. 设置容器中的“所有项目”在网格中的对齐方式 place-items: 第一个参数是垂直方向 第二个参数是水平方向

  4. normal 和 auto 和 start 是一样的都是默认的

  5. 设置容器中的“某一个项目”在网格单元中的对齐方式 place-self： 这个属性必须用在项目上

  6. 网格单元有两种表现形式：单元素， 网格区域（多个单元格组成

  7. 项目在容器中的对齐方式 place-content 只有有剩余空间是才有意义

序号 属性 值 描述
1 place-items start center 垂直向上 水平居中
2 place-items center 垂直水平都居中
3 place-items inherit 继承 继承的默认值
4 place-items initial 初始化
5 place-items unset 如果当前元素有父级 就继承父级 没有父级就继承默认的
6 place-items stretch 拉伸 取消项目的固定尺寸 才有效果
7 place-self center 居中
8 place-content center 项目在容器张的对齐方式
9 place-content space-between 独立个体分散对齐 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>网格容器/网格项目/网格轨道/网格间距</title>
  8.     <style>
  9.         .container {
  10.             border: 1px solid #000;
  11.             display: grid;
  12.             padding: 0.5em;
  13.             grid-template-columns: repeat(1, 3fr);
  14.             grid-template-rows: repeat(2, 5em);
  15.             grid-auto-rows: 5em;
  16.             gap: 0.5em;
  18.         }
  20.         .container>.item {
  21.         /*只有项目在网格中存在有剩余空间的时候，对齐才有必要*/
  22.             width:5em;
  23.             height:2em;
  24.             border: #000 1px solid;
  25.             background-color: antiquewhite;
  26.             padding: 0.5em;
  27.         }
  28.         .container{
  29.             /*垂直向上，水平居中*/
  30.             place-items:start center;
  31.             /*垂直水平都居中*/
  32.             place-items:center;
  33.             /*拉伸*/
  34.             place-items:stretch;
  35.         }
  36.         .container .item:nth-of-type(5){
  37.             background-color:yellow;
  38.             /*居中*/
  39.             place-self:center;
  40.         }
  41.     </style>
  42. </head>
  44. <body>
  45.     <div class="container">
  46.         <span class="item">item1</span>
  47.         <span class="item">item2</span>
  48.         <span class="item">item3</span>
  49.         <span class="item">item4</span>
  50.         <span class="item">item5</span>
  51.         <span class="item">item6</span>
  52.         <span class="item">item7</span>
  53.         <span class="item">item8</span>
  54.         <span class="item">item9</span>
  55.     </div>
  56. </body>
  58. </html>

网格单元

  1. 垂直向上，水平居中 place-items:start center;
    垂直向上，水平居中

  2. 垂直水平都居中 place-items:center
    垂直水平都居中

  3. 拉伸 place-items:stretch
    拉伸

  4. 第五个项目在网格居中显示 place-self:center;
    居中

  5. 网格区域的居中显示
    网格区域居中

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="icon" href="start/images/php.svg">
  8.     <link rel="stylesheet" href="start/font-item/iconfont.css">
  9.     <link rel="stylesheet" href="start/index.css">
  10.     <title>php中文网-教程_手册_视频-免费php在线学习平台</title>
  11.     <style>
  12.     * {
  13.     padding: 0;
  14.     margin: 0;
  15.     box-sizing: border-box;
  16. }
  18. li {
  19.     list-style: none;
  20. }
  22. a {
  23.     text-decoration: none;
  24.     color: #ffffffB3;
  25. }
  27. a:hover {
  28.     color: #ccc;
  29. }
  31. body {
  32.     font-size: 10px;
  33.     background-color: #f3f5f7;
  34. }
  36. header {
  37.     background-color: #000000;
  38.     height: 6em;
  39.     margin-top: 0;
  40.     color: #ffffffB3;
  41.     display: grid;
  42.     grid-template-columns: 14em minmax(101.68em, auto) 1fr;
  43.     gap: 2em;
  44.     place-content: center;
  45. }
  47. header nav:first-child {
  48.     line-height: 6em;
  49. }
  51. header ul li {
  52.     font-size: 1.3em;
  53.     place-items: center end;
  54.     line-height: 6em;
  55. }
  57. header ul li>.iconfont {
  58.     color: #ffffffB3;
  59. }
  61. header ul {
  62.     display: grid;
  63.     grid-template-columns: repeat(9, 1fr);
  64. }
  66. header nav:last-child {
  67.     place-self: center end;
  68. }
  70. header nav:last-child ul {
  71.     display: grid;
  72.     grid-template-columns: 2fr 2fr 1fr;
  73.     place-items: center end;
  74. }
  76. header nav:last-child ul li {
  77.     margin: 0 1em;
  78. }
  80. .icon-laba {
  81.     font-size: 2em;
  82. }
  84. main {
  85.     margin: 3em 25em;
  86.     width: 120em;
  87.     height: 51em;
  88.     /* color: #333333; */
  89.     display: grid;
  90.     grid-template-columns: 20em 1fr;
  91.     grid-template-rows: 6em minmax(33.8em, auto) 10.5em;
  92.     /* margin: 0.5em; */
  93. }
  95. main nav {
  96.     grid-area: span 3;
  97.     background-color: #333333;
  98.     border-radius: 0.7em;
  99. }
  101. main .main-top {
  102.     background-color: #ffffff;
  103.     display: grid;
  104.     grid-template-columns: repeat(7, 1fr) 2fr;
  105.     border-top-right-radius: 0.5em;
  106.     place-items: center;
  107.     /* margin: auto;     */
  108. }
  110. main .main-top li:last-child {
  111.     place-self: center start;
  112. }
  114. main a {
  115.     color: #333333;
  116. }
  118. footer {
  119.     background-color: #000000;
  120.     height: 10em;
  121.     margin-bottom: 0;
  122.     color: antiquewhite
  123. }
  124.     </style>
  125. </head>
  127. <body>
  128.     <header>
  129.         <nav>
  130.             <img src="" alt="logo">
  131.         </nav>
  132.         <ul>
  133.             <li><a href="">首页</a></li>
  134.             <li><a href="">视频教程</a></li>
  135.             <li><a href="">入门教程</a> </li>
  136.             <li><a href="">社区问答</a> </li>
  137.             <li><a href="">技术文章<span class="iconfont icon-xiajiantou"></span></a></li>
  138.             <li><a href="">资源下载<span class="iconfont icon-xiajiantou"></span></a></li>
  139.             <li><a href="">编程词典<span class="iconfont icon-xiajiantou"></span></a></li>
  140.             <li><a href="">工具下载</a></li>
  141.             <li><a href="">PHP培训</a></li>
  142.         </ul>
  143.         <nav>
  144.             <ul>
  145.                 <li>
  146.                     <span class="iconfont icon-laba"></span>
  147.                 </li>
  148.                 <li>
  149.                     <a href="">登录</a>
  150.                 </li>
  151.                 <li>
  152.                     <a href="">注册</a>
  153.                 </li>
  154.             </ul>
  155.         </nav>
  156.     </header>
  157.     <main>
  158.         <nav>导航菜单</nav>
  159.         <ul class="main-top">
  160.             <li>
  161.                 <a href="">PHP头条</a>
  162.             </li>
  163.             <li>
  164.                 <a href="">孤独九剑</a>
  165.             </li>
  167.             <li>
  168.                 <a href="">学习路线</a>
  169.             </li>
  170.             <li>
  171.                 <a href="">在线工具</a>
  172.             </li>
  173.             <li>
  174.                 <a href="">趣味课堂</a>
  175.             </li>
  176.             <li>
  177.                 <a href="">社区问答</a>
  178.             </li>
  179.             <li>
  180.                 <a href="">课程直播</a>
  181.             </li>
  182.             <li><input type="text" placeholder="请输入关键词"></li>
  183.         </ul>
  184.         <div class="baner">轮播图</div>
  185.         <ul>
  186.             <li></li>
  187.             <li></li>
  188.             <li></li>
  189.             <li></li>
  190.             <li></li>
  191.             <li></li>
  192.         </ul>
  193.     </main>
  194.     <footer>页脚</footer>
  195. </body>
  197. </html>

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：grid相对于flex是全新的，属性众多，好好干
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！