Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 用grid来实现栅格布局
Blogger Information
Blog 13
fans 0
comment 0
visits 10442
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
用grid来实现栅格布局
微光
Original
978 people have browsed it

1、用grid来实现12栅格布局

css代码部分：

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. .container {
  7.   min-width: 100vw;
  8.   min-height: 100vh;
  9.   display: grid;
  10.   place-content: center;
  11.   gap: 0.1em;
  12. }
  13. .row {
  14.   min-width: 90vw;
  15.   display: grid;
  16.   grid-template-columns: repeat(12, 1fr);
  17.   min-height: 3em;
  18.   gap: 0.5em;
  19. }
  20. .item {
  21.   background-color: lightcyan;
  22.   border: 1px solid;
  23.   border-radius: 0.5em;
  24.   text-align: center;
  25.   padding: 1em;
  26.   display: grid;
  27. }
  28. .col-12 {
  29.   grid-column: span 12;
  30. }
  31. .col-11 {
  32.   grid-column: span 11;
  33. }
  34. .col-10 {
  35.   grid-column: span 10;
  36. }
  38. .col-9 {
  39.   grid-column: span 9;
  40. }
  42. .col-8 {
  43.   grid-column: span 8;
  44. }
  46. .col-7 {
  47.   grid-column: span 7;
  48. }
  50. .col-6 {
  51.   grid-column: span 6;
  52. }
  54. .col-5 {
  55.   grid-column: span 5;
  56. }
  58. .col-4 {
  59.   grid-column: span 4;
  60. }
  62. .col-3 {
  63.   grid-column: span 3;
  64. }
  66. .col-2 {
  67.   grid-column: span 2;
  68. }
  70. .col-1 {
  71.   grid-column: span 1;
  72. }

效果展示：

2、用封装好的css代码实现一个经典的圣杯布局

html代码部分：

  1.  <body>
  2.     <div class="container">
  3.       <!-- 页眉 -->
  4.       <div class="row">
  5.         <div class="item col-12">header</div>
  6.       </div>
  7.       <!-- 主体 -->
  8.       <div class="row">
  9.         <div class="item col-2">left</div>
  10.         <div class="item col-8">main</div>
  11.         <div class="item col-2">right</div>
  12.       </div>
  13.       <!-- 页脚 -->
  14.       <div class="row">
  15.         <div class="item col-12">footer</div>
  16.       </div>
  17.     </div>
  18.   </body>

效果图：

Correcting teacher：灭绝师太灭绝师太

Correction status：qualified

Teacher's comments：
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