search

博客列表 >grid布局之二

grid布局之二

培(信仰)
培(信仰)原创
2021年01月07日 00:26:32526浏览

grid 布局 之 对齐

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

默认项目在网格单元中拉伸显示
只有项目在网格单元中存在剩余空间的时候，对齐才有效果

  1.     <div class="container">
  2.         <div class="item">item1</div>
  3.         <div class="item">item2</div>
  4.         <div class="item">item3</div>
  5.         <div class="item">item4</div>
  6.         <div class="item">item5</div>
  7.         <div class="item">item6</div>
  8.         <div class="item">item7</div>
  9.         <div class="item">item8</div>
  10.         <div class="item">item9</div>
  11.     </div>
  1.     .container{
  2.         border:1px solid #000;
  3.         padding:0.5em;
  4.         display:grid;
  5.         grid-template-columns:repeat(3,1fr);
  6.         grid-template-rows: repeat(2,5em);
  7.         gap:0.5em;
  8.         grid-auto-rows: 5em;
  9.     }
  10.     .container > .item {
  11.         border:1px solid #000;
  12.         background-color: skyblue;
  13.         padding:0.5em;
  14.         width: 5em;
  15.         height: 2em;
  16.     }
  18.    /* 1. 设置容器中的“所有项目”在网格单元中的对齐方式 */
  19.    /* place-items: 垂直方向 水平方向; */
  20.     /* place-items: [start/end/center] [start/end/center]*/
  21.     .container {        
  22.         /* 垂直居上，水平居中 */
  23.         place-items: start center;
  24.         /* 垂直水平居中 */
  25.         place-items: center center;
  26.         /* 当第二个值与第一个值相同时，可以省第二个值 */
  27.         place-items: center;
  28.         /* normal 可以当成默认值*/
  29.         /* place-items: normal center; */
  30.         /* auto 居然是居中的，老师说与normal同义。 */
  31.         place-items: auto center;
  33.         /* 以下用的情况并不多 */
  34.         /* 继承 */
  35.         place-items: inherit;
  36.         /* 初始化 */
  37.         /* place-items: initial; */
  38.         /* unset 如果有父级就用父级的inherit(继承)值，如果没有父级，就用当前的初始值 */
  39.         /* place-items: unset; */
  41.         /* 拉伸，取消项目的固定尺寸才可以看到效果 */
  42.         /* place-items: stretch; */
  44.     }
  46.     /* 2. 设置容器中的“某一个项目”在网格单元中的对齐方式 */
  47.     /* 这个属性必须用在项目上：place-self */
  48.     /* place-self: [start end center] [start end center]*/
  49.     .container > .item:nth-of-type(5) {
  50.         background-color: wheat;
  51.         place-self: end;
  52.     }
  53.     /* 网格单元有两种表现形式，单元格，网格区域（多个单元格组成） */
  54.     .container > .item:first-of-type{
  55.         background-color: green;
  56.         /* grid-area: 1 / 1 / 3 / 3; */
  57.         grid-area: span 2 / span 2;
  58.         place-self: center;
  59.         place-self: end;
  60.     }

项目在网格容器中的对齐方式

  1.     .container{
  2.         height: 25em;
  3.         border:1px solid #000;
  4.         padding:0.5em;
  5.         display:grid;
  6.         grid-template-columns:repeat(3,10em);
  7.         grid-template-rows: repeat(2,5em);
  8.         gap:0.5em;
  9.         grid-auto-rows: 5em;
  10.         /* 默认值 */
  11.         /* 1. 将所有项目作为一个整体在容器中对齐 */
  12.         /* place-content: 垂直方向 水平方向 */
  13.         /* place-content: [start/end/center] [start/end/center]; */
  14.         /* place-content: start end; */
  15.         /* place-content: center; */
  17.         /* 2. 将所有项目打散成独立个体在容器中的设置对齐 */
  18.         /* 两端对齐 */
  19.         place-content: space-between space-between;
  20.         /* 垂直方向分散对齐 */
  21.         place-content: space-around space-between;
  22.         /* 垂直分散对齐，水平平均对齐 */
  23.         place-content: space-around space-evenly;
  24.     }
  25.     .container > .item {
  26.         border:1px solid #000;
  27.         background-color: skyblue;
  28.         padding:0.5em;
  29.     }

使用命名式的网格区域来重构圣杯布局

  1. <body>
  2.     <header>
  3.         header
  4.     </header>
  5.     <main>main</main>
  6.     <aside >aside</aside>
  7.     <aside >asider</aside>
  8.     <footer>footer</footer>
  9. </body>
  1.         * {
  2.             margin: 0;
  3.             padding: 0;
  4.             box-sizing: border-box;
  5.         }
  7.         body * {
  8.             border: 1px solid #000;
  9.         }
  11.         body {
  12.             /* 圣杯布局：grid实现，两边固定，中间自适应，主体优先渲染 */
  13.             display: grid;
  14.             grid-template-columns: 15em minmax(50vw, auto) 15em;
  15.             grid-template-rows: 3em minmax(80vh, auto) 3em;
  16.             /* 设置命名网格区域在轨道中的显示位置 */
  17.             /* grid-template-areas:
  18.                 'header header header'
  19.                 'left main right'
  20.                 'footer footer footer';            */
  21.             /* 可以简化代码  */
  22.             /* 去除left 和right的命名 */
  23.             grid-template-areas:
  24.                 'header header header'
  25.                 '. main .'
  26.                 'footer footer footer'; 
  28.             gap: 0.5em
  29.         }
  31.         header {
  32.             grid-area: header;
  33.         }
  35.         footer {
  36.             grid-area: footer;
  37.         }
  39.         main {
  40.             grid-area: main;
  41.         }
  43.         /* aside.left {
  44.             grid-area: left;
  45.         }
  47.         aside.right {
  48.             grid-area: right;
  49.         } */

上手演练一番：
仿一个PHP中文网首页部分结构布局

  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>仿php.cn首页的部分组件</title>
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  11. <body>
  12.     <header>
  13.         <nav class="header-nav">
  14.             <ul>
  15.                 <li><a href="">PHP 中文网</a></li>
  16.                 <li><a href="">首页</a></li>
  17.                 <li><a href="">视频教程</a></li>
  18.                 <li><a href="">入门教程</a></li>
  19.                 <li><a href="">社区问答</a></li>
  20.                 <li><a href="">技术文章</a></li>
  21.                 <li><a href="">资源下载</a></li>
  22.                 <li><a href="">编程词典</a></li>
  23.                 <li><a href="">工具下载</a></li>
  24.                 <li><a href="">PHP培训</a></li>
  25.                 <li><a href="">消息</a></li>
  26.                 <li><a href="">登录</a></li>
  27.             </ul>
  28.         </nav>
  30.     </header>
  31.     <main>
  32.         <div class="main-top">
  33.             <nav class="main-top-left">
  34.                 <ul>
  35.                     <li><a href="">php开发</a></li>
  36.                     <li><a href="">前端开发</a></li>
  37.                     <li><a href="">服务端开发</a></li>
  38.                     <li><a href="">移动开发</a></li>
  39.                     <li><a href="">数据库</a></li>
  40.                     <li><a href="">服务器运维&下载</a></li>
  41.                     <li><a href="">在线工具箱</a></li>
  42.                     <li><a href="">常用类库</a></li>
  43.                 </ul>
  44.             </nav>
  45.             <ul class="main-top-top">
  46.                 <li><a href="">PHP头条</a></li>
  47.                 <li><a href="">孤独九剑</a></li>
  48.                 <li><a href="">学习路线</a></li>
  49.                 <li><a href="">在线工具</a></li>
  50.                 <li><a href="">趣味课堂</a></li>
  51.                 <li><a href="">社区问答</a></li>
  52.                 <li><a href="">课程直播</a></li>
  53.                 <li><input type="text" placeholder="输入搜素内容"></li>
  54.             </ul>
  55.             <div class="main-top-slideshow">
  56.                 <a href=""><img src="https://www.php.cn/static/images/index_banner1.png" alt=""></a>
  57.             </div>
  58.             <div class="main-top-bottom">
  59.                 <a href=""><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""></a>
  60.                 <a href=""><img src="https://www.php.cn/static/images/index_php_item2_.png?1" alt=""></a>
  61.                 <a href=""><img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt=""></a>
  62.                 <a href=""><img src="https://www.php.cn/static/images/index_php_new4.jpg?1" alt=""></a>
  63.             </div>
  64.         </div>
  65.         <div class="main-courses"> 
  66.             <h3>&lt;/&gt;php入门精品课程&lt;/&gt;</h3>
  67.             <ul class="main-courses-list">
  68.                 <li><a href=""><img src="https://www.php.cn/static/images/index_learn_first.jpg" alt=""></a></li>
  69.                 <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  70.                 <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt=""></a></li>
  71.                 <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5ab346fc62ce4221.jpg" alt=""></a></li>
  72.                 <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5acc118f11d6b969.jpg" alt=""></a></li>
  73.                 <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6e0d2b744633.jpg" alt=""></a></li>
  74.                 <li><a href=""><img src="https://img.php.cn/upload/course/000/001/120/5a9fb97057b15707.jpeg" alt=""></a></li>
  75.                 <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24019911a24370.jpg" alt=""></a></li>
  76.                 <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg" alt=""></a></li>
  77.                 <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5cecd27a4348b582.jpg" alt=""></a></li>
  78.                 <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt=""></a></li>
  79.                 <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a13c87351613730.jpg" alt=""></a></li>
  80.                 <li><a href=""><img src="https://img.php.cn/upload/course/000/171/829/5b19ef2990649817.jpg" alt=""></a></li>
  81.                 <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d240300be85b731.jpg" alt=""></a></li>
  82.             </ul>
  84.         </div> 
  86.     </main>
  87.     <footer>
  88.         footer
  89.     </footer>
  90. </body>
  92. </html>

外部链接css文件

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. body {
  8.     background-color: #f3f5f7;
  9. }
  11. li {
  12.     list-style: none;
  13. }
  15. a {
  16.     text-decoration: none;
  17.     color: #444444;
  18. }
  20. header {
  21.     background-color: #000000;
  22.     height: 60px;
  23.     /* text-align: center; */
  24.     margin-bottom: 30px;
  25. }
  27. footer {
  28.     height: 160px;
  29.     color: #eee;
  30.     background-color: #444;
  31. }
  33. header>nav>ul>li {
  34.     vertical-align: middle;
  35. }
  37. header>nav>ul>li>a {
  38.     color: white;
  39.     line-height: 60px;
  40.     font-size: 1.25rem;
  41.     display: block;
  42.     min-width: 9rem;
  43.     padding: .25em;
  44. }
  46. header>nav>ul {
  47.     display: flex;
  48.     justify-content: space-around;
  49. }
  51. main>.main-top {
  52.     width: 1200px;
  53.     height: 510px;
  55.     display: grid;
  56.     grid-template-columns: 216px 1fr;
  57.     grid-template-rows: 60px 1fr 120px;
  58.     margin: auto;
  59. }
  61. /* 左侧导航区 */
  63. main>.main-top>.main-top-left {
  64.     grid-area: span 3;
  65.     background-color: #2b333b;
  66.     border-radius: 10px 0 0 10px;
  67. }
  69. main>.main-top>.main-top-left>ul {
  70.     display: flex;
  71.     height: 510px;
  72.     flex-flow: column;
  73.     justify-content: space-between;
  74.     padding: 1em;
  75. }
  77. main>.main-top>.main-top-left>ul>li>a {
  78.     color: white;
  79.     font-size: 1.25em;
  80. }
  82. /* 顶部导航区 */
  84. main>.main-top>ul.main-top-top {
  85.     background-color: wheat;
  86.     display: grid;
  87.     grid-template-columns: repeat(8, 83px) 1fr;
  88.     place-items: center;
  89.     /* font-size: 1em; */
  90.     border-radius: 0 10px 0 0;
  91. }
  93. .main-top>ul.main-top-top>li:last-of-type {
  94.     place-self: center start;
  95.     padding-left: 30px;
  96. }
  97. .main-top>.main-top-slideshow img{
  98.     width: 988px;
  99. }
  100. /* 课程推荐 */
  102. main>.main-top>.main-top-bottom {
  103.     background-color: #fff;
  104.     padding: 10px;
  105.     display: grid;
  106.     grid-template-columns: repeat(4, 1fr);
  108.     border-radius: 0 0 10px 0;
  109. }
  111. main>.main-top>.main-top-bottom>* {
  112.     background-color: #fff;
  113. }
  115. /* 课程列表  */
  117. main>.main-courses {
  118.     width: 1200px;
  119.     height: 646px;
  120.     padding: 15px;
  121.     background-color: #fff;
  122.     display: grid;
  123.     grid-template-rows: 50px 1fr;
  124.     margin: 30px auto;
  125.     border-radius: 10px;
  126. }
  128. main>.main-courses h3 {
  129.     color: #444;
  130.     text-align: center;
  131.     margin-bottom: 30px;
  132. }
  134. main>.main-courses>.main-courses-list {
  135.     display: grid;
  136.     grid-template-columns: repeat(5, 1fr);
  137.     grid-template-rows: repeat(3, 1fr);
  138.     gap: 20px;
  139. }
  141. main>.main-courses>.main-courses-list>li:first-of-type {
  142.     grid-area: span 2;
  143. }
  145. main>.main-courses>.main-courses-list>li:first-of-type img {
  146.     width: 217px;
  147.     height: 364px;
  148. }
  150. main>.main-courses>.main-courses-list>li>a>img {
  151.     width: 217px;
  152.     height: 124px;
  153. }

效果图
效果图
总结：知识点太多，归纳起来三板斧希望能开辟一番天地
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 20px;

grid-area: span 2;

place-content: [start/end/center] [start/end/center];
place-content: [space-between/space-around/space-around] [space-between/space-around/space-around];
place-items: center;
place-self: center start;

布局的时候一定要考虑撑开容器的因素。

上一条：0105作业下一条：构造函数|对象原型-dom获取-增删改查
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多