Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS的Grid布局中的常用属性以及属性的常用值
Blogger Information
Blog 64
fans 6
comment 2
visits 83028
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
CSS的Grid布局中的常用属性以及属性的常用值
王娇
Original
1795 people have browsed it

学习总结

  • 使用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>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：grid一定会成为前端布局主流, 赶紧学
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