search

博客列表 >grid布局中的对齐方式

grid布局中的对齐方式

手机用户1607314868
手机用户1607314868原创
2020年12月26日 19:13:164826浏览

grid布局中的对齐方式

对齐方式分为两大类，一是项目在网格单元内的对齐方式，而是项目在容器内的对齐方式

项目在网格单元内的对齐方式

在声明了grid布局容器内使用place-items:垂直 水平;属性
注意：垂直方向：start 代表上 center 中 end 下
水平方向：start 代表左 center中 end 右
如果垂直方向和水平方向值一样可以只写一个

单独设置某个项目的对齐方式

使用place-self:垂直 水平；属性

  1. <style>
  2.         .container{
  3.          border: 1px solid #000;
  4.          padding: .5em;
  5.          display: grid;
  6.         grid-template-columns: repeat(3,1fr);
  7.         grid-template-rows: repeat(2,5em);
  8.         grid-auto-rows: 5em;
  9.         gap: 0.5em;
  10.     }
  11.     .container>.item{
  12.         background-color: lightcyan;
  13.         border: 1px solid #000;
  14.         padding: 0.5em;
  15.     }
  16.     .container>.item{
  17.         width: 5em;
  18.         height: 2em;
  19.     }
  20.     /* 项目在网格单元的对齐方式 */
  21.     .container{
  22.         /* place-items:垂直方向，水平方向 */
  23.         /* 垂直向上，水平居中 */
  24.         place-items: start center;
  25.         /* 垂直水平+都居中  当第一个值和第二个值一样可以省略*/
  26.         place-items: center;
  27.         /* 继承 */
  28.         place-items: inherit;
  29.         /* 初始化 */
  30.         place-items: initial;
  31.         /* 取消项目的固定尺寸，拉伸 */
  32.         place-items: stretch;
  34.     }
  35.     /* 单独设置项目的对齐方式 */
  36.     .container>.item:nth-of-type(5){
  37.         background-color: yellow;
  38.         /* 垂直居中 */
  39.         place-self: center center;
  40.         place-self: end start;
  42.     }
  43. </style>
  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>

项目在容器内的对齐方式

使用属性：place-content

  • 将所有项目作为一个整体在容器中的对齐方式
  • 将所有项目打散成一个个独立个体在容器中设置对齐方式
    注意：容器必须留有剩余空间，否则无法分配
  1. <style>
  2.      .container{
  3.          height: 25em;
  4.          border: 1px solid #000;
  5.          padding: 0.5em;
  6.          display: grid;
  7.          /* 宽度得是固定值，得有剩余空间才能分配 */
  8.         grid-template-columns: repeat(3,10em);
  9.         grid-template-rows: repeat(2,5em);
  10.         grid-auto-rows: 5em;
  11.         gap: 0.5em;
  12.      }
  13.        /* 项目在网格容器的对齐方式 */
  14.     .container{
  15.         /* 1.将所有项目作为一个整体在容器中对齐 */
  16.         place-content: start start;
  17.         place-content: start center;
  18.         place-content: center;
  19.         /* 2.将所有项目打散成一个个独立个体在容器中设置对齐方式 */
  20.         /* 水平垂直 两端对齐 */
  21.          place-content: space-between space-between;
  22.          /* 垂直分散对齐  水平平均对齐*/
  23.          place-content: space-around space-evenly;
  24.     }
  25. </style>

php中文网的布局




  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>php中文网首页</title>
  7.     <style>
  8.         *{
  9.           margin: 0;
  10.           padding: 0;  
  11.           box-sizing: border-box;        
  12.         }
  13.        li{
  14.            list-style: none;
  15.        }
  16.        a{
  17.            color:#444;
  18.            text-decoration: none;
  19.        }
  20.        header{
  21.            height: 60px;
  22.            background-color:gray;
  23.            margin-bottom: 30px;
  24.        }
  25.        header>ul.hnav{
  26.            display: grid;
  27.            grid-template-columns: repeat(8,1fr);
  28.            grid-template-rows: 60px;
  29.            place-items: center;
  30.        }
  31.        footer{
  32.             height: 160px;
  33.             color:#EEE;
  34.             background-color: #444;
  35.         }
  36.        .main-top{
  37.           width: 1200px;
  38.           height: 510px;
  39.           display: grid;
  40.           grid-template-columns: 216px 1fr;
  41.           grid-template-rows: 60px 1fr 120px;
  42.           margin: auto;
  43.        }
  44.        .main-top>nav.menus{
  45.            background-color: lightgreen;
  46.            grid-area: span 3;
  47.            border-radius: 10px 0 0 10px;
  48.        }
  49.       .main-top>ul.nav{
  50.         background-color: lightcyan;
  51.           display: grid;
  52.           grid-template-columns: repeat(8,83px) 1fr;
  53.           place-items: center;
  54.       }
  55.       .main-top>ul.nav>li:last-of-type{
  56.             place-self: center start;
  57.             padding-left: 30px;
  58.         }
  59.      .main-top>ul.course{
  60.         background-color: wheat;
  61.          display: grid;
  62.          padding:10px;
  63.          grid-template-columns: repeat(4,1fr);
  64.          gap: 10px;
  65.      }
  66.      .main-top>ul.course>*{
  67.         background-color: violet;
  68.         cursor: pointer;
  69.      }
  70.      /* 横图 */
  71.       .row-image{
  72.           height: 80px;
  73.           margin-top: 20px;
  74.           background-color: lightslategray;
  75.           margin: auto;
  77.       }
  78.       .row-image h1{
  79.         text-align: center;
  80.         line-height:80px;
  81.         color: white;
  82.       }
  83. /* ------------------------------------------------------------------------------------------ */
  84.       .recommend{
  85.           width: 1200px;
  86.           height: 446px;
  87.           background-color: yellowgreen;
  88.           margin-top: 20px;
  89.           display: grid;
  90.           grid-template-columns: 300px 1fr 260px;
  91.           padding: 15px;
  92.           gap: 10px;
  93.           margin: auto;
  94.       }
  95.       .recommend .article{
  96.           background-color: lightcyan;
  97.           display: grid;
  98.           grid-template-rows:36px 1fr;
  99.           padding: 15px;
  100.       }
  101.       .recommend .article h4{
  102.           margin-left: 10px;
  103.       }
  104.       .recommend .article>ul.artul{
  105.         display: grid;
  106.         grid-template-rows: repeat(12,1fr);    
  107.       }
  108.       /* ----------------------------------- */
  109.       .recommend .course{
  110.           background-color: lightcyan;
  111.           display: grid;
  112.           grid-template-rows:36px 1fr;
  113.           padding: 15px;
  114.       }
  115.       .recommend .course h4{
  116.           margin-left: 10px;
  117.       }    
  118.       .recommend .course>ul.cou-list{
  119.           display: grid;
  120.           grid-template-columns: repeat(3,1fr);
  121.           grid-template-rows: repeat(2,1fr);
  122.           gap: 20px;
  123.       }
  124.       .recommend .course>ul.cou-list>*{
  125.             background-color: lightgreen;
  126.             border-radius: 10px;
  127.       }  
  129. /* ------------------------------------ */
  132.       .recommend .manual{
  133.           background-color: lightcyan;
  134.           display: grid;
  135.           grid-template-rows:36px 1fr;
  136.           padding: 15px;
  137.       }
  138.       .recommend .manual>div:first-of-type{
  139.           margin-left: 10px;
  140.           display: flex;
  141.           justify-content: space-between;
  142.       }
  143.       .recommend .manual>ul.man-list{
  144.           display: grid;
  145.           grid-template-rows: repeat(6,1fr);
  147.       }  
  148.       .recommend .manual>ul.man-list>li{
  149.           display: grid;
  150.           grid-template-columns: 50px 1fr;
  151.           gap: 10px;
  152.           margin-bottom: 10px;
  153.       }
  154.       .recommend .manual>ul.man-list>li>img{
  155.           background-color: lightsalmon;
  156.       }
  157.       .recommend .manual>ul.man-list>li>a{
  158.           place-self: center start;
  159.       }
  161. /* ---------------------------------------------------------------------- */
  162.      .main-courses{
  163.            width: 1200px;
  164.            height: 646px;
  165.            padding: 15px;
  166.            background-color: lightskyblue;
  167.            margin: 30px auto;
  168.            display: grid;
  169.            grid-template-rows: 50px 1fr;
  170.            gap:20px;
  171.         }
  172.         .main-courses h3{
  173.             color:#444;
  174.             text-align: center;
  175.             margin-bottom: 30px;
  176.         }
  177.         .main-courses .course-list{
  178.           display: grid;
  179.           grid-template-columns: repeat(5,1fr);
  180.           grid-template-rows: repeat(3,1fr);
  181.           gap: 20px;
  182.         }
  183.         .main-courses .course-list>*{
  184.             background-color: lightcyan;
  185.             border-radius: 10px;
  186.         }
  187.         .main-courses .course-list>li:first-of-type{
  188.             grid-area: span 2;
  189.         }
  190.     </style>
  191. </head>
  192. <body>
  193.     <header>
  194.         <ul class="hnav">
  195.             <li><a href="">item1</a></li>
  196.             <li><a href="">item2</a></li>
  197.             <li><a href="">item3</a></li>
  198.             <li><a href="">item4</a></li>
  199.             <li><a href="">item5</a></li>
  200.             <li><a href="">item6</a></li>
  201.             <li><a href="">item7</a></li>
  202.             <li><a href="">item8</a></li>
  203.         </ul>
  204.     </header>
  205.     <div class="main-top">
  206.        <nav class="menus">菜单组</nav>
  207.        <!-- 顶部菜单 -->
  208.        <ul class="nav">
  209.            <li><a href="">item1</a></li>
  210.            <li><a href="">item2</a></li>
  211.            <li><a href="">item3</a></li>
  212.            <li><a href="">item4</a></li>
  213.            <li><a href="">item5</a></li>
  214.            <li><a href="">item6</a></li>
  215.            <li><a href="">item7</a></li>
  216.            <li><a href="">item8</a></li>
  217.            <li><input type="text" placeholder="输入关键字"></li>
  218.        </ul>
  219.        <div class="slider">轮播图</div>
  220.         <!-- 底部课程推荐 -->
  221.         <ul class="course">
  222.             <li><a href=""><img src="" alt=""></a></li>
  223.             <li><a href=""><img src="" alt=""></a></li>
  224.             <li><a href=""><img src="" alt=""></a></li>
  225.             <li><a href=""><img src="" alt=""></a></li>
  226.         </ul>
  227.     </div>
  228.    <div class="row-image">
  229.        <h1>php编程就业班</h1>
  230.    </div> 
  231.    <div class="recommend">
  232.        <div class="article">
  233.            <h4>头条</h4>
  234.            <ul class="artul">
  235.                <li><a href="">php中文网原创视频公益php</a></li>
  236.                <li><a href="">php中文网原创视频公益php</a></li>
  237.                <li><a href="">php中文网原创视频公益php</a></li>
  238.                <li><a href="">php中文网原创视频公益php</a></li>
  239.                <li><a href="">php中文网原创视频公益php</a></li>
  240.                <li><a href="">php中文网原创视频公益php</a></li>
  241.                <li><a href="">php中文网原创视频公益php</a></li>
  242.                <li><a href="">php中文网原创视频公益php</a></li>
  243.                <li><a href="">php中文网原创视频公益php</a></li>
  244.                <li><a href="">php中文网原创视频公益php</a></li>
  245.                <li><a href="">php中文网原创视频公益php</a></li>
  246.                <li><a href="">php中文网原创视频公益php</a></li>
  247.            </ul>
  248.        </div>
  249.        <div class="course">
  250.            <h4>最新课程</h4>
  251.            <ul class="cou-list">
  252.                <li><a href=""><img src="" alt=""></a></li>
  253.                <li><a href=""><img src="" alt=""></a></li>
  254.                <li><a href=""><img src="" alt=""></a></li>
  255.                <li><a href=""><img src="" alt=""></a></li>
  256.                <li><a href=""><img src="" alt=""></a></li>
  257.                <li><a href=""><img src="" alt=""></a></li>
  258.            </ul>
  259.        </div>
  260.        <div class="manual">
  261.            <div><h4>常用手册</h4><span>更多</span></div>
  262.            <ul class="man-list">
  263.                <li><img src="" alt=""><a href="">item1</a></li>
  264.                <li><img src="" alt=""><a href="">item2</a></li>
  265.                <li><img src="" alt=""><a href="">item3</a></li>
  266.                <li><img src="" alt=""><a href="">item4</a></li>
  267.                <li><img src="" alt=""><a href="">item5</a></li>
  268.                <li><img src="" alt=""><a href="">item6</a></li>
  269.            </ul>
  270.         </div>
  271.    </div>
  272.     <!-- 课程列表区 -->
  273.     <div class="main-courses">
  274.         <h3>php入门精品课程</h3>
  275.         <ul class="course-list">
  276.             <li><a href=""><img src="" alt=""></a></li>
  277.             <li><a href=""><img src="" alt=""></a></li>
  278.             <li><a href=""><img src="" alt=""></a></li>
  279.             <li><a href=""><img src="" alt=""></a></li>
  280.             <li><a href=""><img src="" alt=""></a></li>
  281.             <li><a href=""><img src="" alt=""></a></li>
  282.             <li><a href=""><img src="" alt=""></a></li>
  283.             <li><a href=""><img src="" alt=""></a></li>
  284.             <li><a href=""><img src="" alt=""></a></li>
  285.             <li><a href=""><img src="" alt=""></a></li>
  286.             <li><a href=""><img src="" alt=""></a></li>
  287.             <li><a href=""><img src="" alt=""></a></li>
  288.             <li><a href=""><img src="" alt=""></a></li>
  289.             <li><a href=""><img src="" alt=""></a></li>
  290.         </ul>
  291.     </div>
  292.     <footer>页脚</footer>
  293. </body>
  294. </html>

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

grid的媒体查询兼容性有问题
media媒体查询兼容性强，但需要写多个媒体查询

上一条：项目在网格单元中和容器中的对齐方式下一条：CSS弹性盒子布局---仿京东手机版页面
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多