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

12列的栅格布局

原理

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

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

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

效果图如下：

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

栅格布局实现三行三列

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>12列实现栅格布局</title>
 <style type="text/css">
 .container{
     display: grid;
     min-width: 90vw;
     gap: 0.5em;
     border: 1px solid #ccc;
 }
 .item{
     background-color: green;
     gap:.5em;
 }
 /*将行转化为grid布局，从而使row里面的item成为容器的子元素*/
   .container >.row {
  /* 将容器container转为grid */
  display: grid;
  /* 创建网格模版：并利用fr等分 */
  grid-template-columns: repeat(12, 1fr);
  /* 考虑到页眉和页脚各占1行，主体和侧边1行，所以还要划分出三行出来 */
  gap: 0.5em;
  min-height: 3em;
}
   /* 设置每个可以引用的变量，共12个 */
.col-12 {
  /* 跨12列 */
  grid-column: span 12;
}
.col-11 {
  /* 跨11列 */
  grid-column: span 11;
}
.col-10 {
  /* 跨10列 */
  grid-column: span 10;
}
.col-9 {
  /* 跨9列 */
  grid-column: span 9;
}
.col-8 {
  /* 跨8列 */
  grid-column: span 8;
}
.col-7 {
  /* 跨7列 */
  grid-column: span 7;
}
.col-6 {
  /* 跨6列 */
  grid-column: span 6;
}
.col-5 {
  /* 跨5列 */
  grid-column: span 5;
}
.col-4 {
  /* 跨4列 */
  grid-column: span 4;
}
.col-3 {
  /* 跨3列 */
  grid-column: span 3;
}
.col-2 {
  /* 跨2列 */
  grid-column: span 2;
}
.col-1 {
  /* 跨1列 */
  grid-column: span 1;
}
.container>.row:nth-of-type(2){
    min-height: 60em;
}
 </style>
</head>
<body>
 <div class="container">
   <!-- 页眉 -->
   <div class="row">
     <div class="item col-12">header</div>
   </div>
   <!-- 主体 -->
   <div class="row">
     <div class="item col-2">left-aside</div>
     <div class="item col-8">main</div>
     <div class="item col-2">right-aside</div>
   </div>
   <!-- 页脚 -->
   <div class="row">
     <div class="item col-12">footer</div>
   </div>
 </div>
</body>
</html>

效果图如下：

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

flex的属性描述

2021-03-26 18:31:34