search

博客列表 >grid项目对齐属性|实例演示-组件布局-媒体查询

grid项目对齐属性|实例演示-组件布局-媒体查询

葡萄枝子
葡萄枝子原创
2020年12月27日 00:02:261202浏览

grid项目对齐属性|实例演示-组件布局-媒体查询

  1. 将项目在网格单元和容器中对齐的相关属性全部实例演示;
  2. 快速实现php.cn首页主要组件的布局，并理解为什么？
  3. 理解grid的媒体查询与专业的媒体查询有什么区别？

1. 项目在网格单元和容器中的对齐属性

1.1 项目在网格单元中对齐

对齐需要 网格单元 中需要存在剩余空间

属性 描述
place-items 容器中所有项目在网格单元中的对齐
place-self 某个项目在网格单元(含网格区域)中的对齐

1.2 网格单元在网格容器中的对齐

对齐需要 网格容器 中存在剩余空间

属性 描述
place-content 网格单元在网格容器中的对齐方式

1.3 全部实例演示项目在网格单元和容器中的对齐

  • body 中一个container容器
  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>
  • style 中将container转grid容器
  1. /* grid 容器 */
  2. .container {
  3.     /* 转grid容器  */
  4.     display: grid;
  5.     /* 3列2行 */
  6.     grid-template-columns: repeat(3, 1fr);
  7.     grid-template-rows: repeat(2, 5em);
  8.     /* 行列轨道间距 */
  9.     gap: .5em;
  10.     /* 隐式轨道行高，与显式轨道相同 */
  11.     grid-auto-rows: 5em;
  12. }
  14. /* grid 项目 */
  15. .container>.item {
  16.     background-color: lightcyan;
  17.     border: 1px solid gray;
  18.     padding: .5em;
  19.     /* 设置宽度和高度，为项目在网格单元中腾出剩余空间 */
  20.     width: 3em;
  21.     height: 1.5em;
  22. }

1.3.1 place-items 项目在网格单元中的对齐

对齐的意义需要 网格单元 中存在剩余空间

  1. /* place-items 项目在单元格中的对齐 */
  2. .container {
  3.     /* 默认值，垂直居上，水平居左 */
  4.     place-items: initial;
  5.     place-items: auto;
  6.     place-items: unset;
  7.     /* 拉伸（取消项目固定尺寸，生效） */
  8.     place-items: stretch;
  9.     /* 垂直水平都居中 */
  10.     place-items: center;
  11.     /* 继承初始值，垂直居上，水平居左 */
  12.     place-items: inherit;
  13.     /* 垂直居上，水平居左 */
  14.     place-items: start auto;
  15.     /* 垂直居上，水平正常居左（取消项目固定尺寸则拉伸） */
  16.     place-items: start normal;
  17.     /* 垂直居上，水平居右 */
  18.     place-items: start end;
  19.     /* 垂直居下，水平居左 */
  20.     place-items: end start;
  21. }

项目在网格单元中的对齐

1.3.2 place-self 某个项目在网格单元中的对齐

网格单元，可以指某个单元格，也可以是多个单元格组成的网格区域

  • 1.3.2.1 place-self 某个项目在 单元格 中的对齐
  1. /* place-self 某个项目在单元格中的对齐 */
  2. .container>.item:nth-of-type(2) {
  3.     /* 项目2在网格单元中，垂直居上，水平居右 */
  4.     place-self: start end;
  5. }

某个项目在单元格中的对齐

  • 1.3.2.2 place-self 某个项目在 网格区域 中的对齐
  1. /* place-self 某个项目在网格区域中的对齐 */
  2. .container>.item:nth-of-type(2) {
  3.     /* 项目2在跨两行两列，在网格区域中 */
  4.     grid-area: span 2 / span 2;
  5.     /* 项目2在网格区域中垂直水平都居中 */
  6.     place-self: center;
  7. }

某个项目在网格区域中的对齐

1.3.3 place-content 网格单元在容器中的对齐

对齐的意义需要在 网格容器 中存在剩余空间

  • 容器中为垂直和水平两个方向腾出剩余空间
  1. /* place-content 网格单元在容器中的对齐 */
  2. .container {
  3.     border: 1px solid gray;
  4.     /* 定义高度和宽度，为容器腾出剩余空间 */
  5.     /* 定义高度，垂直方向腾出剩余空间 */
  6.     height: 25em;
  7.     width: 25em;
  8.     /* 更改为3个列宽为6em，水平方向腾出剩余空间 */
  9.     grid-template-columns: repeat(3, 6em);
  10. }

腾出剩余空间

  • 1.3.3.1 网格单元作为整体在容器中的对齐
  1. /* place-content 网格单元作为整体在容器中对齐 */
  2. .container {
  3.     /* 水平垂直都居中 */
  4.     place-content: center;
  5.     /* 继承初始值，垂直居上，水平居左 */
  6.     place-content: inherit;
  7.     /* 垂直居上，水平居左 */
  8.     place-content: start auto;
  9.     /* 垂直居上，水平正常居左（取消项目固定尺寸则拉伸） */
  10.     place-content: start normal;
  11.     /* 垂直居上，水平居右 */
  12.     place-content: start end;
  13.     /* 垂直居下，水平居左 */
  14.     place-content: end start;
  15. }

网格单元作为整体在容器中对齐

  • 1.3.3.2 网格单元之间在容器中的对齐
  1. /* place-content 网格单元之间在容器中的对齐 */
  2. .container {
  3.     /* 网格单元之间垂直方向两端对齐，水平方向分散对齐 */
  4.     place-content: space-between space-around;
  5.     /* 网格单元之间垂直方向两端对齐，水平方向平均对齐 */
  6.     place-content: space-between space-evenly;
  7. }

网格单元之间在容器中的对齐

2. 快速实现php.cn首页主要组件的布局，并理解为什么？

2.1 基本架构

  • 页眉顶部菜单 header
    • 12列布局
  • 中间主体 main
    • 2列3行布局，第1列跨两行
    • 广告条1列布局
    • 头条开始3列布局
    • 3列2行布局，第2列和第3列跨两行
    • 词典分类2列2行布局
    • 入门精品课程5列4行布局，标题跨5列，然后第一个项目跨2行
    • 进阶学习，同上一条
    • 资源下载2列2行布局，第2行第1列分2列3行（最后一行跨两列）布局，第2行第2列分2列3行布局
    • 手册大全5列4行布局，第1列第2项目跨3行
    • 友情链接l列2行布局
  • 页脚 footer
    • 2列布局

2.2 主要组件的布局

  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="static/css/php-cn.css">
  9. </head>
  11. <body>
  12.     <!-- 页眉 -->
  13.     <header>
  14.         <div class="logo">Logo</div>
  15.         <div class="topmenu">顶部导航菜单</div>
  16.         <div class="bulletin">公告图标</div>
  17.         <div class="user-avatar">用户图像</div>
  18.     </header>
  19.     <!-- 主体 -->
  20.     <main>
  21.         <!-- 顶部导航2列3行布局，第1列跨两行 -->
  22.         <div class="main-top">
  23.             <!-- 左侧菜单列表 -->
  24.             <ul class="menus-left">
  25.                 <li class="menu-left">菜单1</li>
  26.                 <li class="menu-left">菜单2</li>
  27.                 <li class="menu-left">菜单3</li>
  28.                 <li class="menu-left">菜单4</li>
  29.                 <li class="menu-left">菜单5</li>
  30.                 <li class="menu-left">菜单6</li>
  31.                 <li class="menu-left">菜单7</li>
  32.                 <li class="menu-left">菜单8</li>
  33.             </ul>
  34.             <!-- 顶部菜单 -->
  35.             <ul class="menus-top">
  36.                 <li class="menu-top">菜单1</li>
  37.                 <li class="menu-top">菜单2</li>
  38.                 <li class="menu-top">菜单3</li>
  39.                 <li class="menu-top">菜单4</li>
  40.                 <li class="menu-top">菜单5</li>
  41.                 <li class="menu-top">菜单6</li>
  42.                 <li class="menu-top">菜单7</li>
  43.                 <li class="menu-search">搜索框</li>
  44.             </ul>
  45.             <div class="slider">轮播图</div>
  46.             <!-- 底部4个图片 -->
  47.             <ul class="course">
  48.                 <li>图1</li>
  49.                 <li>图2</li>
  50.                 <li>图3</li>
  51.                 <li>图4</li>
  52.             </ul>
  53.         </div>
  54.         <!-- 广告条1列布局 -->
  55.         <div class="main-banner">顶部通栏广告</div>
  56.         <!-- 头条3列布局 -->
  57.         <div class="message">
  58.             <!-- 左侧头条 -->
  59.             <div class="news">
  60.                 <h2>头条</h2>
  61.                 <ul class="news-list">
  62.                     <li class="news-item">消息1</li>
  63.                     <li class="news-item">消息2</li>
  64.                     <li class="news-item">消息3</li>
  65.                     <li class="news-item">消息4</li>
  66.                     <li class="news-item">消息5</li>
  67.                     <li class="news-item">消息6</li>
  68.                     <li class="news-item">消息7</li>
  69.                     <li class="news-item">消息8</li>
  70.                     <li class="news-item">消息9</li>
  71.                     <li class="news-item">消息10</li>
  72.                     <li class="news-item">消息11</li>
  73.                     <li class="news-item">消息12</li>
  74.                 </ul>
  75.             </div>
  76.             <!-- 中间课程 -->
  77.             <div class="courses">
  78.                 <h2>最新课程</h2>
  79.                 <ul class="courses-list">
  80.                     <li class="courses-item">课程1</li>
  81.                     <li class="courses-item">课程2</li>
  82.                     <li class="courses-item">课程3</li>
  83.                     <li class="courses-item">课程4</li>
  84.                     <li class="courses-item">课程5</li>
  85.                     <li class="courses-item">课程6</li>
  86.                 </ul>
  87.             </div>
  88.             <!-- 右侧手册 -->
  89.             <div class="books">
  90.                 <h2>常用手册</h2>
  91.                 <ul class="books-list">
  92.                     <li class="books-item">手册1</li>
  93.                     <li class="books-item">手册2</li>
  94.                     <li class="books-item">手册3</li>
  95.                     <li class="books-item">手册4</li>
  96.                     <li class="books-item">手册5</li>
  97.                     <li class="books-item">手册6</li>
  98.                 </ul>
  99.             </div>
  100.         </div>
  101.         <!-- 3列2行布局，第2列和第3列跨两行 -->
  103.         <!-- 词典分类2列2行布局 -->
  105.         <!-- 入门精品课程5列4行布局，标题跨5列，然后第一个项目跨2行 -->
  107.         <!-- 进阶学习，同上一条 -->
  109.         <!-- 资源下载2列2行布局，第2行第1列分2列3行（最后一行跨两列）布局，第2行第2列分2列3行布局 -->
  111.         <!-- 手册大全5列4行布局，第1列第2项目跨3行 -->
  113.         <!-- 友情链接l列2行布局 -->
  114.     </main>
  115.     <!-- 页脚 footer -->
  116.     <footer>
  117.         <div class="footer-left">footer-left</div>
  118.         <div class="footer-right">footer-right</div>
  119.     </footer>
  120. </body>
  122. </html>
  • 引入的外部css样式为
  1. /* 初始化 */
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. li {
  8.     list-style: none;
  9. }
  10. a {
  11.     text-decoration: none;
  12. }
  14. /* 测试 */
  15. body * {
  16.     border: 1px solid grey;
  17. }
  19. /* 页眉顶部菜单 header */
  20. header {
  21.     width: 100%;
  22.     height: 6em;
  23.     background-color: black;
  24.     display: grid;
  25.     /* 4列布局，Logo + 导航菜单 + 公告 + 头像 */
  26.     grid-template-columns: 200px 1fr 80px 120px;
  27.     /* 网格单元居中 */
  28.     place-content: center;
  29. }
  30. header > div {
  31.     color: lightgray
  32. }
  33. header > div > .topmenu {
  34.     /* 顶部导航菜单垂直居中，水平居左 */
  35.     place-self: auto start;
  36. }
  38. /* 中间主体 main */
  39. main {
  40.     width: 1200px;
  41.     /* 上下间距1em，水平居中 */
  42.     margin: 2em auto;
  43. }
  45. /* 顶部导航2列3行布局，第1列跨两行 */
  46. main > .main-top {
  47.     display: grid;
  48.     height: 300px;
  49.     grid-template-columns: 200px 1fr;
  50.     grid-template-rows: 5em 1fr 50px;
  51.     border-radius: 1em;
  52. }
  53. /* 左侧菜单列表 */
  54. main > .main-top > .menus-left {
  55.     /* 左侧菜单跨3列 */
  56.     grid-area: span 3;
  57.     display: grid;
  58.     grid-template-rows: repeat(8, 1fr);
  59.     padding-left: 20px;
  60.     /* 垂直居中，水平居左 */
  61.     place-items: center start;
  62. }
  63. /* 顶部菜单 */
  64. main > .main-top > .menus-top {
  65.     display: grid;
  66.     grid-template-columns: repeat(7, 80px) 1fr;
  67.     place-items: center;
  68. }
  69. /* 轮播图 */
  70. main > .main-top > .slider {
  71.     text-align: center;
  72.     width: 100%;
  73.     height: 100%;
  74. }
  75. /* 课程 */
  76. main > .main-top > .course {
  77.     display: grid;
  78.     grid-template-columns: repeat(4, 1fr);
  79.     place-items: center;
  80. }
  82. /* 广告条1列布局 */
  83. main > .main-banner {
  84.     margin-top: 20px;
  85.     border-radius: .5em;
  86.     height: 90px;
  87.     text-align: center;
  88.     line-height: 90px;
  89. }
  91. /* 头条3列布局 */
  92. main > .message {
  93.     margin-top: 20px;
  94.     border-radius: .5em;
  95.     display: grid;
  96.     grid-template-columns: 300px 1fr 250px;
  97.     gap: .5em;
  98. }
  99. /* 标题字号 */
  100. main > .message h2 {
  101.     font-size: 1em;
  102.     font-weight: normal;
  103.     height: 35px;
  104.     padding: 5px 10px 0 30px;
  105.     margin-bottom: 15px;
  106.     border-bottom: 1px solid #ddd;
  107. }
  108. /* 左侧头条 */
  109. main > .message > .news > .news-list {
  110.     display: grid;
  111.     height: 350px;
  112.     grid-template-rows: repeat(12, 1fr);
  113.     padding-left: 10px;
  114.     place-items: center left;
  115. }
  116. /* 中间课程 */
  117. main > .message > .courses > .courses-list {
  118.     display: grid;
  119.     height: 350px;
  120.     grid-template-columns: repeat(3, 1fr);
  121.     grid-template-rows: repeat(2, 1fr);
  122.     gap: 1em;
  123.     place-items: center;
  124. }
  125. /* 右边手册 */
  126. main > .message > .books > .books-list {
  127.     display: grid;
  128.     height: 350px;
  129.     grid-template-rows: repeat(6, 1fr);
  130.     place-items: center left;
  131.     padding-left: .5em;
  132. }
  134. /* 3列2行布局，第2列和第3列跨两行 */
  136. /* 词典分类2列2行布局 */
  138. /* 入门精品课程5列4行布局，标题跨5列，然后第一个项目跨2行 */
  140. /* 进阶学习，同上一条 */
  142. /* 资源下载2列2行布局，第2行第1列分2列3行（最后一行跨两列）布局，第2行第2列分2列3行布局 */
  144. /* 手册大全5列4行布局，第1列第2项目跨3行 */
  146. /* 友情链接l列2行布局 */
  148. /* 页脚 footer */
  149. footer {
  150.     width: 100%;
  151.     height: 8em;
  152.     background-color:#393D49;
  153.     display: grid;
  154.     /* 2列布局 */
  155.     grid-template-columns: auto 500px;
  156. }
  157. footer > div {
  158.     color: ghostwhite;
  159. }
  • 实验主要组件的布局附图

实验主要组件的布局附图

2.3 理解为什么？

  • 方便元素转 grid 网格布局和嵌套布局

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

  • grid的媒体查询，根据grid容器的宽度，除以最小最大值之间的项目宽度，获得auto-fit的值，垂直方向绘制auto-fit个列宽的网格，水平方向也类似绘制，空轨折叠，不占据容器空间。

  • 专业的媒体查询，不是依据某元素的父级容器宽度计算，以屏幕宽度查询。

上一条：项目在grid容器中的对齐方式以及利用grid布局仿写php中文网下一条：伪类选择器的状态匹配，选择器的优先级和提权方式，属性的简写
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多