search

博客列表 >CSS的Grid布局中的常用属性以及属性的常用值

CSS的Grid布局中的常用属性以及属性的常用值

王娇
王娇原创
2020年04月18日 15:53:501794浏览

学习总结

  • 使用grid和flex布局可以轻松进行整站布局，grid进行主体框架布局，flex进行细节处理
  • grid如果没有设置项目在容器中的填充方式，则按照从上到下从左到右依次把项目填充到容器单元格中
  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.     <link rel="stylesheet" href="css/style.css" />
  7.     <title>Grid布局</title>
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="logo"></div>
  12.       <div class="nav">
  13.         <div>
  14.           <a href="index.php">首 页</a>
  15.           <a href="invitejob.php">招聘信息</a>
  16.           <a href="foster.php">培训信息</a>
  17.           <a href="house.php">房屋信息</a>
  18.           <a href="seekbuy.php">求购信息</a>
  19.           <a href="seekjob.php">求职信息</a>
  20.           <a href="teaching.php">家教信息</a>
  21.           <a href="car.php">车辆信息</a>
  22.           <a href="sale.php">出 售信息</a>
  23.           <a href="recruitbusiness.php">招商引资</a>
  24.           <a href="search.php">寻物启示</a>
  25.         </div>
  26.       </div>
  27.       <div class="aside">
  28.         <div class="section">
  29.           <label for="" class="iconfont"></label>
  30.           <label for="">新闻资讯</label>
  31.         </div>
  32.         <div class="section">
  33.           <label for="" class="iconfont"></label>
  34.           <label for="">搜索内容</label>
  35.         </div>
  36.         <div class="section">
  37.           <label for="" class="iconfont"></label>
  38.           <label for="">联系我们</label>
  39.           <ul>
  40.             <li>名称：北京瑄然软件</li>
  41.             <li>地址：北京顺义区...</li>
  42.             <li>电话：<a href="tel:15010046927">1501004xxxx</a></li>
  43.             <li>
  44.               邮箱：<a href="mailto:573661083@qq.com">5736610xx@qq.com</a>
  45.             </li>
  46.           </ul>
  47.         </div>
  48.       </div>
  49.       <div class="main">
  50.         <iframe
  51.           name="mainFrame"
  52.           scrolling="auto"
  53.           style="border: 0px;"
  54.           src="mainIndex.html"
  55.         >
  56.         </iframe>
  57.       </div>
  58.       <div class="footer">
  59.         <a href="http://www.xuanransoftware.com/" target="_blank"
  60.           >北京瑄然软件工作室</a
  61.         >  
  62.         <a href="https://www.php.cn/" target="_blank">友情链接：php中文网</a>
  63.       </div>
  64.     </div>
  65.   </body>
  66. </html>
  1. * {
  2.   padding: 0px;
  3.   margin: 0px;
  4.   font-size: 12px;
  5.   font-family: "Courier New", Courier, monospace;
  6.   box-sizing: border-box;
  7. }
  8. ul > li {
  9.   list-style-type: none;
  10. }
  11. a {
  12.   color: white;
  13.   text-decoration: none;
  14. }
  15. @font-face {
  16.   font-family: "iconfont";
  17.   src: url("../fontIcon/iconfont.eot");
  18.   src: url("../fontIcon/iconfont.eot?#iefix") format("embedded-opentype"),
  19.     url("../fontIcon/iconfont.woff2") format("woff2"),
  20.     url("../fontIcon/iconfont.woff") format("woff"),
  21.     url("../fontIcon/iconfont.ttf") format("truetype"),
  22.     url("../fontIcon/iconfont.svg#iconfont") format("svg");
  23. }
  24. .iconfont {
  25.   font-family: "iconfont" !important;
  26.   font-size: 16px;
  27.   font-style: normal;
  28.   -webkit-font-smoothing: antialiased;
  29.   -moz-osx-font-smoothing: grayscale;
  30.   color: white;
  31. }
  32. body {
  33.   max-width: 100vw;
  34.   min-height: 100vh;
  35.   display: flex;
  36.   justify-content: center;
  37.   align-items: center;
  38. }
  39. .container {
  40.   min-width: 920px;
  41.   min-height: 600px;
  42.   display: grid;
  43.   grid-template-columns: 220px 1fr;
  44.   grid-template-rows: 56px 1fr 56px;
  45.   grid-template-areas:
  46.     "logo-a nav-a"
  47.     "aside-a main-a"
  48.     "footer-a footer-a";
  49.   gap: 3px;
  50. }
  51. /* 页眉样式 */
  52. .container > .logo {
  53.   /* grid-row: 1/2;
  54.   grid-column: 1/2; */
  55.   grid-area: logo-a;
  56.   background-image: url(../images/logo.png);
  57. }
  58. /* 导航栏样式 */
  59. .container > .nav {
  60.   /* grid-row: 1/2;
  61.   grid-column: 2/3; */
  62.   grid-area: nav-a;
  63.   background-image: url(../images/menu.png);
  64.   display: flex;
  65.   justify-content: center;
  66.   align-items: center;
  67. }
  68. .container > .nav > div {
  69.   width: 430px;
  70.   display: flex;
  71.   flex-flow: row wrap;
  72.   justify-content: space-around;
  73. }
  74. .container > .nav > div > a {
  75.   padding: 0px 10px;
  76.   font-size: 1.1rem;
  77. }
  79. /* 侧边栏样式 */
  80. .container > .aside {
  81.   /* grid-row: 2/3;
  82.   grid-column: 1/2; */
  83.   grid-area: aside-a;
  84.   background-color: lightseagreen;
  85.   display: flex;
  86.   flex-flow: column nowrap;
  87.   justify-content: space-between;
  88. }
  89. .container > .aside > .section {
  90.   margin: 10px 10px;
  91. }
  93. /* 主体内容区样式 */
  94. .container > .main {
  95.   /* grid-row: 2/3;
  96.   grid-column: 2/3; */
  97.   grid-area: main-a;
  98.   align-self: stretch;
  99.   justify-self: stretch;
  100.   background-color: lightsalmon;
  101. }
  102. .container > .main > iframe {
  103.   width: 100%;
  104.   height: 100%;
  105. }
  107. /* 页脚样式 */
  108. .container > .footer {
  109.   /* grid-row: 3/4; */
  110.   /* grid-column: span 2; */
  111.   grid-area: footer-a;
  112.   background-image: url(../images/end.png);
  113.   padding: 20px;
  114.   text-align: center;
  115. }
  116. .container > .footer > a {
  117.   color: white;
  118.   font-size: 1.5rem;
  119. }
  • 效果图

CSS的Grid布局

1.Grid中容器的常用属性

1.1 display设置布局方式属性

  • display=grid属性设置容器的布局方式为grid布局

1.2 grid-template-rows设置容器行数属性

  • grid-template-rows: 56px 1fr 53px设置容器为一个3行的容器，第一行高度为56像素，最后一行高度为53像素，中间一行高度是容器整个高度减去第一行和最后一行高度 后的高度

1.3 grid-template-columns设置容器列数属性

  • grid-template-columns: 220px 1fr设置容器为一个两列的容器，第一列的宽度为220px,第二列的宽度为容器整个的宽度减去第一列后的宽度

1.4 grid-template-areas:给网格区域重命名一个语义化的名称

  1. grid-template-areas:
  2.     "logo-a nav-a"
  3.     "aside-a main-a"
  4.     "footer-a footer-a";
  • 重命名3行2列的网格名称，列之间用空格隔开，行之间用双引号隔开，名称相同的合并到一起

1.5 gap设置行与列的间距

  • row-gap:2px设置行间距为2px
  • column-gap:2px设置列间距为2px
  • gap:2px 3px设置行间距为2px,列间距为3px
  • gap:2px设置行与列的间距都为2px

2.Grid中项目的常用属性

1.1 grid-row设置项目在容器中行的填充方式

  • grid-row: 3/4;设置项目在容器中开始的行号为3，结束行号为4

1.2 grid-column设置项目在容器中列的填充方式

  • grid-column: span 2;设置项目在容器中列的填充方式为跨两列

1.3 grid-area给网格设置一个语义化的名称填充到容器中

  • grid-area: logo-a;设置网格的语义化名称为logo-a

    1.4 align-self设置项目在单元格中的垂直对齐方式

  • align-self: center;如果项目在单元格中没有占满则垂直方向居中对齐

    1.5 justify-self设置项目在单元格中的水平对齐方式

  • justify-self: center;如果项目在单元格中没有占满水平方向居中对齐

    使用行号和列号将项目填充到容器

  • css示例代码
  1. * {
  2.   padding: 0px;
  3.   margin: 0px;
  4.   font-size: 12px;
  5.   font-family: "Courier New", Courier, monospace;
  6.   box-sizing: border-box;
  7. }
  8. body {
  9.   max-width: 100vw;
  10.   min-height: 100vh;
  11.   display: flex;
  12.   justify-content: center;
  13.   align-items: center;
  14. }
  15. .container {
  16.   min-width: 920px;
  17.   min-height: 600px;
  18.   display: grid;
  19.   grid-template-columns: 220px 1fr;
  20.   grid-template-rows: 56px 1fr 56px;
  21. }
  22. .container > .logo {
  23.    grid-row: 1/2;
  24.   grid-column: 1/2;
  25.   background-image: url(../images/logo.png);
  26. }
  27. .container > .nav {
  28.   grid-row: 1/2;
  29.   grid-column: 2/3;
  30.   background-image: url(../images/menu.png);
  31. }
  32. .container > .aside {
  33.   grid-row: 2/3;
  34.   grid-column: 1/2;
  35.   background-color: lightseagreen;
  36. }
  37. .container > .main {
  38.   grid-row: 2/3;
  39.   grid-column: 2/3;
  40. }
  41. .container > .footer {
  42.   grid-row: 3/4;
  43.   grid-column: span 2;
  44.   background-image: url(../images/end.png);
  45. }

使用重命令的网格区域名称填充到容器

  • css示例代码
  1. * {
  2.   padding: 0px;
  3.   margin: 0px;
  4.   font-size: 12px;
  5.   font-family: "Courier New", Courier, monospace;
  6.   box-sizing: border-box;
  7. }
  8. body {
  9.   max-width: 100vw;
  10.   min-height: 100vh;
  11.   display: flex;
  12.   justify-content: center;
  13.   align-items: center;
  14. }
  15. .container {
  16.   min-width: 920px;
  17.   min-height: 600px;
  18.   display: grid;
  19.   grid-template-columns: 220px 1fr;
  20.   grid-template-rows: 56px 1fr 56px;
  21.   grid-template-areas:
  22.     "logo-a nav-a"
  23.     "aside-a main-a"
  24.     "footer-a footer-a";
  25. }
  26. .container > .logo {
  27.   grid-area: logo-a;
  28.   background-image: url(../images/logo.png);
  29. }
  30. .container > .nav {
  31.   grid-area: nav-a;
  32.   background-image: url(../images/menu.png);
  33. }
  34. .container > .aside {
  35.   grid-area: aside-a;
  36.   background-color: lightseagreen;
  37. }
  38. .container > .main {
  39.   grid-area: main-a;
  40. }
  41. .container > .footer {
  42.   grid-area: footer-a;
  43.   background-image: url(../images/end.png);
  44. }
  • 以上两种填充方式使用的html代码相同
  • html示例代码
  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.     <link rel="stylesheet" href="css/style1.css" />
  7.     <title>Grid布局</title>
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="logo">logo</div>
  12.       <div class="nav">nav</div>
  13.       <div class="aside">aside</div>
  14.       <div class="main">main</div>
  15.       <div class="footer">footer</div>
  16.     </div>
  17.   </body>
  18. </html>
上一条：grid布局属性下一条：CSS的常用文本属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多