Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid实现12列的栅格布局
Blogger Information
Blog 33
fans 1
comment 0
visits 21831
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实现12列的栅格布局
冰雪琉璃
Original
1352 people have browsed it

Grid利用fr实现栅格12列布局

12列的栅格布局

原理

  • 栅格布局原理：栅格布局其实就是把一个区域等分为多少部分，利用fr单位来实现等分，某个区域来进行调用几分之几。
    假设我将一个区域等分为12份。然后左边我想要10份 右侧我想要2份，就可以利用栅格布局来快速实现这个功能。
  • 实现
    这里我们为了实现栅格布局，要用到相对单位fr。(不一定适用fr来实现栅格布局)

fr：剩余空间分配数。fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。
简单来说fr就是讲剩余空间等比例划分，然后将剩余空间按照一定的比例分给容器。

  1. grid-template-columns: repeat(11, 1fr);

效果图如下：

  1. 等分为11份，一共是12份。

    栅格布局实现三行三列

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <title>12列实现栅格布局</title>
    6.  <style type="text/css">
    7.  .container{
    8.      display: grid;
    9.      min-width: 90vw;
    10.      gap: 0.5em;
    11.      border: 1px solid #ccc;
    13.  }
    14.  .item{
    15.      background-color: green;
    16.      gap:.5em;
    17.  }
    18.  /*将行转化为grid布局，从而使row里面的item成为容器的子元素*/
    19.    .container >.row {
    20.   /* 将容器container转为grid */
    21.   display: grid;
    22.   /* 创建网格模版：并利用fr等分 */
    23.   grid-template-columns: repeat(12, 1fr);
    24.   /* 考虑到页眉和页脚各占1行，主体和侧边1行，所以还要划分出三行出来 */
    25.   gap: 0.5em;
    26.   min-height: 3em;
    27. }
    28.    /* 设置每个可以引用的变量，共12个 */
    29. .col-12 {
    30.   /* 跨12列 */
    31.   grid-column: span 12;
    32. }
    33. .col-11 {
    34.   /* 跨11列 */
    35.   grid-column: span 11;
    36. }
    37. .col-10 {
    38.   /* 跨10列 */
    39.   grid-column: span 10;
    40. }
    41. .col-9 {
    42.   /* 跨9列 */
    43.   grid-column: span 9;
    44. }
    45. .col-8 {
    46.   /* 跨8列 */
    47.   grid-column: span 8;
    48. }
    49. .col-7 {
    50.   /* 跨7列 */
    51.   grid-column: span 7;
    52. }
    53. .col-6 {
    54.   /* 跨6列 */
    55.   grid-column: span 6;
    56. }
    57. .col-5 {
    58.   /* 跨5列 */
    59.   grid-column: span 5;
    60. }
    61. .col-4 {
    62.   /* 跨4列 */
    63.   grid-column: span 4;
    64. }
    65. .col-3 {
    66.   /* 跨3列 */
    67.   grid-column: span 3;
    68. }
    69. .col-2 {
    70.   /* 跨2列 */
    71.   grid-column: span 2;
    72. }
    73. .col-1 {
    74.   /* 跨1列 */
    75.   grid-column: span 1;
    76. }
    77. .container>.row:nth-of-type(2){
    78.     min-height: 60em;
    79. }
    80.  </style>
    81. </head>
    82. <body>
    83.  <div class="container">
    84.    <!-- 页眉 -->
    85.    <div class="row">
    86.      <div class="item col-12">header</div>
    87.    </div>
    88.    <!-- 主体 -->
    90.    <div class="row">
    91.      <div class="item col-2">left-aside</div>
    92.      <div class="item col-8">main</div>
    93.      <div class="item col-2">right-aside</div>
    94.    </div>
    95.    <!-- 页脚 -->
    96.    <div class="row">
    97.      <div class="item col-12">footer</div>
    98.    </div>
    99.  </div>
    100. </body>
    101. </html>

    效果图如下：

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